GeneCompanion is a biotech startup that tells users what medications work best for them based on their genetic background. Their marketing director contacted me asking to help them restructure and redesign their initial prototype. My prime responsibilities were to improve usability, imagery, user flow and interaction. I am currently continuing work on the rest of the app, but in the meantime have provided one of the main user tasks of the support center redesign.
Support Center Before
The “Support Center” portion of the app was of particular concern for the client and their top priority for redesign. The app was in beta while the company was actively pursuing investors. Feedback from several potential partners provided that they were focusing on the user interaction, and in particular, how to navigate the app and get help.
As you can see, the initial design of the Support Center was filled with placeholder content. Combined with unfriendly user flows made for a nightmare of a user experience.
Dated icons, confusing content layouts, convoluted wording, inconsistent branding standards, and unintuitive screen progression were just a few of the key target areas that I would need to focus on.
Wireframe and Sitemap
After pruning what was necessary and what was not with the marketing director, I began to sketch out a wireframe of the general flow I was aiming for. I made alterations that followed industry standards, such as creating a header with a help icon and profile icon. After getting approval, I was ready to start gathering the correct information and trimming some fat. I worked with the client in reorganizing and renaming the video tutorials as well as figuring out which PDF Instructions were necessary to include. I then created a sitemap to organize the links needed for each category according to the information gathered.
Support Center After
The ideation process resulted in a more polished, streamlined design as seen above. Editing out much of the excessive information — for example, an explanation on what the Support Center is within the “Support Center” — as well as removing some unnecessary, overly-complex features created a more simplified and user friendly experience.
Initial Design Flaws:
X Lack of visual contrast and consistent design choices
X No stylesheet for enforcing design consistency
X Low resolution images and assets
X Not optimized for main platform (i.e. mobile devices)
X Design conveys a lack of credibility
X Cluttered layout
Delivered Improvements:
✔ Consistent font and text sizes
✔ Universally acknowledged and accessible iconography
✔ Designed for mobile
✔ High quality images and assets
✔ Contrasting colors with intentional white space for readability
✔ Overall more professional look and feel
