This project was part of the "PSYC 6755: Foundations in Human-Computer Interaction" Class at Georgia Tech. The goal was to research problems people face in buying or selling secondhand bikes, and to design a mobile application that solves some of these issues.
Tools I Used: Sketch (to create High Fidelity Designs), Balsamiq (to create Wire-frames), Invision & FramerJS (For Prototyping both wireframes and High fidelity designs), Principle (to animate some of the design interactions)
"I need to be able to buy a second hand bike quickly and easily"
Why does this problem occur?
Lack of Information about the bike to make in informed decision soon
This happens because:
How did we solve this issue?
How do we know if our solution works?
What could be the impact of this design?
High Fidelity Design
Some of the important screens from the final design:
Home page shows 5 of the key details about the bike that the user would need to make a quick purchase - image of the bike, product name, price, distance and quality (denoted by our expert rating here)
Close up shots
Close up shots of the bike along with video walkthroughs that the expert took. This makes it easier for the buyer to get a sense of the condition of the bike.
What is working and what isn’t
These are labels that helps the user easily what is wrong and good about the bike. Clicking on the ‘what is not working’ label pops open an image of the damaged part of the bike
Home Users can use the size calculator to see if the bike is a fit. This detail need only be input once. Upon input, the a figure of the input size is shown to scale next to the bike.
To make the buying process faster, we removed the concept of adding something to a shopping cart. We found that at any time, our users won't be buying more than 1 bike.
The seller has to enter minimal information while setting up the bike for sale. This would encourage more people to sell. The rest of the details are added to the listing by the expert.
Large Ignored market
Despite being a large opportunity globally, secondhand market hasn’t seen great products that solve key issues. Commonly used products like Craigslist, Facebook Marketplace and other niche ones give subpar user experience
A look at Existing Products
Comparing experiences for shoppers on Amazon and Facebook Marketplace shows how information deficit FB Marketplace or craigslist is in comparison to that Amazon gives for a new bike buyer.
01. Unstructured Interviews
Get qualitative data about current User Experience. This was useful since we had little background knowledge in the area
Started noticing patterns - similarities in purchasing process, what people looked for, expectations, etcDifferent people shopped different products differentlyDecided to focus on Georgia Tech students, who’re looking for secondhand bikes
Gather quantitative data to see if patterns were consistentIdentify major pain points
Led to several primary and secondary insights (scroll through to see insights)
03. Contextual Inquiry
Gather insights into purchasing process, thoughts and emotions - Non-verbal cues that go into decision-making
Led to several secondary insights in user needs - why users personally examine bikes, what observations do users make, pricing constraints, etc
Lack of Information
Bike buyers don’t have enough information to make an informed purchase decision quickly
Bike Buyers don’t feel comfortable visiting the Seller’s house to collect the bike due to fear of personal safety
Information sharing constraints, negotiations, examinations, etc. increase makes buying or selling a time taking process
Need to know what is working, but importantly what is not ~expect damages
Want to see if the bike fits the user’s physique
Reviews, ratings of bike helps users know if to trust the built quality
Share the listing with parents to buy, cos students no money
Accurate location important - can’t walk long distance to get a bike ~ unless costly
More expensive bikes bought through physical examination - risk okay on cheap ones
Some of the key insights were:
1. cannot get access to enough potential buyers
2. think it time-consuming to list product information online.
1. have trouble making a decision when the information is insufficient.
2. do not trust a bike's quality simply by looking at pictures online
3. have trouble in picking the bike up or find delivery expensive
4. finding one that fit's their budget to be hard
We shortlisted key pain points from our research and proceeded to ideate solutions for those. Each brainstorming session was 15-minute long. At the end of an idea brainstorming, we discussed our ideas, and then conducted another brainstorming session. At the end of 2 sessions, we came up with 20-25 different design concepts.
We then developed storyboards to help explain the concepts we ideated. Our goal from the storyboard was to try to enact if these concepts could indeed delivery a better experience at current pain points.
This was an interactive prototype that I created on Framer. It include some key interaction and motion designs too.
01. Task Analysis and Task Rating
Test Time taken and Understandability
Complete a transaction through expert model, complete a transaction through instant buy model
Add a product to wishlist
02. Post Task System Rating, using System Usability Scale
Users asked 10 questions and to grade each on a scale of 1-5
SUS score of 78.4
03. Post Task Feedback
Users asked 3 questions - What they liked most, what they thought was missing, and final comments or overall impressions of the system
Some of the participants did not know the difference between the star rating for the expert and the product rating. Many people thought the star and product rating were the same, even though the star rating was shown under the expert.
We rectified this by having a clear demarcation for expert reviews. The reviewer information will be shown in a card format. In each card, next to the star rating, the number of buyers will be shown. Details about the expert will also shown in a card format so that users understand that the star rating is for the expert. We will also add some reviews for the expert for users to get better context.
Another feedback we received was that differentiating between the bike size and title was difficult. “Want the titles of the bike separated more obviously, e.g. 18'' L and Mountain bike with different Font colors or font of size. Since both are placed close to each other “.
We will change this to have the bike size shown part of the product specs below. We will also add more content to the product spec to include things like how old the bike is, since several of our user tests wanted to know.
We had a feature to help users compare their height with that of the bike. However, in our current design, this only shows one specific size for person, of same body size. One of our feedback was to change this to show how different body shapes would work for this bike - weight, size, etc.
We will increase the scope of our height calculator to have an option called “Advanced”. Where the user can input more details like weight, size, etc. Having all of those fields on the main screen would make it look cluttered. Hence, the "Advanced" can be used to enter multiple constraints to the height checker
For several users, the status message was hard to understand and was complicated. It seemed like they had to go through several steps before being able to sell the bike
We will change this to show fewer steps and a more easier and clearer process for users to follow.
This was my first cross-cultural project team, and the experience has been really awesome! Was lucky to have a bunch of really smart and talented designers on my team. The project also helped me articulate and present my ideas better - to talk slowly and clearly. Along the way, I learnt few Chinese words too! :)