Website design and development for a social impact startup
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).
A responsive ecommerce website showcasing Culture Bites’ mission, brand identity, and products – built using WordPress and Woocommerce. View at: culturebites.co.
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.
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!)
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.
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:
- Users feel overwhelmed by the information – they need to be able to effortlessly understand the Culture Bites product.
- 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.
- 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.
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.
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.
I organized all of the brainstormed ideas on a matrix to highlight features solving problems at the intersection of business and user goals.
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.
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.)
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.
Phase 3: ideate
With an understanding of how the website would be structured, I sketched out some page designs on a whiteboard before creating mid-fidelity wireframes.
Phase 4: Design
Mid-fidelity grayscale wireframes helped my client understand the content needed for the website.
Phase 5: 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.
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.
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.
We’re excited to see the next iteration of the website with these additional pages!
This project’s challenges taught me to lead design with confidence and poise in the face of uncertainty. Working within a scrappy startup environment means constantly navigating ambiguity, and that's why having a solid UX process is especially important. By using demonstrated best practices, we were able to achieve a measurable increase in sales and website traffic. The project was a success and we have the metrics to prove it – double win! 🙌
It’s been really fulfilling (and humbling) to learn alongside fellow entrepreneurs as I’m learning to run my own business. The Culture Bites team-building kits are thoughtfully designed and I'd recommend them to any team looking to build a better culture within their company!