BENI
A Chrome extension that help users buy secondhand without changing how they shop
Role
UX Designer, Visual Designer​
-
Ideate design solutions
-
Explore and develop user flows
-
Create wireframes, high-fidelity prototypes
-
Conduct usability tests
​
Methods Used
User Interview
Competitive Analysis
User Journey/ User Personas
Studio Design
Wireframe + Prototyping
Usability Test
Duration
December 2022 - January 2023
Team
3 Designers, 3 Developers
Tools
Figma, Miro, Maze
1. Overview
Context
Beni is a browser extension that suggests alternative secondhand clothes from other resale deals on the internet to users as they are shopping. Beni is looking for design solutions that better support this transition and assist their users while they are searching for the perfect piece.
Stakeholder
We met and interviewed two Co-Founder, Sarah and Celine to understand what are the vision and goal for this project. During 3 weeks, my team and I stayed in touch with our stakeholders to update our progress and actively seek out their feedback. We asked and checked in every week with software engineer Celine for technical feedback to identify any limitations or restrictions.
Problem Statement
Users open the extension only when they remember to, and easily give up after spending a lot of effort scrolling through all the results
How might we improve the transition and make it easier for users to find pieces that match their style?
2. Rerearch
User Interview / Usability Walkthrough
With limited time and resources, we want to prioritize understanding what user are experiencing when using the current extension. We conducted and reviewed
-
16 Interviews
-
7 Usability walkthroughs
Key Insight 1#
Low visibility and cognition burden during the process
​
Beni current way of notify users about available alternatives is not efficient because users often not paying attention to the icon color change when it is lighten up due to sizing, they only open Beni when remember.
​
Users are not informed appropriately about what is going on to take action
Disabled Icon
Enable Icon
Key Insight 2#
Limited option to sorting and vetting on the extension
​
The extension is designed to host hundred of secondhand alternative items, including the one that matched and likely matched. Users should be able to explore, compare and sort quickly to complete their tasks.
However, the current extension shows that user could only scroll vertically with limited items visible at a time and only be able to filter by "Size"
User does not have the flexibility and need to spend longer time to explore the provided alternatives on the extension
Current filter on extension
Competitive Analysis
Be inspired and learn from others
We want to be inspired and learn from others so my teammate and I ventured out and discovered 9 other similar extensions and conducted comparative analysis and their features.
We found 5 of those extensions (Amazon Assistant, Karma, Miggle+, and Sook) also aggregated products within the extension and had features that aligned with our initial interview insights such as:
​
-
Auto popup/ reminder
-
Filters/sort by
-
Save items
-
Multiple products displayed
​
3. Define
User Persona
Based on research insights, I created a user persona and journey map to see overview of user journey when using Beni step by step. The journey map allowed us to define the direction and act as a source of inspiration for any design opportunities later on.
User Flow/ User Journey
Overview of users task
4. Ideation
Opportunities
We further synthesized and broke down the design solutions into details to see what could be prioritized based on user needs and client's goal:
-
Filter by: size, color, brand, condition
-
Larger product display to view and compare items
-
Sort by price: low to high and high to low
-
Popup reminder
-
Label "Best Match"
-
A user account
-
Saved items to view later
Sketches
My teammates and I joined studio design and did multiple rounds to explore various ideas & sketches. While brainstorming, we spent time working separately to avoid groupthink and reconvening to discuss together to make sure everyone's ideas were being heard.
​
After sketching some possible solutions, my team and I moved on to build greyscale wireframes, and begin conducting the first round of usability tests. We also met with the client and showed them our mockups for feedback and technical questions and our client were agreed with the direction we were moving in
Sketches
.png)
Low-fi wireframes
Visual Guideline
Colors
Fonts
Buttons
#FF6E0D
#FAF7FA
#DFDFDF
5. Deliverables
Feature 1
Diversify & optimize filter system
Based on feedback from our client and usability test, I continued to create low-fidelity wireframes and conducted the 2nd round of usability tests. My filter layout design was inspired by mobile application since the extension size are similar. I then created high - fidelity wireframes and added more whitespace, removed boxes, and navbar for fewer distractions.
Expand the extension to easily scan and save the time of scrolling
Filter quickly with all the options available at one time on expanded version
Feature 2
Save option & redesign card item
By clicking save, users will be able to save and revisit multiple items to review and purchase when they are ready. This design address one of the second persona's frustration because users said they often needed more time before making any purchase. It would save time and effort of users to find or look for the one when reopen Beni.
Feature 3
A friendly popup reminder to help raise the awarness
I independently built out the UI of the initial popup, conducted usability tests, and revamped the visual design. I wanted to maintain Beni's core values of a friendly, minimal, and elegant but also intuitive to use.
A popup reminder that using Beni color scheme
White background with light pink create a soft and relaxing mood to reduce anxiety of being approached but also present transparency, genuine
The popup appears to remind users that Beni is available on this retailer website. A bigger call for action button would give user access easily
Redesign Card Item
​
Bigger photo makes it easier to scan and optimize the space
(L): current card item, (R): new redesign card item
Hidden information and block of text made it difficult for users to scan through information quickly
Organized important information on the right and added a "best match" indication for easier scanning
Photos are important when online shopping. Users felt the picture was small, making it hard to scan
Conclusion
Takeaways
Beni was my first client project as a UX contractor, and I gained so many valuable experiences. I was able to practice critical thinking, pay attention to details, and prioritize human-centered design thinking while incorporating all the useful features and testing them with actual users.
In the end, we got to present the project to our stakeholders and were able to deliver a design that gives the end-user a better experience and is more intuitive. The most exciting and rewarding experience for me is knowing that the Beni team will use our proposed solutions to implement into the Beta Version that is launching this 2022.
How do we improve & develop?
I wish to conduct more research and user testing on the account feature including the graphics and the labels.
The extension could be developed furthermore by saving users' preferences in the Account which would save users more time if they become regularly secondhand shoppers and use Beni frequently.
What I Learned
Team Collaboration
I learned to use different methods such as shared documentation and work schedule to organize the team's progress and improve workload efficiency.
Communication
I gained many soft skills when working with my teammates and it was an inspiring experience for me. I cultivated and improved my communication skill to confidently discuss with my team in a timely manner and be able to address disagreement with mutual compromises.
Courage
I learned to have the courage to give bold ideas that might be challenging but potentially worth trying.