Aeditor App Redesign
- content discoverability -
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.
Old App UI
When I joined in September, 2018, the product development team are facing some challenges regarding the current app:
UX problems: The user test reveals some user experience problem regarding content discoverability in old app, which I will elaborate later;
New features to be added: We decided to add our cosmetic procedure encyclopedia and our online publication platform “Aedition” into the app;
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 with New Brand Identity
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.
After answering the questions, the users were asked to perform the following tasks on an iPhone X:
Create an account;
Take a photo following the guidance;
Use the morphing feature;
Find a provider based on their specific needs;
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
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.
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
All three of these pain points, in different ways, relate to content discoverability. It could potentially be solved by:
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.
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:
A self-test or quiz
Helps users understand their own needs better;
A reference book, a dictionary or encyclopedia
Should be handy, and always accessible whenever users have something they don’t understand.
An online magazine
May potentially lead them to the answer, or stimulate them to make the decision.
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.
Typography & Iconography
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.