Bi-Bi Zoo
Redesign the mobile system for the web
Deliverable: Responsive Website
Role: [Individual] Web design, UI design, Design strategy
Duration: 12 weeks
Tool Used: Adobe XD
The Context
Bibi Zoo is a collection of healing and interesting stories, currently only on mobile devices.
Bibi Zoo used to publish its articles and stories only on social media like WeChat and Weibo. But as the firm expands, it enriches its services and has more and more products. So, building up the website can:
help the firm organize all the services they have
make it easier and quickly find what users want
encourage loyalty and brand recognition
The Problem
The current mobile interface is hard to follow when users try to find several key functions such as shopping or searching for a particular article. The need to have an alternative information architecture for all the functions and access to the web version is urgent.
#Before
For example, when you want to get to the shopping page, the current mobile version involves 6 steps 😤 (if you are lucky):
#After
The redesigned web version: 2 easy steps, simple and clear 😌
The Design Goals
This case study refactors with a focus on a better user experience, a bolder expression of branding throughout the site, and much more functionality include:
Redesign the information architecture, clearly emphasize primary products
Embody the core characteristics of Bibi Zoo throughout all components of their visual design system
Simplify workflow and improve user-centered experiences
The Challenge
How might we create a straightforward visual design system for the website?
Information Architecture
What are the primary functions of Bibi Zoo?
This is the new information structure of the navigation website.
Start from paper wireframes
What is a good way to lay out all the pages?
Paper wireframes are a great and quick start to imagining what the pages could look like.
Digitize to low-fi prototype
What are the exact spacings for the website?
With wireframes, I laid down the structure of the website, and a base for the final design digitally.
The Product
Here’s my final design.
Home page
Clear and intuitive navigation menu
One featured image showing the latest story
Story page
The story will be presented in a sequence that optimizes screen size with responsive adjustment
At the end of the current story, other stories will encourage more reading
Story page 2
The consistent layout on the story page
Theme stories
This page shows the different story themes that Bibi has
Users can click on the thumbnail to further explore the full story
Hiring page
The hiring page has a hiring poster that attacks potential employee to join their team
This branding strategy also shows consistency of the branding and firm culture
Closing Thoughts
Why this project?
I love reading their stories. And I find not being able to read their stories on my laptop is a pain and I assume a lot of other users are also facing the same issue. Designing a web version for the firm that I like is a great pleasure. And I am satisfied with what I come up with in the end with consistent components and strong branding strategies.