UI/UX Design & Dev.

Overview

The Bae-O-Meter™ is a fortune-telling web-app that predicts the strength of a relationship between any two entities. After entering some basic information about each party, the Bae-O-Meter™ will factor each piece of data into its algorithm, and determine how long their hypothetical relationship would last, and how it will end through an AI-generated love story.

Design Process

Interview Insights

Competitive Analysis

Persona

To better empathize with my targeted users, I created a persona Cassie who is a college student interested in making connects with her partner in new and entertaining ways.

User Stories

From Persona Cassie’s perspective, I wrote the following user stories to pinpoint the user needs, and with the team’s effort, we came up with realistic solutions for each need.

User Flow

I use a user flow diagram to map out the process of a typical user using Beaometer to achieve their goal. It grants me an overview of the app’s functionality and makes sure that users can go through the entire process without structural blockers.

Information Architecture

We used Information Architecture to map out how different pages and pieces of information are connected and organized which establishes a clear hierarchical structure that benefits the designing and the development process.

Wireframe (Hand-Drawn and Digital)

I used both hand-drawn and digital wireframes to map out the visual structure of our app in a low-commitment way. And visualize the UX solutions that we came up with.

I. Hand-Drawn

II. Digital

III. Types of Interaction

Typing

Users will be able to type in their birthday and name. Starting with simple interactions invite users to continue their user flow.

Drawing

User can draw on this page. Drawing is a rather uncommon interaction for apps, so such an interaction would make our app to be more memorable.

Selecting

User can also select one card from the three. Selecting without knowing the content enhances the mysterious theme for our fortune-telling app.

IV. Inclusive Design

Inclusive design: gender neutral word choice, does not assume user’s and their partner’s gender.

V. Responsive Design

Make sure users on both mobile and desktop can have a similar experience.

High-Fidelity Prototype

Based on the structural foundation laid out by my wireframe, I designed clickable high-fidelity prototypes for both Mobile and Desktop versions of the responsive web app.

I. High-Fidelity Design

II. Responsive Design (High-Fidelity)

Style Guide

Employed to keep the deisgn language consistent through out our app

Baeometer (Thermometer)

The Baeometer, a.k.a the thermometer graphic, is present throughout the Baeometer experience.
It mainly serves two purposes: branding and functionality.

I. Branding

The thermometer, traditionally used to measure temperature, became our central graphic motif to reflect the concept of measuring the 'heat' or intensity of relationships. By using this motif throughout our app's design, I aimed to create a strong and consistent visual association between the app's brand and its function. This connection would enable users to quickly grasp the essence and the theme of our app while reinforcing its playfulness.

II. Functionality

a) Progress

It is a progress bar indicating how many steps a user needs to take to get to the result page

b) Result Indicator

On the resulting page, the Baeometer(thermometer) is also a visual indicator of the strength of a relationship based on the calculated result.

Web Application

I. Inclusive Design

a) Keyboard Support

We anticipate keyboard users.
With “enter”, “tab” and “shift” keys, a user can complete their user journey.

Test Button

Auto-focus on the test button. Hit Enter to start testing.

Next Button

After drawing on the canvas, htting Enter allows you to proceed.

Card Selection

Hit Tab to select a card, and hit Enter to comfirm your selection.

b) Touch Screen

We anticipate touchscreen users.
We made sure that each UI element is interactive on a touch screen.

II. Responsive Design Edge Cases

We anticipate edge case screen sizes/orientations.
I coded the app so that it fully supports both desktop screens in portrait mode and mobile screens in landscape mode.

Tests and Iterations

After developing our app, I conducted multiple usability tests. From the participants of the tests, I gathered many valuable feedbacks that helped us improve our app's user experience.

I. Feedback To Solutions

Feedback:
"There are too many things to interact with on the front page, it is quite confusing which one to interact with and in what order."

Solution:
By following the principles of progressive disclosure, I decided to have two additional pages before the front page to break down the overwhelming unclear user flow into a streamlined 3 steps process.

---

Feedback:
"Why the result is so low? Why it only says 3 weeks for me and my boyfriend?"

Solution:
Due to the low multiplier of our original algorithm, the resulting score is relatively low. To make sure users are satisfied with the results, we made changes to the underlying algorithm, and boost the test results up.

---

Feedback:
"I wanted to redraw the picture, but hitting the reload button reloads the entire page."

Solution:
Add a delete button on the canvas-drawing page.

II. Observation To Solutions

Observation:
Testers often hit the next button before filling out the blanks, which triggers an error message.

Solution:
Use grayed-out buttons to signify the button is inactive at this moment. And hitting enter key will automatically focus on the field that needs to be completed.

User Testing Results

Try It Out