Trusty
Trusty is a mobile platform that helps users make confident purchasing decisions by providing real and honest product reviews from their friends, not paid influencers. Users browse a personalized feed showcasing their friends' latest online and in-store purchases, complete with ratings, photos, and demo videos. Trusty makes it easy to compare options, get trusted recommendations, and instantly purchase products through direct links.
Challenge
How might a user decide which version of a product to purchase? What makes making a final decision easier?
Key objective
Trusty would allow users to get real and honest opinions on products from their friends, not influencers, who may be incentivized to promote a product. After reading reviews, the user may save the product for later purchase or do so instantly through the app. The user also has the opportunity to create public favorites lists similar to amazon storefronts.
Solution
Trusty will allow shoppers to view a feed of their friends' recent online and in store purchases accompanied by their thoughts, photos and ratings. This app serves as an extension to online retail sites and will allow manual tracking for in store purchases. The app is designed to provide a personalized experience on a easy to navigate platform.
Role
UX/UI designer
Duration
12 weeks
Tools
Adobe illustrator, Adobe Photoshop, Sketch and Figma
Competitive Audit
To figure out what the market is lacking and how this app can provide everyone with a desirable experience I conducted secondary research through a competitive audit. I compared 4 indirect and direct competitors before coming up with key takeaways.
Key takeaways
Overall there are existing platforms that promote honest user reviews, but all are limited to either a type of product, platform or demographic. Many of these platforms also do not promote the social aspect of sharing with friends.
User Research
Interviews
I conducted interviews with participants between ages 17 and 38, all participants use social media and shop online as well as in person. Participants answered questions like...
Do you prefer to shop online or in person?
What platform do you turn to when researching a product to purchase?
Do you trust the opinions of the people you follow on other social media platforms more than strangers?
Do you tend to ask friends or family when beginning your search?
When was the last time you bought something a friend recommended?
One question in particular gave great insight
Would you be more likely to take a review of a product from a stranger or someone familiar?If you said familiar, are there any difficulties in doing so from time to time?( for example, having to text several people, awaiting responses or not having a pool large enough to ask )
“Yes, having to text several people can be exhausting. I would only ask the person I’m shopping with for their opinion, because sending pictures to someone else and waiting for a reply in the fitting room is time consuming.”
“To be honest the familiar peoples review is worth more but I still check strangers review as well I check both but familiar review > stranger review”
“Their answer doesn’t match what I want”
Some interview findings
Trends
Pains
-
Most shoppers prefer platforms like reddit and the direct site when researching a product and its reviews.
-
Majority of participants ask someone they know for opinions before making a purchase.
-
They all value honest reviews.
Desires
-
To feel confident that are providing an honest recommendation.
-
A feature similar to amazon store front, currently only limited to influencers, that can be applied to regular users
-
Discover new products through trusted friends.
-
Having to individually reach out to several people and ask about a product
-
Influencers are prioritized by algorithms, constantly “loving” a product, the user without knowing if its incentivized
-
There is no incentive to write reviews as a “stranger” online but expressing thoughts to friend feels more natural
Needs
-
A hub full of honest reviews from familiar faces.
-
A view of products that people in their life love.
-
Easy way to share purchases and thoughts with friends.
Synthesis
Empathy Map
After summarizing the data I came up with the overall sentiments from participants and placed them into an empathy map. This data was collected from interviews, the questionnaire, casual observation and daily discussions.
User Persona
![Empathy map [Recovered].png](https://static.wixstatic.com/media/c5c068_5cb38cd1f213412aa4681c25d1d1787f~mv2.png/v1/fill/w_980,h_491,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Empathy%20map%20%5BRecovered%5D.png)
-2.png)
Goals
For the User
For the Business
-
Narrow products to those suggested by friends.
-
Ease the process of looking towards others for guidance when browsing products
-
Create a "store front" similar to amazon that contains their own favorite products.
-
Look at what everyone else is buying, hating and loving.
-
Incentivize more honest reviews in those that don't often express their satisfaction.
-
Join the apps like good reads, belli, and letterboxed, that let users keep track of their favorite products, and provide honest opinions for personal use and to share.
-
Recommend most loved products to users.
Feature Priorities
-
Page allowing users to “pin” and edit rotations/reviews of favorite products.
-
Home page displaying friends reviews in chronological order.
-
Discover page showing suggested reviews.
-
Reviews that link directly to product site, allowing for immediate purchase.
Tech Specs
-
Sign up/ log in feature
-
Ability to add friends
-
Upload photos and video from camera roll and allow in app camera access.
-
Accessible design
Information Architecture
User Journey: Write a review
![user flow org copy [Recovered] (1)-03.png](https://static.wixstatic.com/media/c5c068_30e960d01e224a319749061659e392b6~mv2.png/v1/crop/x_148,y_516,w_4016,h_2560/fill/w_957,h_610,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/user%20flow%20org%20copy%20%20%5BRecovered%5D%20(1)-03.png)
User Journey: Buy a Product
![user flow org copy [Recovered] (1)-04.png](https://static.wixstatic.com/media/c5c068_6174eb4b416341dca274e4045d7e5ab4~mv2.png/v1/crop/x_420,y_521,w_3619,h_1534/fill/w_957,h_406,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/user%20flow%20org%20copy%20%20%5BRecovered%5D%20(1)-04.png)
Site map
.png)
UX Design
Wireframes
Below you may view the progress from sketches to high-fi iterations of the four main pages.
Low-fi
Discover Page V.1
Home page V.1
Add Review Page V.1
Profile Page V.1
Mid-fi
Discover Page V.2
Home page V.2
Add Review Page V.2
Profile Page V.2
High fi
Discover Page V.3
Home page V.3
Add Review Page V.3
Profile Page V.3
Usability testing
After developing the first prototype I drafted a usability test to survey a group of 4 individuals over zoom. This group consisted of friends and interviwees from the initial survey. This method of data collection allowed me to rewatch, study and time the movements and paths of users. I tested 5 important task flows in particular
Main Tasks
Task 1
Save an item from homepage
Task 2
Add a friend from a user profile you searched up
Task 3
Go to the site for an item you saved for later and make a purchase
Task 4
Add a review to your profile
Task 5
Add an item to your favorites list
Goals
-
Detect any significant errors or gaps in task completion within the app.
-
Determine whether users face difficulties with navigation or interface design.
-
Analyze smooth task flows and pinpoint valuable UI elements.
-
Ensure that essential information is accessible and presented at appropriate moments.
Errors
Quotes
I took these quotes into consideration when creating the final high mockup with corrections.
"The overall look feels dated, maybe the font"
"Its cool that I can make a favorites list"
"what does manually add product mean"
"I like how big everything is"
"dont like the sharp edges?"
"I like how Its pretty self explanatory"
The left describes errors within the prototype and the right has the corrections to be made. The right hand text describes some of the errors encountered by participants while the left describes solutions.
Gaps between navigation bar icons and interacted with features in the layer below
Create clipped frames within main frames to avoid layers interacting where they should not be
Back button leading to different pathways
Create more pathways for multiple task flows to make a more realistic prototype
Some filter overlays directing to their own pages
Making sure all are interactions are overlays and can be exited by clicking outside
Click patterns
Click patterns that display where improvements or clarifications can be made. The right hand text describes some of the errors encountered by participants while the left describes solutions..
When adding a review was unsure why text prompt was on a different page
Add a page to confirm item first then a 2nd page that includes the product image and prompt
Clicking on text under a review on home page did not direct to full review
Make the full component clcikable not just the image
Clicking on user name to see profile but not being directed to user profile
Make the whole top section clickable (profile image and username)
Key takeaways
Overall all tasks were successfully completed. Minor prototype errors were found but easily fixed in the final iteration. Positive comments reinforced initial app decisions I made, while some questioning and confusion from participants I used to improve the final prototype. Noticing a few common click paths provided me with some valuable insights on how to improve the UI and from here I moved on to the branding portion of this project.
Branding
I stuck to a color palette with bright and contrasting colors to account for accessibility. The use of several colors also helps balance the visual weight of the content on each page as I have a mix of stronger and softer colors.
The logo is meant to hold strength as a stand alone piece on any possible marketing material with its unique hand-drawn imperfections, adding to the personal aspect that the app is supposed to bring users.
The pattern is just used on the onboarding pages to give users a sense of what the app values, which is injecting fun and personality back into the world of online shopping and curating a collection to share with friends.
Logo
Main Logo
Appstore Logo
![Branding aoo[Recovered] (1) copy.png](https://static.wixstatic.com/media/c5c068_0af824ff17ec482ebf2846251f3ed23d~mv2.png/v1/fill/w_350,h_342,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Branding%20aoo%5BRecovered%5D%20(1)%20copy.png)
Color Palette
Pattern Vectors
Text
Icons
Components
Buttons
Final Iterations
Discover Page V.4
Home page V.4
Add Review Page V.4
Profile Page V.4
![Branding thank you [Recovered] (1) copy.png](https://static.wixstatic.com/media/c5c068_8d9f6c1e615f4f35a798c4a78e51d52a~mv2.png/v1/crop/x_1426,y_0,w_14991,h_12403/fill/w_434,h_359,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Branding%20thank%20you%20%5BRecovered%5D%20(1)%20copy.png)
