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
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.
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.
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.
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.
Lessons learned in general
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.
User testing is always necessary to assess the usability and userfriendliness.
Tell a story in your presentation and keep it short and concise, helps that your client can grasp everything better.