Website UI, UX and brand voice for bkr, a luxury water bottle brand
Overview
In 2014, I began working with bkr, a water bottle company at the cusp of a major transition. When bkr was founded, their product was pitched primarily, as an eco-friendly alternative to disposable plastic water bottles. Over a few years, as bkr's product offerings and fan base grew, the company's values and goals changed, and were no longer aligned with the branding. They knew where they wanted to be and how they wanted to be perceived, but not quite how to communicate it.
Role
My first project was to redesign the e-commerce site for a September launch, while simultaneously developing the new brand system (#startuplife), working with a great group of remote developers, and collaborating with Marketing and Operations teams at bkr.
The objective: Reimagine the bkr brand voice and its application across all touch points - from customer-facing interfaces to internal visual toolkits, web to print.
Below: UI and Marketing assets from bkr's existing site
Background
bkr wanted to position itself into the beauty and luxury market, and shed their eco-friendly, functional image. They wanted the product to be perceived as an aspirational lifestyle brand and beauty essential and not a just a water bottle.
To make the leap from 'reusable glass water bottle with a silicone sleeve' to 'beauty essential', I spent time studying the product and the story behind it.
bkr was created by women who were inspired by Parisian street chic, Tokyo minimalism, all things glowing and glamorous and the belief that objects in your life should be beautiful, effortless and loved. bkr colors are inspired by themes seen on runways in New York, Paris and Milan, and collections are released seasonally, corresponding with the fashion world's Spring-Summer and Fall-Winter seasons.
I heard customer stories about how bkr made drinking water addictive, leading to naturally glowing skin. Customers talked about how bkr bottles were beautiful and loved its minimal chic. They instagrammed photos of their bkrs, color-coordinated outfits with it and knew which bkrs were popular with A-list celebrities. Glamour magazine called bkr bottles "Oh so chic".
Inspired by all things glowing and glamorous and by the belief that objects in your life should be effortless, beautiful and loved, bkr is the beauty essential that will change the way you hydrate forever.
Below: Documenting my understanding of the brand objectives and the vision for the brand voice
Market research
I studied various products, brands and their e-commerce sites in the luxury market to find themes, patterns and visual cues that communicated values like 'high end' and 'beauty'. This helped me understand what 'luxe' looks and feels like, and ways to translate that to components like product photography, website UI and UX, brand and product stories and marketing collateral.
Al the research gave me insights for developing bkr's new brand voice, and gave me a visual palette as a reference point as I started designing various assets. Eventually, these time-and-user-tested web and print assets would help me codify bkr's brand into a set of style guides. But for this stage, the visual palette gave me focus and desirable constraints.
Analysis
While working on overall brand development, I was simultaneously designing bkr's e-commerce site. I started off by investigating the UI and UX of bkr's existing site and marketing assets to identify pain points and missed opportunities in brand communication and usability. There were also opportunities in really pushing the story aspect of bkr - especially as each bkr bottle had it's own quirky name, story and type of person it appealed to, all inspired by the color of the bkr.
50% of customers were browsing bkr's site on mobile, yet the site wasn't responsive - making a great mobile user experience was a crucial need.
Below: Documenting my findings
1) The product needs to be the focus of the product page, cluttered page does not feel high-end
2) Opportunity to create an engaging shopping experience by allowing customers to compare different products, instead of swatches (which reduce the shopping experience to one product/sku in multiple colorways)
3) Pricing information is barely visible, opportunity to emphasize product stories, repeating product details can be de-emphasized
4) Navigation hierarchy is random, the organization needs to be prioritized around user needs
5) FAQs have 70+ questions stacked randomly (eg: a policy question, followed by a product question, followed by a question on shipping, and so on), leading to excessive scrolling and difficulties for users to navigate to specific content. If more FAQs need to be added in the future, it will be even harder to find relevant content.
6) Not much of a homepage experience or a brand personality. The buttons look more like cards, and it's not clear that they're clickable. They different sizes are confusing. Navigation has buttons in different sizes and is not organized by priority for the users.
Below: Rethinking the bkr sitemap, enabling brand story-telling, scalability and usability
Website UI
Responsive layouts for bkr's e-commerce website - creating a scalable, modular foundation, making it possible to add new product categories and features.
Every seasonal launch of bkr's new product lines is accompanied by it's own gorgeously-styled campaign imagery. The homepage is the first touch-point for announcing a new campaign, and needs to wear a fresh, new look every season. I designed a modular card system that can be rearranged and switched up with fresh imagery for a new look each season.
Balancing brand aesthetic vs. conversion
The email capture pop-up is a necessary evil. We didn't want to connect with customers with a site-dominating giant box popping up in the middle of the page, blurring/darkening the background, even though that is the norm. We strove for something subtle, and most importantly, non-distracting. I designed a discreet banner-like pop-up, aligned with bkr's minimal aesthetic, that doesn't take away from engaging with the beautiful content on the site. It's a friendly nudge that scrolls with the user, sticking in a fixed position at the bottom of the viewport. If a user were to close it, they can still sign up for newsletters using the email capture field in the footer.
Responsive design
60% of bkr customers browse the e-commerce site on their mobile devices, so having a responsive site with a great user experience and interface was critical. I created design specification guides for the developers to show how the website responds to different screen sizes.
Below: Responsive design for the bkr homepage, covering different scenarios with the modular, mix-and-match image tiles.
Brand Toolkit
I codified bkr's various design assets from UI and promotional emails, to packaging, and sales and merchandising collateral into a bkr's first ever brand guidelines. I developed an internal style guide, for bkr's internal creative team's use as well as guides for our retail partners to ensure a consistent cross-channel brand experience, which was something that we never had before and required constant intervention from bkr. The style guides have helped maintain an efficient way to ensure brand consistency.
