UI Designer

Study Together

Role
UI Designer
Timeline
August 2021 - October 2021

All in one creator’s toolset

to connect with their followers and turn direct messages into support.

Internship at BBG Corp
UX/UI Designer Role
4 Months  (03/21-07/21)

Overview

Client

Headquartered in New York, fully distributed and driven by a multi-cultural approach, Quext Technology developed a series of tools for Creators: from iOS / Android mobile applications to browsers extensions, API and keyboards.

My Role

User Experience Design
User Interface Design
User Research
Information Architecture
Rapid Prototyping
Usability Testing
Interaction Design
Logo Design
Design System

Team

1×UX designer(Me)
1×UI designer
1×Graphic Designer
2×Developer
4× Marketer
1×Project Manager

Tools Used

Figma
Balsamiq
Illustrator
trello

Our
Mission

Description

Quext Technology has been on a mission to live in a world where people can incentivize a reply from anyone and get access to 1-1 advice not just within their inner circle but at scale.

Creators are the new experts. We developed the Quext technology as a monetization tool to be embedded with key strategic players of the Creator Economy (social networks, freelancer platforms, newsletters, etc.)

Agile UX
Development

Everyweek is a sprint, meaning that we would push a new iteration of the application everyweek. This gives our design team a very limited time to deliver outputs to the engineering team. I am going to show you some highlights from our software developement journey.

Monday

Target Group
Insights

Not every creator is interested in monetizing their direct messages. Therefore, we need to narrow down to a group of creators who is intersted in monetizing their direct messages and target them through our product and promotion.

Are you interested in monetizing your direct messages?

Twitter Spaces

71%

Clubhouse

68%

Medium

62%

Freelancer.com

44%

Fiverr

37%

Youtube

15%

Instagram

11%

Tiktok

10%

After the business team got the quantitative data from surveys, I conducted user interviews to dig deeper into potential user’s motivation, painpoints, and goals. I was able to connect with several creators from different platforms including Instagram, Medium, Twitter Space, and Clubhouse. In the end, we decided to make 5 variants including Fiverr.

User Personas

Empathize with Users

Ronald Richards

Instagrammer who makes photography and graphic design presets
24 years
290,000+ followers

“Sometime when I gave them mentoring advices on their career, I wish I could be compensated”

Goals

  • Stay connected with her followers
  • Grow more follower
  • Help other instagrammer grow their followers
  • Have the option to get paid when giving valuable suggestions

Frustrations

  • Too many direct messages
  • Time consuming to reply the same messages over and over
  • Don’t want to leave messages on read

Ronald Richards

Freelance writer on Medium
Podcaster on Clubhouse
34 years
200,000+ readings

“I have always wanted to find a way to monetize my audiences”

Goals

  • Mentain a long-term reader base
  • Find new ways to monetize his readers and listeners
  • Reply to messages effeciately across platforms

Frustrations

  • There isn’t a direct messging system in clubhouse
  • People basically read his articles for free on medium

Tuesday

Mind Map

Easy Naviagtion to achieve Efficiency

Wireframing

Quick Prototyping

Wednesday

High-fidelity Wireframes

Visual Style Guide

Typography

Colors

Thursday

Usability Tests

Desciption

Before each session, I would write a usability test script to help me stay on track when conducting the test. During the sessions, I would make it clear that we are testing our prototype rather than them. After the test is finished, I would use infinity mapping to help me find some comman patterns in the test. In the following example, I am showing the changes I made from the initial state of the application before I arrived.

Inbox Screen

Issues

1: 90% Users don’t know this screen is their inbox when first landed in the app.

2: The engineering team puts the buttons there wishing that users would click them because they are obvious; however, during the test, users are all confused about what buttons are and had to read the description. This is because users don’t expect the buttons to be there.

Prepay Screen

Issues

This screen is one of the hardest screen to fix, that we had to go through multiple iterations to arrive this final result. As you can see, the end result looks nothign like the initial screen. I was also super confused when I first see this screen. After talking with the engineering team, I began to understand that the core function of this screen is to enable or disable prepay. There were so many things wrong in the initial design. They were trying to incorporate everything in the screen, but it just makes the screen too crowded and may cause cognitive overload. In many cases, when a user sees something like this, they would simply give up.

Friday

Meeting

Every friday, we meet on discord to show our progress. We will also discuss the next move of the app. One of the things that I reallyt like about this startup is that everyone’s voice matters.

Reflections

Results

  • We developed 6 different variants in order to pitch to different players in the content creation market, including clubhouse, twitter spaces, medium, fever, linktree, freelancer.
  • The app is rated 5 star in Appstore by 400+ people

If we can do it again...

