Scene+1.jpg
 

Aeditor App Redesign

- content discoverability -

 

overview

 

Aedit is a platform that offers users information about beauty and cosmetic procedures, and builds connections between board-certified doctors and prospective patients.

In addition to a website, Aedit has mobile apps available on Apple’s App Store. Their current iOS app, “The Aeditor”, enables users to:

1) Take a photo, and use morphing technology to morph their face and explore ideal vision of them. The algorithm can recommend beauty treatments based on user’s choices;

2) Find a trustworthy provider to achieve their beauty goals, and book a consultation through the app.

Group.png

Old App UI

 
 

MY Challenges

When I joined in September, 2018, the product development team are facing some challenges regarding the current app:

  1. UX problems: The user test reveals some user experience problem regarding content discoverability in old app, which I will elaborate later;

  2. New features to be added: We decided to add our cosmetic procedure encyclopedia and our online publication platform “Aedition” into the app;

  3. More marketing-oriented UI: Our branding and visual identity has been evolving since new marketing team was formed, the old UI doesn’t match the visual direction anymore.

moodboard.png

Moodboard with New Brand Identity

 
 

my Process

 
aedit_process.png
 
 

Usability test

 

Our beta testing involved 16 current users, ages 21 to 54 years old, all of them are women. Before the beta testing, in order to learn more about our users, we gathered their basic information, and asked them some primer questions about their previous experience with cosmetic procedures and service booking apps.

demographic.png

User Demographics

 

After answering the questions, the users were asked to perform the following tasks on an iPhone X:

  1. Create an account;

  2. Take a photo following the guidance;

  3. Use the morphing feature;

  4. Find a provider based on their specific needs;

  5. Book a consultation with the provider they found.

After they finished the tasks, we asked some follow-up questions, like if they would use the app again, and why.

User Interview Data Collection

 
 

Result Synthesis

 

Our mission is to figure out what are users’ pain points, what confusion and frustration they have during this process, and which part we should prioritize to improve.

I documented user’s reaction and feedback during the testing process. I was surprised to see how repetitive some feedbacks were, and how similar the issues were users running into. I extracted the most frequently used keywords in each phase from users' feedback, and mapped them in a 2x2 matrix to prioritize the problems based on user needs and business goals.

 
 
 
 

The items that are crossed out run counter to our business goal, or technically unachievable. For example, user-generated content is not a part of our brand strategy, so we won’t have ratings and peer reviews.

The red ones are the most important to both users and business, and these are what I’ll try to solve in this UX and user flow redesign.

 
 

Define problems

 

Pain Point 1: Users couldn’t get access to the functions they want due to  the linear user flow (High drop off rate).

The old user flow was linear, and users are forced to go through all the main functions we have. It won’t work with more functions added.

“Can I skip the morphing function? I just want to find a provider.” ——Anna, 44

Pain Point 2: User have to exit the app and google the terminology very often (High exit rate).

There are lots of terms regarding the procedure names that users may not understand, but there is no explanation in the app. Although we have a huge database containing all the information user may need, users can not get benefits from it. They usually choose to exit the app and google them.

“What does this word mean? I need to google it.” ——Sarah, 25

Pain Point 3: User couldn’t discover useful content (Low retention rate).

The app was not “sticky”. Users are not likely to return after their first use, according to the follow-up questions in user testings. Even though we have rich content and lots of useful information, users could not find it.

“What can I do next?” ——Dana, 37

 
 

PROPOSAL

 

All three of these pain points, in different ways, relate to content discoverability. It could potentially be solved by:

  1. Reorganize app structure

    I used analogical reasoning methodology when I was working on this proposal. I redefined each feature by comparing it to something that is familiar, and built the new structure based on how the other attributes work in the analogical situation.

  2. Build connections between functional pages

    To dive deeper in user’s mental model, I create a series of user journey exploration with users’ background information we gathered in user interviews, including persona and scenarios; then I created conceptual model based on users’ mental modal, by drafting user flow and wireframes for each scenario..

 
 
 

1. Reorganize app structure

- analogical REASONING-


In order to improve content discoverability, I thought about reorganize the structure of the app. I used analogical reasoning to imagine how users may use our four main features, and what role each of them plays.

We have 4 main features:

 
Artboard.png
  • A self-test or quiz

  • Helps users understand their own needs better;

noun_agenda_2078059 copy.png
  • A reference book, a dictionary or encyclopedia

  • Should be handy, and always accessible whenever users have something they don’t understand.

Artboard Copy 11.png
  • An online magazine

  • May potentially lead them to the answer, or stimulate them to make the decision.

Artboard Copy 12.png
  • The final answer we’d love to offer, considering our business goal;

 

After figuring out what role they play, I started to draw links between features as I imagine how and when our users need each function. Here are three of the variations I proposed:

 
 

After talking with our developers and marketing team, we finally picked PROPOSAL 3, considering our technology limitations, information architecture in backend database, our marketing strategy and business goals.

And this is how it changed compared with previous version:

 
 
 
 
 

2. Build connections between pages

- From Mental Model to Conceptual Model-

I created 2 persona based on the user samples in our user testing, thought about their needs and goals, and how they might interact with our new features.

 
 
 
 

I also created 3 scenarios based on the persona, and imagined what pain points and frustrations they might have, and how the app could help them solve the problems.. Then based on each scenario, I built up a conceptual model, and created user flow and wireframe as potential solution.

*You can click the content below to switch between different journeys.

 
 
 

Hi-Fi Mockups

hi-fi Comparison.png
 

Typography & Iconography

 

UI SHOWCASE

 

Next Step

The validation of this design proposal requires another round of usability test. The designs I created may not be the only way to solve the content discoverability problems. I will created more iterations based on the new testing feedbacks.