About the project

 

This project was to focus on an user centered design for an online shopping app, including a Desktop Version. lt should deliver several key functionalities such as, being able to add multiple items to shopping cart, advanced filtering options, review section, save items to wishlist and have a variety of payment options. 

The project has two parts one define brand guideline and this is also the starting point for developing an online store/e-commerce app.

Goals & Objectives

The Brand is aimed for users who struggle to find products they want in tradition stores and are proficient with technology. To helping such users to buy online products that meet their needs and offers an intuitive, clean navigation, and delievers a great user experience.

Tools

Sketch, InVision, Keynote, Adobe CC, Pen & Paper

Role & Duration

UI Designer
October 2020

Process

ProcessIcons_SunnyBike.jpg
02_SunnyBike_TheFaceOfSunnyBike.jpg
03_SunnyBike_Colors.jpg
04_SunnyBike_Typo.jpg
05_SunnyBike_Image.jpg

User Flow Diagram

The users should achieve as easy as it could be to buy products. Therfore I created an user flow diagram on the basis of the user stories to be sure that every step the user takes is taken into account.

UserFlowDiagram_SunnyBikejpg.jpg
 

Key User Flow

User scenario

You log in as a customer where you have previously saved an item (bicycle helmet) to your bag. Now you want to search for your bicycle, you are interested what other customers have said about the bike and how they rated it. So that you can better judge, whether it is right for you. After you have decided, add the item to your bag and purchase both items together.

This scenario was created for the user test in order to get feedback that helps to improve the screens and get a better understanding of the user experience.

KeyUserFlow_SunnyBike.jpg
 

Wireframes & Testing

I created the low and mid-fidelity wireframes based on the user flow, which provided all the information. The rough wireframes present all the ideas rapidly and save time. This one I tested with potential users to better understand, how I can improve my design. 

Wireframes_SunnyBike.jpg
PainPoints_SunnyBike.jpg

Prototype

Final Design - Sunny Bike App

Responsive Design & Mockups

For Responsive Design, the breakpoints are set at the exact device widths. Finally, the optimized features are added to create more efficient and intuitive flows.

ResponsiveDesignMockups_SunnyBike.jpg
iPhoneMockup_SunnyBike.jpg
 

Lessons learned in general

  1. What I liked most about was the fact that feedback helps to stay focused in every status. Feedback is a designer‘s best friend. Slips and mistakes happen, and feedback and critique act as a safety net that filters them out before designs are finalised.

  2. User testing is always necessary to assess the usability and userfriendliness.

  3. Tell a story in your presentation and keep it short and concise, helps that your client can grasp everything better.

 
ThankYou_SunnyBike.jpg
Next
Next

Fany to Cook. Food App.