When the internship was almost over, my project manager approached me and said “If I am going to do it again, it would just be you and me for the first 2 months. After we are done with design and testing, I am going to hire the engineering team.” I absolutely agreed with him. I think that would save everyone so much time, because we are not building stuff over and over again.

Overview

Goal

Connect students online to facilitate peer-to-peer learning, support, feedback, and motivation.

My Role

User Interface Design
Wireframing
Design System
Information Architecture

Tools Used

Figma
Balsamiq
Illustrator
Zeplin

Persona

Alex
A student enrolled in an online course who works part-time as a retail store manager

Goals

  • Alex juggles studying and working part-time. He loves his subject, but also wants to complete his course as quickly as possible and gain marketable skills.
  • To help with this goal, Alex wants to find things like relevant supporting materials, advice from fellow students on studying efficiently, and receive peer feedback.
  • Alex would like to find like-minded students to collaborate with.

Tasks

  • Alex wants to find supporting materials to help him master the more complex subjects in his course.
  • He wants to connect with like-minded students to share his work and collaborate.
  • He wants a tool to keep him motivated and support his development as a student and beyond.

Information Architecture

Wireframes

Icon System

Typography

Open Sans

Color System

I think simplicity is very important, so I choose a very minimal approch on the UI color pallete. As a result, the actual content can draw people’s attention instead of UI elements.

Components Library

Onboarding

Responsive Design

Final Mockups

Clickable Prototype

Overview

Problem Statement

People need a way to track how much money they have spent during a trip and which bill should be split because they can’t remember each transaction after the trip. We will know this to be true when this app helps them do the tracking and calculation, and they can simply review the bill and send the money after the trip.

My Role

Sole UX Designer
User Interviews
Iterative Design
User Personas
Information Architecture
Wireframing
User Interface Design
Design System
Usability Testing

Tools Used

Figma
Balsamiq

Highlights

"Spliting Evenly" is not the only option

In other apps available today, you can only split evenly with your friends. However, very often, people want to edit individual’s amount in the end. Nova Pay allows you to manually input the amount you want to request from a person, and the app will intelligently calculate the rest.

Choose from history payments to split

Instead of asking the user to remember how every bill needs to split and manually calculate the amount, I designed a system that users can simply choose from a list of payments and the app calculates the amount for them.

Simplified Checkout Flow

Simply scan the QR code on the desktop and complete your payment on your phone within seconds.

The Process

The stories behind our rational decisions - why I design what I design?

Week 1-2

Research & Define

Week 3-6

Prototype & Test

Week 7-9

Design & Refine

Research & Define

Understand Users, Define Pain Points, Develop Empathy

Method

Survey

User survey is a great way to gather quantitative data from potential users, which can help me define the pain points.I designed a short questionnaire with these goals in mind:
  • To better understand user behavior around the activity of online-banking and e-wallet.
  • To determine which tasks the user would like to complete using an e-wallet app.
  • Documenting user pain points with existing e-wallet apps on the market.
  • Collecting data on the context in which users would use an e-wallet app.

Interview

I conducted interviews with 3 people to understand their stories. Interviews give me a chance to create empathy by talking to the user and listening to their real stories.

Findings

Persona 1

“Remind others to pay me back feels awkward”

Tony, 21
Undergraduate student

Needs and Goals

  • He wants to split the bill of a meal.
  • He needs a way to easily split bills with his roommates.
  • He wants to make payments easily on his personal devices.

Frustrations

  • He always feels that there are too many steps to go throw when transferring money to his friends
  • He doesn’t like to remind others to pay him back.
  • He and his friends sometimes have different opinions on when to split the money.
  • It is difficult to track who paid and who didn’t.
  • It is hard to calculate the money each person has to pay.
  • Forget about every detail of payment.

Persona 2

“I am more used to the older methods, such as checks and deposits.”

Bethany, 40, Neurologist

Needs and Goals

  • She wants to make payments online.
  • She wants to check her balance.
  • She wants to see how much money she has spent and set a goal.

Frustrations

  • She wants to go shopping online but feels that there are to many steps to go through.
  • She sometimes feels confused when transferring money to her child’s piano teacher.

Prototype & test

Sketching, Usability Testing, Iterations

User Flows

I mapped out the user flow of three functions that I think are most important.

Low-fidelity Prototype

I mapped out the user flow of three functions that I think are most important.

Mid-fidelity Prototype

With this colorless prototype, I am able to start usability testing.

Usability Testing

The goal of this study is to assess the learnability of new users interacting with the application for the first time on mobile. We would like to observe and measure if users understand the app, its value, and how to complete basic initial functions.

