GemiBuy

Background: This project idea was formed in a course, redesigned by me, and developed at a hackathon.

Want to see the 2022 version design?

Research: With 5 interviews and 4 competitor analysis, I defined target users and found 3 major pain points.

Target users: those who have little knowledge/time for research

First-time buyers

Tech novice

Busy people

3 major pain points:

Complex research

Learning parameters

Distinguishing Ads

Want to see the research process?

We interviewed 5 people with past experience of researching before buying electronics, with the research goal of 1). Define target user 2). Find pain points & insights 3). Explore the existence and/or the intensity of needs. Here is a demographic diagram of the interviewees.

Want to see the competitor analysis?

After researching 2 direct competitors and 2 parallel competitors, we found that most mainstream websites use professional terms and parameters and do not mark sponsored products clearly. For those websites that focus on recommendation service, they can’t customize needs or don’t have much information and product options.

Solution overview: 3 main features to solve these problems.

Need gathering

Enable users to communicate needs in their own words by:

Text

Voice

Image

Why recommendation

Users can learn why the recommended product meets their needs without studying the parameters in detail

Generate recommendation

Recommendation reasons

Product comparison

This speeds up decision-making by comparing the differences between best-fit products

Select

Compare

Want to see the brainstorm process of these solutions?

Problem

Solutions

How might we simplify pre-purchase research?

1. Gather user comments on the product from different channels
2. Allow users to speak out their needs in their language and media

How might we help users to select products without learning parameters / eliminate the effort of learning?

3. List whether the product ✅ or ❎ fulfills users' needs instead of the parameters
4. Use conversational AI to understand user needs and match them with product parameters

How might we help users to avoid ADs during research?

4. Use a machine learning algorithm to distinguish obvious ads from true reviews and remove them from the database

How might we help to select products that suit user needs and is cost-effective?

5. Comparison between products

I explored how to utilize AI to design for AI, and found that most current AI can't produce industry-standard design, but are good for getting inspiration & drafting design works

How do I utilize UX design principles for AI?

Transparency

Explain the reasoning behind AI’s decisions to build trust

Communicate potential wait times and processing stages

Delightful Magic

Elements of delight that convey the wonder of AI technology

Playful animations & content for positive emotional connections

Accessibility

Accessibility mode with bigger fonts and higher contrast

Multiple input methods and alternative output formats

Built and iterated a design system based on the theme "tech, magician, space" to describe the magical and transparent experience of AI.

Mockups & UI & Animation

Tested and iterated the prototype for 6 rounds to gradually improve the design.

I tackled design challenges of the need-gathering process by brainstorming interaction patterns and evaluating alternatives

Turned my decision to prototypes:

Qestionnaire

Slidebar

Swipe cards

Need basket

Design decision turned to prototypes:

Iteration example: why recommend

🚩 Feedback:

During the ideation stage, users said: “I need to know why a product is recommended to me before I buy it.”

✍🏻 Iteration 1:

- Add “why recommend” to the product detail page
- Modal triggered by tapping the blue bubble
- Scroll cards from left to right to view different types of features

🚩 Feedback:

During the test of low-fi prototype:
1. Users wish to see why a product is recommended at once when a recommendation is generated, instead of tapping into each product
2. They also think scrolling is too much effort

✍🏻 Iteration 2:

- Put “why recommendation” modal to “recommendation list” page
- Modal triggered by tapping the percentage bubble
- No scrolling needed

🚩 Feedback:

During the testing of hi-fi prototype:
1. Users have no awareness of clicking the “why recommendation” bubble without guidance
2. The picture and bubble takes too much space so it’s hard to put more text

✍🏻 Iteration 3:

- Provide onboarding tutorial to remind users to click on that
- Redesign the appearance of the bubble to make information condensed, obvious and clear to users
- Add top 3 recommendation ranking and color to emphasize important information

🚩 Feedback:

During the testing of final prototype:
1. During observation, I found that users pay more attention to "why recommendation" than the prduct information

✍🏻 Iteration 4:

- Increased the information priority of "why recommend" part and turned it into the most obvious content that a user sees when the recommendation is generated

More about the iteration process

⏳ Iteration process:

Click the images to see more detailed iteration processes

Sketches

Paper Prototype

Low-fi

Mid-fi

Hi-fi

Final

Final design

Project impact: The project had high usability, influenced a startup product, and ranked 7th on Google AI Hack.

Google AI Hack

The idea was developed at MHack x Google AI Hack. We utilized the newest Gemini 1.5 API to realize the functions. The project ranked 7th out of 65 groups.

Our Github:

FrontendBackend

Usability

In usability tests, the app received 86 System Usability Score, indicating "Excellent" usability. It also satisfied users' needs, getting 83% user satisfaction.

Startup influence

Our design critique and suggestions also influenced the product iteration of PerfectRec, a startup that is doing a similar product like GemiBuy.

Want to see more details?

Usability test process

Goal: Evaluate overall design performance, discover future iteration direction
Method: Survey
Metrics: System Usability Scale(SUS), Customer Satisfaction Score (CSAT)
Participant: 12 users, with 2 primary users and 10 secondary users

Survey structure:

Result analysis

Average score: 85.77
In the range of “Excellent”(>85.5), indicating excellent overall system usability.
Highest: Easy to use (95)
Indicating that the system is easy to operate for users.
Lowest: Learn quickly (77.7)
Indicating that the system still needs some learning effort.

Satisfaction:  83.4%
Using this app is satisfying for most of the users.
Reason for dissatisfaction:
‍People with less knowledge of electronics need more learning time. This indicates that our next iteration need to focus on accessibility and design for tech novices.

About PerfectRec

perfectrec is a startup based in Seattle that is developing a similar product to GemiBuy.

Connected through the University of Michigan, we shared our research and design with them and provided feedback to their beta version. Now their final website version has been released with many iterations based on our advice.