A site redesign taking a premium coffee experience from in-store to online

Moving Taylor St Baristas from micro-chain to full-stack coffee business

OVERVIEW

Taylor St Baristas, a well-loved cafe chain, had grown it’s cafe business to include wholesale coffee partnerships, direct-to-consumer sales and a global partnership with Sodexo. Strategically the business was moving from coffee shops to coffee business. To support these changes Taylor St was launching their first-ever equity crowdfund which would be marketed in their cafes and online via social media channels and the Taylor St Website. With these changes, and a recent rebrand, Taylor St needed a new site that reflected the evolution of the business and an eCommerce offer.

ROLE & DURATION

Product Designer
Research, Information Architecture, Interaction, Visual design, website building (Shopify) and testing

April 2019 - Mid-May 2019

The problem

The digital platform couldn’t meet the needs of a rapidly evolving and increasingly digital business.
The problem was that the existing website didn’t reflect Taylor St’s evolving business or have a CMS to give the team any control of the website. Functionally the site was built and managed by an external agency 18 months prior when Taylor St’s coffee subscription “Delivered” was launched, and most of the site visits were to the “cafes” page. Aesthetically it reflected an older iteration of the brand.

Repurposing this for an eCommerce offering that would allow the team control over the store and content wasn’t an option - and with 6 weeks to gather and create content, build and launch the new site, Taylor St needed a site they could manage without waiting on reverts.

Goal

Design target
• Update Taylor St website branding
• Show company evolution from cafe-offering to coffee company
• Low-cost solution allowing Taylor St to test and iterate
• Empower people across organisation to update, manage and create content without tech intervention

Project target
• Capture potential crowdfund investors
• Reach new customers
• Launch and integrate online shop
• Drive wholesale sign-up

Challenges

Timelines and human resource
This project was undertaken to support the change the business was going through, during an investment round - which meant team members working on it were stretched thin. The round also meant a hard deadline to achieve important milestones.

Research

Kick off to understand requirements.
We started by looking at what we were trying to achieve with a new website. Why was rebuilding the site now important to Taylor St? What were the success criteria? What was most pressing, what was achievable based on timelines, budgets and capacity of members involved?

In this initial meeting we identified Taylor St team members that would be contributing to the project and scope of responsibility based on a rough product plan - put together with the CEO. This was an all-hands-on-deck situation, with tasks assigned to the roastery team, baristas, events manager, founders and learning management system consultant (to name a few).

Stakeholder interviews
It was important to clarify business needs from all perspectives to make sure we achieved our goals. In one-on-one meetings with the partnership manager, head of roastery and CEO we discussed the plans and challenges for their verticals to make sure the solution we came up with supported their goals. We also conducted Interviews with cafe and wholesale customers to gain insight from all stakeholders.

*Competitive analysis to identify best platform for new site*

Choosing the right platform
Choosing a platform (or website builder) for this project was a key requirement for both the short and long-term and I conducted a comparative analysis of the 3 main website builders based on 10 criteria. With customisability and add-ons being an important feature for pop-overs, countdown timers and other extras for the upcoming crowdfund, as well as our upcoming focus on retail Shopify became the favourite.

Following initial discussions about building the site in Shopify, I selected a few flexible templates that would allow me to hit the ground running once we’d gotten through the ideation phase of the project - and this helped me start thinking about how to structure information.

Competitor Analysis
I put together a competitor analysis of specialty cafes to see how they were speaking to and capturing wholesale customers. Key criteria were information architecture, content offering, photographic style and use of colour and language. These sites were also used for a 20-second gut test (a simplified dot-vote version), and helped speed up the decision making process when it came to capturing customer information for Taylor St’s wholesale form.

Site audit and user interviews
To start out our project we created a short interview guide and talked to four coffee drinkers who had purchased coffee online in the past, half of whom had been to a Taylor St. These interviews were conducted in person and remotely. The goal of these interviews was to test messaging, observe them completing a task (buying coffee online) and get users overall sentiment of the site during the process.

This feedback was very helpful in the selection of imagery for the new site, as well as messaging when it came to the coffee subscription service.

“I can’t tell if this is a cafe or someone’s home. Everything is understated, nice, but understated.”
Ariella, Functional Medicine Professional, 33

”I think it’s that there aren’t people. doesn’t look like a coffee shop company, it looks like a product company.”
Peter, Strategist, 38

