Complete website rebrand and UX journey
2021, 8 months
Lead Visual Designer
Lead Visual Designer (me)
This project was for Vitapod (vitapodworld.com), an e-commerce start-up, drink system company that dispenses vitamins, electrolytes, and minerals into your water. I joined the team pre-launch as the lead designer and had full ownership over product decisions.
Moms in their mid 30s to 60s, people with families who care about health→ expanded to people who enjoy working out, skincare/beauty, & health with Launch 2.
I redesigned the Vitapod World website 1-2 months before launch. Visually, this included developing the brand, style guide, a library of iconography and photography assets. I also was responsible for leading designs of all screens for desktop and mobile within the user flow. Post-launch responsibilities entailed making updates dependent on data we received about website activity and fixing bugs.
ISSUE AT HAND
How can a rebrand help our audience feel more connected to the product?
Initial header banner mockup
Below is the original concept for the homepage banner, which was developed before I joined the team. My initial concerns were the lack of color, emotion, and excitement. The icons used were very generic and the photography of the Vitapod machine wasn’t slick enough to stand alone without any sort of environment or added flair.
The original colors are lacking any emotion or excitement and the rounded button's UI felt outdated.
Launch Vitapod and build a customer base
We knew it would be a slow start with the limited funding for marketing we had, but our goal was to get enough people interested to keep them returning. Initially, we were relying on the health factor to interest folks, however we quickly realized we needed another angle as well in this marketplace.
No one knew what Vitapod was and it was difficult to spark interest
As Vitapod is a completely new and revolutionary product to the drink market, the primary goal was to educate and entice new visitors of what exactly Vitapod is and how to use it. The education of how Vitapod can contribute to a healthy lifestyle in addition to a rebrand that feels more inviting will lead potential consumers to buy the product.
Rebrand Vitapod to appeal to a wider audience
While the product could easily sell itself with its amazing health benefits, we had to appeal to a larger crowd and the current branding felt very unwelcoming and cold with it's extremely sleek appearance. I led all designs for the rebrand and UX journey that contributed to amore pleasant and engaging user interface.
Primary, secondary and background colors
The Noyh font was selected before I joined the team
RESEARCH & PROCESS
My first steps beginning the project were to find brands with similar target audiences and products. I looked at a wide variety of e-commerce sites to gather inspiration on what kind of colors, iconography, language, call-outs, and photography similar brands were using. I took most inspiration from Liquid-IV, Olipop, Sodastream, Spärkel, Hydroflask, Kencko, & Keurig.
Once I collected a catalog of brands, I began to look at their target audiences to find similarities and inconsistencies with ours. Vitapod’s original target audience were moms between the age of 30-50 and middle-class families interested in health. After researching, I realized that most similar brands had a slightly younger audience than ours and we could expand our target reach even further. We still had the same delicious drinks that young people wanted but how could we also target them?
The issue was that the Vitapod machine took up a lot of counter space, which a lot of young people and city folk don’t have. However, the target reach could grow to younger people that live in suburban areas. Post the first launch, we realized the price tag on the machine was also another issue. Consumers didn’t want to splurge on a drink machine when they could just buy stick packs.
I conceptualized an eye-catching homepage banner to relate to a wider audience.
Header banner for launch
After finalizing the new style guide with the team and working closely with engineers to launch the product site, we were live! I helped direct this concept video for viewers to gage what exactly Vitapod was in less than 7 seconds.
FINAL DESIGNS FOR WEB
I also designed for mobile, which isn't shown below. Within 2-3 months, I worked with engineers to ship all these pages for web and mobile. Besides leading UI and UX design, I also directed all product photography and edited all images.
Having so much direction over UI and UX was a great opportunity as a designer and a huge learning experience for me. This project really commenced my product design journey. There's definitely a LOT of changes I would make if I were to re-do this project as I've grown so much as designer post-Vitapod.
I would definitely refocus on accessibility, as this wasn't a huge concern of the team during launch. Most of the text on buttons and color backgrounds are not legible to everyone. I would also revisit color and the style guide - while I do think the colors picked are more inviting and fun than before, with accessibility in mind I would pick a smaller palette with more contrast.