Ancestry + Traits: Product and Branding
23andMe
Mountain View, 2018
PROJECT BRIEF
10% Improvement Challenge at 23andMe: The objective was to enhance the overall product experience and aesthetic without undertaking a complete redesign from the ground up. Considering 23andMe's vibrant and distinctive branding, I aimed to pinpoint areas of enhancement within the consumer-facing mobile web platform. My focus was on refining both the Visual Design and the Interaction Design aspects of the site.
1. Branding and visual design
Visual Design
Through meticulous refinement of visual elements like the logos and icons, I established a unified and coherent visual design system and style guide for the brand.
2. User experience design
Current (old) Design
The following are a few screens I’ve selected to point out on some areas with improvement opportunities
New redesign
10% enhancement of the existing app design, focusing on incremental improvements rather than a complete redesign.
Sign in
The Login page only contains elements that are for singing in, resetting password, or signing up. All other elements are removed (‘Go to store’ button).
The ‘Sign in’ button turns from inactive mode to active mode when both fields of input (email & password) are filled in.
Home page
The homepage is redesigned to show the most important information first.
Menu
The menu items are visually divided into primary and secondary items. By highlighting the primary, the user can find what they are looking for faster.
Search
The disabled part of the page has a black overlay, instead of white. This will add a better contrast, so the user can see the search bar easier. Also tapping the search icon will remove all elements on the sticky nav bar, and only show the search bar with the close icon.
Settings
The ‘Cancel’ and ‘Save’ buttons are removed from the nav bar, and replaced them with the back button. On mobile (and desktop) web, once the changes are made in the settings, they are saved, so the user will only see the green check icon with ‘Preferences updated’ text.
