Building a mobile friendly site for a small beverage business

A case study for Tea’s Company client project

OVERVIEW

Tea’s Company is a small boba tea business in Spokane, WA. They started last year as a stand at local farmers markets, and upgrading to a mobile food trailer this year. The client’s goal is to create a mobile friendly website where customers can order drinks ahead of time.

 

TEAM

Sole Designer

DURATION

2 week design sprint- remote

METHODS

Competitive/ comparative analysis, user interview, user survey, archetype development

client meetings through Zoom. 

 

CHALLENGE

The client wants to make it easier for customers to follow social distancing rules by creating a mobile website so that customers can order without standing in line. The client already has a website started on Squarespace, and ordering functionality set up on Square.

Design and build the website, integrating the Square ordering site with the main Squarespace site. Create a homepage that reflects the company’s branding, while making it easy for customers to find what they need on the website. 

What does the competition look like?

To get an idea of what other small food and beverage companies are doing, I looked at several different companies, including Kogi, a popular food truck, and Boba guys, a popular boba shop for a competitive/ comparative analysis.

I also sketched out their mobile site in low fidelity so I could better see the components that made up their site. 

 

Sketches of competitor mobile sites and notable elements I could use

competitor sketch img.001.jpeg

Menu and order buttons.

Social media feed

Weekly schedule

What are the user’s goals when visiting the site?

By sending out a survey, I found the top two things customers are searching for when visiting the website are the hours, and the menu. With this in mind, I sketched some options for the home page layout, incorporating some features noted in competitor sites. 

Sketches of Tea's company mobile site

1. Order and Menu buttons

2. Images

3. Schedule

4. Social media feed

How can the UI be cohesive with the

company’s brand? 

Since the company is upgrading to a trailer this year, they had artwork created as a wrap for the trailer. When thinking about the look of the website, I wanted to keep the visuals in line with that. I used the colors and shapes that were used for the trailer and re-worked it for buttons on the website. 

When thinking about fonts to use, I wanted to keep it a sans serif since the artwork and branding of the company has a young, contemporary, artsy feeling to it. 

Tea's Company artwork/ mockup of their upcoming trailer

Colors sampled from the trailer artwork

Putting it all together

From my knowledge of Squarespace and it’s constraints, there was only so much control I would have when moving elements around. Because of this, I decided to build the website based on the low fidelity sketches directly in Squarespace instead of building out a prototype in Sketch or Figma. This way, I wouldn't spend time building a prototype that may not come together because of the constraints of the platform. 

Order ahead and Menu buttons

Since the company is upgrading to a trailer this year, they had artwork created as a wrap for the trailer. When thinking about the look of the website, I wanted to keep the visuals in line with that. I used the colors and shapes that were used for the trailer and re-worked it for buttons on the website. 

When thinking about fonts to use, I wanted to keep it a sans serif since the artwork and branding of the company has a young, contemporary, artsy feeling to it. 

Ideally, I wanted these buttons to be side by side. But, because of the restrictions of the platform, these buttons ended up stacked on the mobile site. For the next iterations, I would explore resizing the buttons so that both fit in the screen, and make space so that the schedule appears above the fold.

Using the artwork from the trailer, I re-arranged some of the shapes to make the 'order ahead' and 'menu' buttons.

Tea's Company mobile website in progress

Ideally, these buttons would be side by side, but they are stacked due to constraints of the platform.

Schedule

For the business hours and location, the client needed a way to easily update the calendar. Because the business is mobile, hours and locations could vary by day. Using the available Squarespace calendar element would enable the client to update easily. From my research however, customers would normally check for business hours just before they left, or up to a couple days in advance. A monthly calendar is a clunky experience for the user. In the next iterations, I would brainstorm and research other options for the calendar function. 

Default Squarespace calendar- research other options in next iteration.

Social Media

Customers currently keep up with the company based on its social media posts. From the business’s experience, its customers enjoy hearing the company’s story and appreciate updates and announcements of business milestones. The business’s social media account is an important part of keeping it’s customers engaged. Because of this, linking the social media to the website helps to bring in the business’s voice.

About Me page

The original draft of the website had an about me section and image of the client in line in the home page. I made this into a separate page. To make this page cohesive with the brand, I created a background with the existing artwork and colors to frame the picture of the client. Thinking hierarchy in the text, I made the body text a little smaller so that there is a more noticeable contrast in text size.

Tea's Company About me page

Framed the image with the artwork to keep the pages looking cohesive.

RESULTS AND REFLECTIONS

Looking back, many of the competitors I looked at are food trucks based in Los Angeles. 

Although it's good to look at a diverse range of competitors, I would go back and look at more businesses local to Spokane, WA.

Because I didn't create a high fidelity prototype before starting work in Squarespace, I didn't get stuck trying to maneuver around the constraints of the platform to try to get things to work. Seeing how some of the elements are appearing on the mobile site is allowing me to think about what I want to do for the next iteration.