Portfolio - UX Case Study
Things Fall Art App

Case Study - Things Fall Art App

About:

Things Fall Art is a mobile app for users to attend auctions and bid on fine artworks. This platform makes remote artwork purchases possible and immersive. Our users are artwork buyers.

​

My Contribution: 

UX writing/Style guide/User journey map/Framework 

​

Tool(s):

Figma

​

屏幕快照 2022-02-18 下午9.07.17.png

Overview

Solution

I went through the user journey map, edited UI text, added microcopies, and worked with designers to delete unnecessary steps in the journey. We made each page more functional and aesthetic.

UI Edits - Onboarding

BEFORE:

  • What if the user forgot his/her username? 

  • Give an option of logging in with email

  • "My Art Account" is confusing. The app's name is not "Art"

  • Redundant, "Creat Account" is enough

屏幕快照 2022-02-11 下午7.14.32.png

Do not change a brand logo

to fit the color theme

屏幕快照 2022-02-11 下午6.48.28.png

  • Grammar

  • Proxy

"SIGN UP" will be more readable on the button, especially when we make it all capitals

It's hard to tell if this line is connected to a link. 

AFTER:

屏幕快照 2022-05-24 上午10.26.30.png
屏幕快照 2022-02-18 下午9.08.15.png

User Interface -  Account Setup

BEFORE:

"you want to use" is redundant

  • Need to reformat

  • What if users only have one address line?

  • What if the user enters an abbreviated country name and the system couldn't recognize it?

屏幕快照 2022-02-11 下午10.03.10.png

  • Adjust text transparency

  • Use a lighter shade for microcopies

  • grammar

  • Use full name. 

  • When bidding, fullname will be shown on the bidder's list

"Payment" is enough

Align "Switch account" with "Log Out" button, since they both lead to logging out the present account.

屏幕快照 2022-02-11 下午10.03.32.png
屏幕快照 2022-02-11 下午10.03.52.png

Align "Cancel"

with the button

Make sure all the button texts are sentence case

"Done" is vague. Say "Confirm" instead.

"Choose" doesn't echo with button text

For accessibility's sake, make sure every page offers vocal searching choice

AFTER:

屏幕快照 2022-05-24 上午10.31.04.png
屏幕快照 2022-02-18 下午9.09.37.png
屏幕快照 2022-05-24 上午10.28.51.png

User Interface -  Live Auctions

BEFORE:

屏幕快照 2022-02-12 上午11.32.15.png

  • Let the user know what's this timer for?

  • To create a sense of urgency, count the second too

​

Use full name here to avoid confusion from bidders who share the same first names.

屏幕快照 2022-02-12 上午11.33.10.png
屏幕快照 2022-02-12 上午11.56.16.png

  • What will happen if I click this button? Will my name and price show up on the list above?Can I withdraw my bidding?

  • Ensure users what will happen next. Add microcopy here.

​

AFTER:

屏幕快照 2022-02-18 下午9.10.39.png
屏幕快照 2022-02-18 下午9.11.12.png
屏幕快照 2022-02-18 下午9.11.43.png

User Journey - Screens Merging

BEFORE:

1. It was unnecessary to split this after-auction journey into three pages. Users had to continuously hit the button only to skip a page. 

2. The dialog title on the third page, "There is a new bidding," didn't sound inviting. We needed to encourage users to check out another auction. After all, our app made money on every deal.

3. Users didn't know what happened next after winning an auction. 

4. According to the user research and style guides, say "auction." Don't say "bidding."

屏幕快照 2022-02-12 上午11.30.58.png

Design suggestion:

Black text might be

easier to read.

One exclaimation

mark on one page

屏幕快照 2022-02-12 上午11.19.28.png
屏幕快照 2022-02-12 上午11.19.59.png

AFTER:

屏幕快照 2022-02-18 下午9.12.14.png

Takeaways

  • Simplify user journey. Cut out redundant steps or pages

  • Pay attention to the user language. Be consistent with styles and voice.

  • Function first, aesthetics comes after. 

  • Be immediate, be direct and concise. 

  • Align similar actions together. For example, align "Switch accounts" with "Log out."

  • When designing/writing entry fields, make sure that users know what and how to enter info.