Tasks

  • You are shopping on the internet. When you checkout, you selected Nova Pay, and a QR code is shown on your desktop. Please make the payment using Nova Pay mobile app.
  • You and your friends will go out for a trip. You have bought the food for the group. Using Nova Pay, split the bill with your friends(Amin, Britney, and Christine).
  • (Direct Task) Send Tony and Robert 100 dollar.
After conducting the test, I analyze the result with Affinity Mapping, in which I categorized my observations into four categories: Langues, split, send, and merchant checkout. Then I made a rainbow spreadsheet with these observations.

Implement Changes

I did 4 rounds of usability tests, in which I went through the same steps. Here I am showing several significant changes I made after analyzing the test results from different rounds of tests.

Design & Refine

Style Guide, High-fidelity clickable prototype

Other Flows

Onboarding

Request

Clickable Prototype

Overview

Product Overview

C3 Inventory Optimization is a comprehensive software application designed to help businesses effectively manage their inventory and optimize their supply chain operations. It provides tools and analytics to enhance demand forecasting, inventory replenishment, and overall inventory control, ultimately improving efficiency and reducing costs in the supply chain.

Challenge

The current version of the Inventory Optimization system has demonstrated its technological effectiveness and utility. However, our company is facing challenges when it comes to scaling the system to more facilities and brands. This issue arises primarily due to a subpar UX that hinders the seamless adoption and utilization of the technology.

My Role

Sole UX Designer
User Interviews
Iterative Design
User Personas
Information Architecture
Wireframing
User Interface Design
Design System
Usability Testing

AFTER

AI Collaboration

Introducing recommendation prioritization empowers analysts to efficiently manage their tasks by focusing on high-impact recommendations, improving workflow and inventory management decision-making.

AI Promptive

Information is presented precisely when it's needed. It provides a concise AI Recommendation summary, critical AI alerts, and a detailed AI recommendation page with evidence for informed decisions.

AI Transparency

The AI transparency improvement enhances user decision-making by providing full transparency. This includes AI Alerts that offer clear insights and a redesigned recommendation detail page for easier understanding and informed choices.

The Process

The stories behind our rational decisions - why I design what I design?

Research

Understand Current State, Define Pain Points, Empathise with User

Method

Understand Current State

What is analyst's current experience?

After being assigned to the project, I connected with cross-functional teams to understand the background.

Define Pain Points

1. Data Shows that end users are struggling to capitalize on AI Recommendations

Recommendation Acceptance Rate

10%

Time to Process Recommendations

180 Sec

2. Interviews show that there are 3 major painpoints

Painpoint 1: Hard to collaborate with AI

Analysts feel it is hard to process AI recommendations, because all recommendations are presented in a flat way without prioritization

Painpoint 2: Information presented not promotive

In this modal, an anlayst is about to make a decision on 1500 recommendations, but the modal doesn't provide enough information to help the analyst make the decision.

Painpoint 3: AI Evidence not transparent

It is hard to process the AI Evidence of recommendations becuase of confusing data visualization and excessive use data science language rather than user language.

Findings

Empathize with user

Ideate & Design

Sketching, Usability Testing, Iterations, Hi-Fi Design

How can we help Jason prioritize recommendations?

User Flows

I tried two options, one focuses on recommendation impact, the other one focuses on actionability. Through A/B testing, we found that users are in favor of the second option because they want the system to "tell me what to do".

Low-fidelity Prototype

Mid-fidelity Prototype

Usability Testing

How can we improve AI Collaboration?

I looked into various layout designs to enhance AI collaboration, starting with basic (lo-fi) versions and gradually advancing to more detailed (mid-fi and then high-fi) versions. This process was driven by feedback from both users and stakeholders.

How can we make AI Evidence more digestable?

I first did a usability testing on the original design and found the following problems.
Then, I aligned with PM on three PRINCIPLES to help me redesign the detail page

User language instead of DS Language

Use language that is familiar and easily understandable to the user, rather than technical data science jargon, to ensure better comprehension and user-friendliness

Only show relevant information

Display only information that is pertinent and valuable to the user's current context or task, avoiding the clutter of irrelevant data to enhance user experience and efficiency

Align with user’s mental model

Design interfaces and interactions in a way that aligns with the user’s intuitive understanding and expectations, making the system more user-friendly and easier to navigate

Final Design of Ai Evidence is structured in a way that presents information from conclusion to evidence, from simple to complex, from future actionable precation to past explanary evidence.

New Jouney Map

Outcomes

Through this redesign effort, we are able to increase our Recommendation Acceptance Rate by 50%, and decrease min to process each recommendationexpand from 3 facilities to 18 facilities.

Recommendation Acceptance Rate

60%

50%

Time to Process Recommendations

30 Sec

83%