Annovera Website Redesign
Client: TxMD (McCann New York)
Industry: Women’s Health
Timeline: July 2019 - December 2020
In tandem with a full rebranding and campaign launch, we were tasked with two phases of redesigning the Annovera web experience to translate the confident “Unapologetic” nature of the brand and add in some fun and humanity to the digital world.
My Role
I worked as the lead Product designer within a small team consisting of a graphic designers, UX researchers and producers. My main deliverables were:
Content Audit - Style Guide - Wireframing - UI Design - Functional Specifications
The Challenge
Annovera, TxMD’s annual birth control ring, launched a rebranding and new campaign early 2020 with a full new attitude and aesthetic that embodied their main user’s confidence and powerfulness. While the site was first launched with a soft launch in the previous look of the brand, our digital team was brought on to bring the new brand to life in their website. With first launch we focused on the color palette, bold font stylings, and geometric shapes to bring it all together, the real challenge came in in phase 2 of design.
For phase 2 the question was, how can we expand and focus our content while injecting more humanity and flow into the experience?
The Discoveries
When first setting out to optimize the Annovera website, we did a full content audit and identified areas to make the site more navigable. Through the audit we highlighted a few key areas for adjustment and included annotations as well as an updated site map and new lo-fi wireframes.
Once we had our information architecture in place, we moved on to the design issues. For phase 2 my main task in UI was to add in lifestyle imagery and overall more humanity to the site. This was tricky to do within the current brand guidelines and site build so the first goal was to expand the guidelines to be more conducive to a digital environment. This included breaking out of the borders to help the pages flow, keeping to one color pairing per page and making slight tweaks on color for accessibility, decreasing IRI size, and replacing the current block graphics with the illustration style used in the brand video to help with storytelling. From there I worked with the design team to confirm these updates and then put together the UI kit.
The Design
With our UI in place. I worked with the design team to work out the most optimal layouts that incorporated both lifestyle imagery and illustration in a way that felt natural. I then worked through each page layout, optimizing content through each and enhancing by adding more interactions with carousels and toggles to help make the content more digestible. When layouts were complete I created high fidelity wireframes and prototypes for desktop and mobile to present to client. Once finalized and approved, I worked closely with the design team and our illustrator to conceptualize the different illustrations and animations throughout the site.
The Development
After designs were finalized we utilized a program called miro as our functional spec document. This live dashboard allowed us to have all our designs and annotations in one workspace and let us communicate with developers in real time. I found this made the development process much smoother as it allowed us to work along side the developers if they had any questions or any issues that popped up to resolve them on the spot.
The Launch
The Annovera redesign went live early 2021 and has seen an influx of prescription requests and inquiries since. As other needs arise there will be iteration within the design system built.