Arsenal - Mobile App Redesign
Arsenal is a mobile application for users to share and learning beauty together.
01 USABILITY TESTING
How did we conduct the usability testing？
Task 1: Register /Edit Profile
For interfaces such as login/register or profile editing the design should follow the rule of “moderate conservative”. Keep it simple, clear and straightforward.
It takes time for new users to trust the platform and “sacrifice” their privacy. Give more rather than asking for more private information from first-time users. (Like the “free trial” period. Let new users explore more information before they decide to register.)
Registration can be cumbersome and some users may give up after spending sixty seconds or more on it. Keep only the most necessary steps as part of registration and save other steps for later.
TASK 2: Add a recommend post/ view feed/ activity
- In the current version, user has to recommend from existing database. But the nature of recommending is sharing: sharing your own experience, knowledge, helping others and at the same time learning from others.
- For beauty products, visuals are critical. The app should encourage users to add videos or pictures to their recommending posts.
- When deciding to purchase a beauty product such as make-up, providing the product name and brand is not enough. Users need more details on the product to make an informed purchase decision. Such as what color code is a match for their skin type/tone.
TASK 3 : Add a question post
- Search and explore is too general. All product types are mixed together making users spend too much time finding their products of interest. A categorization features is lacking but needed for both recommendations and questions.
TASK 4: Purchase
- Each user has their purchase preference. Some prefer multi-brand online retailers, some prefer directly from the cosmetic company. The app should not mislead users to buy a product through a selected channel. Users should have the ability to choose from multiple channels based on various factors such as price.
The findings from usability test is helpful, but simply fixing those issues are not enough to deliver a real good product. In fact, problems emerged from testing indicated some fundamental user issues that have not yet been covered by research. Therefore, a round of interview was conducted for gaining insights.
02 DISCOVER
Cosmetic Market Overview
User Interview
The interview was designed based on one topic:
What is the process when people make a decision about selecting/purchasing a beauty product?
Affinity Diagram
Below the affinity diagram demonstrates the key words founded to help design.
03 DEFINE
Experience Map
Referencing moderated testing and in-depth interviews, an experience map was developed to illustrate user experiences and frustrations in the experience of becoming beautiful.
Insights
The following insights were synthesized to shed light on the design solution.
Therefore, the app should add more human elements, emphasize the feature of social experience. What people need is a trusted community where everyone shares true opinions of products they use.
Story Board
2 storyboards was drawn for visually predict and explore our user’s experience with arsenal in terms of the ideation of learning and collection. In order to make the design solution better.
04 DEVELOP
Card Sorting
For brainstorming the IA system, card sorting method was conducted. All of the potential elements that could be contained in Arsenal were written down in RealtimeBoard, and categorized into groups.
Site Map
The initial site map was developed after brainstorming. This provided a guide to organize and redesign Arsenal.
Prototyping and Iterating
Three iterations of prototype were created prior to visual designs to ensure the design aligns with the research insights.
05 DELIVER
Highlighted Functions
New landing page: simple and easy login
- Standard log in / sign up, therefore no learning cost for users at this step. Only need to select your skin type and tone to start. User can skip registration and try the app to build trust in Arsenal prior to becoming a member.
An all-around immersive learning experience
- Update the tab bar.
- In home page, user can browse content they followed, app recommended or latest popular content.
- Explore: Explore from posts, people, questions, and built-in categories to better guide exploration.
- Search: The “Hot posts and questions” will offer user suggestions to discover even if they have not decided yet what to search for.
Providing detailed relevant information
- Hashtag: When writing a post, user is encouraged to tag on photo or text, as a way to sort and collect all relevant info together. When reading a post, user can click the the tag to explore more info. Save time when pictures and tags provide enough info.
Enhanced purchase guidance
Integrated all the deals for different related products in one post. Helps user make a better purchasing decision. It also can be a future business scope.
Collection as learning material folder
Organize your saved and favorite posts/photos/video/etc. just like organizing your learning material for later review
Finalized Wireframes
Prototype
Branding
Mood board
Two types of mood board were created: black and purple. Black is business formal and avoids mixing with colorful beauty products. Purple is more energetic, proving to be a better fit.
Logo Process
Starting with the meaning of “arsenal”, the logo was designed as a weapon, collection and ally for people love beauty products.
Style Guide
