Responsive Ecommerce Website

Culture Bites

Website design and development for a social impact startup

Case study image
View final product

My Role

Project Lead, UX/UI Designer, Project & Strategy Lead, UI/WordPress Developer

Team

Myself, two of the co-founders, the business development manager, a WordPress developer

tools

Sketch, Affinity Designer, Airtable, Marvel App, Miro, WordPress, Elementor, WooCommerce

Duration

7 weeks

challenge

Culture Bites aims to improve workplace culture through thoughtfully curated team-building kits. They distill industry research into bite-sized activities that managers can do with their teams in just 15 minutes at a time – perfect for a weekly standup meeting.

Despite an excellent product, the company was struggling to reach online sales goals and realized that their website needed to be improved. I was hired as a consultant to lead the website redesign and implementation on WordPress (including solutions architecture support, since the original website was on a different platform).

Outcome

A responsive ecommerce website showcasing Culture Bites’ mission, brand identity, and products – built using WordPress and Woocommerce. View at: culturebites.co.

Business Impact

After the website launched, the company saw more sales in two weeks than in the previous six months. Their previous website had an average of 60 visitors per month; now, the website has over 340 monthly active users, according to data from the launch date (9/14/19) through 10/21/2019.

The Culture Bites website redesign (before and after)

Process

Design Thinking process

Phase 1: Research

When Culture Bites reached out to me with this project, the team mentioned that they were struggling to convert website visitors into customers. I wanted to find out why, so that I could design a website with elements that are engaging and relevant to Culture Bites’ target customers. I crafted a project strategy roadmap in Airtable, taking into account the company’s available resources and desired timeline. My plan was to create a high-fidelity prototype and collaborate with a developer to create the Wordpress+WooCommerce site. (This actually changed and I became the developer – read on!)

Secondary Research

I started by working with the team to identify their direct and indirect competitors, and how to look at competitors’ websites for strengths to emulate (and weaknesses to avoid). I then conducted a heuristic evaluation of the Culture Bites website to help the team understand important usability principles for website administration in the future.

Competitive analysis showing two of Culture Bites' competitors (one direct, one indirect)
Heuristic analysis (site audit) of the old website

Primary Research

I determined that recruiting for and conducting 30-60 minute interviews would be too time- and resource-intensive for this particular “sprint,” so I planned for quick 15-minute usability testing on the existing website. Think of it as a hybrid between usability testing and ethnographic interviewing. (I was inspired by some of the methodology in Observing The User Experience.)

These qualitative “micro”-usability sessions shed light on what users experienced when shopping on the website: confusion and skepticism. This explained why people were leaving with empty carts.

“At this point, I’m 50% interested and 50% skeptical. The website feeling disorganized turns me away from buying.”

Phase 2: Define

Defining the Problem

These research insights boil down to three main challenges:

  1. Users feel overwhelmed by the information – they need to be able to effortlessly understand the Culture Bites product.
  2. Users can’t see the product’s immediate value – they need to be provided information to determine if the product is a good fit for their team.
  3. Users feel skeptical because there’s nothing to compare to – they need to be able to trust the company without feeling like it’s a huge leap of faith.

Here’s a persona I created to help the team understand one key segment within their target audience: mid-level managers.

User persona created to help my client's marketing and sales team members

With these statements, I formed three “How might we…?” questions to guide the team in brainstorming solutions. The following deliverable shows the process of deriving these problem statements from research insights.

This deliverable shows the process of deriving problem statements from research insights

Generating & Prioritizing Ideas 

Since the team is based in Seattle, I facilitated the brainstorm session via Zoom. The challenge was keeping everyone focused on website features (as opposed to marketing strategy or product improvements). In retrospect, I could have sketched a website outline on a whiteboard and guided participants to write/sketch within the outline to help frame the task a bit better.

Business & User Goals

After the session and after I did some rapid brainstorming on my own, I worked with one of the co-founders to identify their top three business goals and see which ones overlapped with the user goals I uncovered in research.

It's important to design at the intersection of business and user goals
Feature Roadmap

I organized all of the brainstormed ideas on a matrix to highlight features solving problems at the intersection of business and user goals.

An idea matrix that I mapped out before organizing the information in Airtable

Using Airtable, I created a website feature roadmap to prioritize features for the launch. I made sure to get the team's buy-in – they agreed that these were the features they were able to provide content for within our project’s timeframe.

View the full interactive roadmap here.

Information Architecture

I outlined the website's architecture on a sitemap. (Some pages shown here are planned for future iterations and are not yet live on the website.)

A sitemap outlines how the website will be structured
User Flows

This user flow diagram outlines the different touchpoints that our target user would have on the new website. This helps me ensure that the call-to-action buttons and page sections facilitate user goals (to learn about the company and to purchase products). This also gives the sales/marketing team members some context for marketing campaigns and point sales.

User flow diagram showing various ways that a user would interact with the website's new pages/features.

Phase 3: ideate

Low-Fidelity Sketches

With an understanding of how the website would be structured, I sketched out some page designs on a whiteboard before creating mid-fidelity wireframes.

Low-fidelity wireframe sketches

Phase 4: Design

Mid-fidelity grayscale wireframes helped my client understand the content needed for the website.

View the full image here.

Phase 5: Prototype

Mid-Fidelity Prototype

Next, I converted those wireframes into a Marvel prototype and scheduled participants for usability tests.

Pivoting the Plan

While I was doing that and refining the UI requirements, my developer realized that he had accidentally quoted only part of the implementation – it was actually supposed to be three times the hours and cost! With his busy schedule and my client’s limited budget, we had to find another way. Fortunately, I was able to find a solution that we (and my client) agreed would be the best way forward: I would build the website using a visual page builder in WordPress and subcontract any custom CSS or configuration work to my developer. This was a more efficient use of our time and budget, given that we only had 10 days to go before the launch date.

Final UI design

Because of the new implementation plan, I decided to forgo a high-fidelity prototype. I built the pages in WordPress and styled them according to the brand attributes that the team had provided for me earlier. I referenced successful design patterns on other websites selling similar products and landed on a clean, minimal aesthetic with lightly playful elements. My client agreed that website design should focus on readability and helping customers understand how they might use the product.

Demo of the final design

Phase 6: Iterate

After launching the first iteration of the site, I also built templates for a new “About Us” page, a “Resources” page, and a blog post page. The team is in the process of crafting content to put on these pages, using the guidelines I’ve provided them.

Additional pages that I designed and built for the team to post more content

We’re excited to see the next iteration of the website with these additional pages!

Reflection

I am thankful for this opportunity to get to know the Culture Bites team. It’s been a pleasure working together on the website design and I’m excited to see the company continue to grow! Their team-building kits are thoughtfully designed and I'd recommend them to any team looking to build a better culture within their company.

This project’s challenges taught me to lead design with confidence in the face of uncertainty. Working within a scrappy startup environment has its ups and downs, but it’s been really fulfilling (and humbling) to learn alongside fellow entrepreneurs as I’m growing my own consulting practice.

Let's build something together

Interested in working together? Drop me a line – I'd love to hear from you.
I'm currently available for consulting on UX design and Webflow projects.

SAY HELLO