Project Scope:
For the second project as a UX Design Student at General Assembly, we were assigned to redesign an ecommerce website for real business that would solve some of the users’ problems.
As I had some experiences of working with some of the mockup builder softwares, I started my design by sketch with pen and paper and then digitized it.
Tools:
Pens & Pencils, Sketchbook, InVision, OmniGraffle, Sketch app and Google Slides.
Duration:
10 days
Research Phase
In the first step of research process we need to identify our user.
In this project, we used one of the imaginary personas which was given to us by General Assembly as a tool to complete our project.
My persona for this project is John Goodson.
Feature 1
§ He is 38 and father of 12 years old girl.
§ As an art teacher, he is care about Design and brands.
§ He is a cost-conscious person.
§ He is looking for an activity that could do with his daughter.
Persona Analysis:
- Based on the persona’s demographics and backstory, behaviors and habits, which do you think might be a better design target?
Based on his age, he is more likely to buy and use bicycle for his daily short commute. And this is a great opportunity for him to join to his daughter for cycling. That is why I believe John is a better match for my project.
- While each persona might use your company’s product or service, each persona will have unique aspects to their decision-making process. What would their specific goals and needs?
1. He wants to receive the purchase item as soon as possible(Goal).
So, he needs the fast shipping option(Need)
2. He wants to have more information about the product, like more pictures(Goal)
So, he needs the have more picture and information(Need)
3. He wants to check and write the reviews of the product, also rate them(Goal)
So, he needs the have access to product’s rating and reviews(Need)
context scenario
Based on my Context Scenari
Problems:
· He has limitation on spending money for his daughter's birthday gift
· He has only 5 days to his daughter's birthday
· He need more information about products like more pictures and video
· He has only 5 days to his daughter's birthday
· He doesn't know what size of bicycle he should buy for his daughter
Solutions:
Redesign website and implement the features my primary user needs:
· Make the website easier to navigate by redesigning it.
· Add fast shipping option to website.
· Add more information and product details to website.
Design the sizing chart feature for those who doesn’t know right size to buy.
Competitive Analysis chart:
Flow Summary:
Scenario: John Goodson wants to buy a bicycle for his daughter for her birthday
Constraints: John can spend up to 300 dollars. He doesn’t have enough time (just one week). Model is a secondary consideration for him. He believes that a good company will provide sufficient information and details about their products. The product brand is also important for him to trust the product.
Tasks:
- Start: View bikes
- Is there any bike for 12 years old girl?
o Yes: Go view bikes for 10-15
o No: END
- Do you need any help with finding right size?
- Yes: Go to Size Chart
- No: Select the size
- Is your favorite brand available?
- Yes: Go to your favorite brand
- No: Go to Comparable Item
- Select your brand
- Is your favorite style available?
- Yes: Select the Style
- No: Go to Comparable Item
- Do you want the item be shipped to your address?
- Yes: Do you agree with extra shipping charges?
§ Yes: Select preferred shipping option
§ No: Is the item available at store?
o Yes: Go to store information
o No: Go to Comparable Item
- No: Is the item available at store?
§ Yes: Go to store information
§ No: Go to Comparable Item
- Select preferred shipping option
Task Completed
Flow Diagram:
The flow diagram is a great method that helps you to check every single step that our users would pass to finish their task a having an overall idea of website and business. This flow also helped a lot through design phase.
Design and Concept Phase
Usability Test (Paper prototype)
User Feedback:
· The main navigation icons are not in the right place.
· It is better to title the main navigation icons.
· The header and footer are confusing.
· Logo in footer is better to the same side of logo in header.
· Filter section in shopping page needs to be revised.
· In sizing tab in filter section, it would be great if you have some common sizes ready.
Wireframes
Results:
· Sizing chart is too detailed and it is not easy to find your size through it.
· “Sort By” filter on top of the products page should be removed, since you have all other filters on the left side of page.
In shipping option section, it is better to show the amount of time the chosen option would take the product be delivered.
Next step…
§ Redesign the home page’s contents and put more relevant information about bicycles and their details.
§ Design a new sizing tool that users would be able to find their size easier and more accurate.
§ Simplify filter section of product’s page.
§ Implement more details for shipping of products.
What I learned
§ How to redesign the website for a business and improve the online shopping experience.
§ I learned how to utilize persona as a design tool.
§ How to write context scenario for my persona.
§ I learned how to draw sitemap for my project.
§ How to research for business and create competitive analysis chart.
§ Learned new softwares, OmniGraffle and InVision.
§ I learned about information architecture and card sort activity.
§ How to write context scenario and attempt usability test based on context scenario.
Learned how to keep a balance between user’s need and business goals.