Bee Well Wishes
E-commerce rebranding campaign & website redesign
Final pitch deck available here
This website redesign was part of a full-scale marketing campaign done for Bee Well Wishes, a small alternative “get well gifts” eCommerce site. As well as being responsible for the new site’s interactions, I was part of the creative team for the overall campaign that would accompany the redesign.
Bee Well Wishes (BWW) came about after one of the senior leaders at Moxie Interactive had a sudden medical emergency during the 8th month of her first pregnancy. They discovered that she had a tumor on her brain stem, so she underwent surgery to remove it at the same time as her delivery. The severe physical toll necessitated a lot of time for recovery. Naturally, she had an outpouring of support, often with flowers and food, but allergies and residual effects from the surgery meant she couldn’t have flowers around or eat complex foods so most of the gifts went to waste. However, the best things she received were a plush, soft blanket and socks that kept her warm and comfortable as she recuperated, and she was able to hold onto them for years in the wake of this saga. After making a full recovery, she saw a business opportunity in selling high-quality, durable gifts so people could support one another in times of duress or comfort.
Research
While working at Moxie, I was the UX subject matter expert for the team who would be leading the site redesign and creative rebranding strategy. Immediately after beginning the project, I moved into doing research, performing an experience audit of the current site. I found that there were several opportunities for improvements, such as the navigation bar that changed order depending on which page was selected. There were also more substantial problems, such as SEO text present at the bottom of pages or the lack of a responsive mobile site. On top of a poor use of screen real estate and a visual design language that hadn’t changed much since its initial launch in 2007, it made for a lackluster impression for users.
As I evaluated the current experience, my teammates did a competitive analysis on other e-commerce sites. Some were large (Amazon, eBay), others small or medium (Etsy, Scoutmob Shoppe), and others with at least a partial focus on “get well” gifts (1-800 Flowers). We also examined Caring Bridge, a social network focused on community support and donations for those experiencing a health crisis. It was this site that gave us perspective on how to leverage one of BWW’s key assets - its purpose.
Stills from my audit of the original site. This was the home page
Home page, cont'd
Product and story pages
Contact page
After combing through the data, we understood that BWW’s biggest key differentiator was the founder’s story. It was so moving, yet felt underdeveloped in the current experience. It was something that should be a feature of the site so it seemed natural that it would be one of the first things to present in the new layout. As users were welcomed onto the site, the story would be the way we made a connection to them so they understood Bee Well Wishes’ purpose.
Design
With all this in hand, I began sketching away at would a new site could look like. I knew that with only 13 products, it wouldn’t be difficult to show them all at once so long as they could be properly displayed. Informed by the design of “word clouds”, there would be a dedicated product space where items could be filtered based on criteria (Ratings, Most Popular, Newest, etc.) and the images would change size relative to each other. For example, if a user filtered by popularity, there would be 2-3 large product images signifying those were the most popular, with medium images ranking below those and so forth.
Sketches from my notebook as I worked through various aspects of the site's designs
Early home page sketches
Conceptualizing how to best show the BWW story
Home page and product display layouts
The foundation for what would eventually become the site design
Featured articles & stories covering BWW and Contacts section. Also an exploration into a feature for sending gifts
Initial explorations into a second honeycomb/beehive design
V2 home page
Menu/Navigation concepts
Site flowchart showing different states of interactions
I turned my sketches into wireframes and brought the design to the other designers on my team for feedback. After incorporating their input as part of my next iterations, I passed the wireframes off to our graphic designer who put on a fresh layer of paint and pixels. Finalized mockup in place, the team came together to do a test pitch to the senior creatives at the agency. The overall consensus was positive, but they delivered an extra challenge: with two days until our final presentation, come up with a second site design to incorporate in our pitch as well.
Once my heart leapt back into my chest, I knew I'd have to make some trade-offs in my normal process. There wasn't time to do more research, so I got back to drawing sketches and came up with another site centered around a one-page design with much more of a mobile focus. I thought it could be built with more animations and with a theme of a beehive. More feedback was sought from the other designers and teammates, then I took my designs to the graphic artist where I explained my concept and consulted on some of the finer points to make sure it was consistent with my intentions. After the final comps were created, we brought it all together in the pitch deck.
For the final presentation, we walked through our creative concepts and how we wanted to highlight the founder’s story of support through difficult times, as well as the idea that Bee Well Wishes was able to provide support through its products and in the community. I presented my designs during the pitch as two viable options we could explore, one based on a more traditional e-commerce site style and the other a modern take on what the mobile shopping and sharing experience could be. After the pitch, the client told us she loved our work and how we handled her story with care. Ultimately, she picked the second website design as it was the direction she wanted to see her store move towards.
WireframeWireframe of the v1 site redesign
A mock up of the v1 site featuring the video of her story
Site mock up featuring the shop and social features
Site mock up featuring the "buzz" and contact sections
Mock up of the v2 mobile-centric design
Mock up of the v2 site showing a modal pop-up from the navigation
Wireframes and mock ups of both versions of the Bee Well Wishes site