Blubox Mobile Site Redesign:
Mobile first design to improve the user experience


Research, UX/UI Design, Userflow, Wireframe
‍
I recently worked on a website redesign project commissioned by a design agency in Dubai. The design agency’s client wanted  to improve their UI/UX design for their website. It’s an e-commerce website, where users can customize and order food boxes. The website needed to be responsive to both mobile and desktop sizes.
My Role
UX/UI Designer
I was in charge of the UX/UI design for this project. I worked closely with the managing director to accomplish this project.
‍
• Create user flow and wireframe based on research
• Design all UIs related to the project
• Build prototype for client to understand workflows
The Problem
The original website was branded as food4life, but the company had changed their name to Blubox. The Dubai design agency was working on the redesign for their products. It was in the middle of the process of rebranding. I had to consider the new brand colors and theme as I worked on the design. I studied their old website layout  and found 3 main issues to fix from the research of their website.

1. Layout
Customers want a grocery provider that they can trust. ‍The website’s confusing layout made it hard for consumers to know what they were paying for.

2. Cart process
‍The Shopping cart process was unclear on how to initiate. Most current customers don’t have a lot of time to spend on grocery shopping and searching for produce online is a pain point for customers.

3. Subscription
‍Customers want stability and convenience when shopping for groceries. Previous website had no subscription option.
Goals
User goal
Quick and easy to order fresh food online, that will be delivered to the doors.

Business goal
‍Friendly and Trustworthy: Blubox is aiming to position themselves as a healthy food provider to families. In addition to the convenience offered by home delivery, they need to be able to convince the head of the household that they are safe, healthy, and reliable enough to be trusted with the family’s nutrition.
The challenge
‍There were two challenges that I had to be aware of while working on the redesign

1. It was my first time designing for a company in Dubai. I had to research the culture to ensure my design was tailored to the correct audience.
2. The design agency that had hired me were also working on rebranding the company. I had to make sure my design was in step with the overall rebranding effort.
The user centered business canvas
Before starting the design process, I filled out the UCBC form to gather facts and assumptions of potential users. The UCBC helped bring my attention to crucial elements, such as potential early adopters and fears users/customers may have.
Persona
Based on the target audience the client was looking for and the user centered business canvas, I created user persona that represented an average customers on Blubox.
Research
Competitive Analysis
An important part of the process was looking at other websites to learn from their successes and for inspiration for the new layout. I focused on grocery delivery websites among competitors located in Dubai, but also looked into those that were located outside of the country.
Insights
Overall, the competition’s website experiences were good. However, some sites were a little messy and unorganized. They used too many colors without a uniform layout, making it confusing to navigate their website. As a result of my research, I planned on creating an organized layout that would be easy to navigate.
Userflow
After studying competitive sites, I planned with the managing director on how to make an optimal user flow. We used the mobile first method for this project to improve the user experience.
Solution
High-fidelity Wireframe
In addition to my research and user flow, I created a high-fidelity wireframe before starting the actual design. I sketched a wireframe on paper to get a few ideas before creating the high-fidelity wireframe that I shared with the client.
Visual Design
Style guide
The client was in the process of rebranding the product line. I set up colors and fonts based on graphic design that they worked on.
Visual Design
Detailed UI Screens
Based on my research and wireframe, I created a visual design that applied the new branding style. I went for a design that was clean and modern.
Prototype
After finalizing the visual design for all pages, I worked on a mobile size prototype in order to show the client how the website would work.
Result
After I completed the visual design process, I handed over all the design files to the design agency for implementation. My design is providing artistic direction to the illustrations and photoshoots they are working on currently. The client of this project was very happy about the outcome and they are expecting to relaunch soon.
© 2019 Hi Jin Nam