“Delivering what? Coffee? It’s not clear.
What are the perks for?”
Shaun, Investment Banker, 40

Workshopping and Ideation

Project goals, proto-personas and pages that would get the job-to-be-done done
We started the workshop by going over the project goals and timelines. We then developed 4 basic proto-personas. These were based on the assumptions and experiences of the team. We defined their goals, pain-points and in choosing which pages were designed kept each persona in mind to ensure they could succeed in they’re jobs-to-be-done. (In an ideal world there would have been time to confirm these proto-personas with real users but given the deadline we needed to work on the experience of the Taylor St team.)

Post-its, dots-votes and feasibility plots
I asked the team to write each page, or piece of content they would want to achieve their goals, the business goals or user goals. These were then loosely grouped into the new business focuses: cafe, wholesale/roastery, retail, crowdfund - and “other”. We then created a priority & feasibility plot based on business goals, user goals, content we had and content that would still need to be written and created, and selected the “must-have” pages to take forward for the first iteration of the site.

Wireframes

Wireframes to establish content requirements
Based on what we established was needed to launch the new site in time (our MVP), I sketched some quick wireframes to establish what content we had, and what content still needed to be created and sourced (copy, brand and product photography, testimonials and videos). These wireframes were sketched with a question I always ask when it comes to content and messaging: What is the so what?

Content outline and planning document
Once you know what the page needs to achieve - for both the user and the business - you can focus on the composition. We then created a shared Google Doc with the outstanding assets, assigning tasks and delivery dates to team members to make sure we met our deadline.

Deliverables

UI / Visual design
The visual design process happened in Shopify, skipping hi-fidelity designs given the ease of changing visual elements in Shopify, and timeline. This ran in conjunction with the creation of the marketing campaign for the equity crowdfunding and new brand guidelines development. While content pages were set up designed, and outstanding content continued to be written by team members, product pages were populated by team members at the roastery. Even with a basic template designed, a design system had not been fully developed and would need to be evolved and streamlined after launch.

Photographic style
The photographic style of the new brand also needed to be developed as I built the site. Maintaining the Taylor St values and qualities (whilst being able to maintain consistency going forward) was an important consideration. With this in mind products were shot on a wooden table with warm lighting - reminiscent of the cafes. Given the frequent updates to coffee being served and sold in the cafes and online coffee-packs were shot in a white light-box to allow a greater margin for error. Wherever possible coffees appeared with people, or hands to bring a human element to the page and food photography was kept simple, not overly stylised with a focus on appetite appeal and lighting.

Colour palette for new Taylor St brand

*An overview of product, food, people and coffee photography for the new site.*

Final screens

Hours of brainstorming, sketching, searching, sourcing and teamwork meant we had a site ready in time. The final result site was on brand product, with add-ons driving visitors to sign-up for the crowdfund - our primary goal. Beyond this, the site was designed with each of our personas goals in mind to make sure our users could achieve their tasks. Using Shopify to build the site meant we continue to tweak and change the messaging to improve sign-ups, and driving customers to our online store and coffee subscription site beyond initial relaunch.

150
crowdfund sign-ups
in first 2 weeks

42%
increase visits to
coffee subscription page

Increase in wholesale sales conversion attributed to closing the loop

Key learnings

Set realistic expectations that account for blockers. When you’re working with a start-up priorities change quickly, and this might mean your content.
Involve main stakeholders and at the beginning of a project to co-create ideas together. Their knowledge is invaluable early on with tighter deadlines.
Make sure deadlines and deliverables are clearly outlined and agreed with all stakeholders on projects, and ensure all stakeholders understand the impact of missing deadlines, and limitations of projects on tight deadlines (even moreso projects being built in eCommerce platforms by designers!)
Listen to any feedback given from founders, stakeholders and - of course - users. Don’t fall in love with your design ideas — listen carefully to what people who’ve been working with the customers say. The best ideas can come from anywhere, and anyone.
Make sure your brand and design system is buttoned down before you start building - even in Shopify! Even if you’re building in a WYSIWYG platform with easy to change buttons and colours, not having your design-system will lead to inconsistent page layouts, and recessive buttons. Plan before you start building!
No matter how rushed you are, test your site with users. They will find broken links and missing buttons you’d have never discovered in time.
Don’t get caught in paralysis analysis. Done is better than perfect