recap: guiltea cravings website redesign

Overview

I redesigned and developed a site for a local San Diego boba shop called Guiltea Cravings. This was for a Web Design class I took in Winter Quarter 2018 at UC San Diego. In the class, we were divided into teams of 4. Teams were required to go out and look for a client that wanted a website and we chose to work with a local boba shop.

Guiltea Cravings is an independently-owned boba shop located in San Diego, CA. The shop specializes in coffee, tea, and macarons among other things. Their easily customizable drinks combined with the bright and colorful atmosphere of the place truly make it a memorable boba shop in San Diego.

How might we redesign a boba shop website to better convey their brand and products to potential customers?

The site had several problems we noticed. First, the site was very disorganized; there was too much information on the homepage. The amount of content to scroll through made it difficult for customers to know what Guiltea Cravings does/serve. The site felt overbearing. The design looked outdated. It was dark, filled with black and red, which was much different from the bright and colorful setting in the physical shop. Some pages had images that were too large; other pages were left blank. Navigation was difficult. Overall, the site did not express the originality of Guiltea Cravings as a stand-out boba shop.

Design Process

After emailing the client, we scheduled our initial meeting to do an interview. The purpose of this interview was to identify and understand the requirements. Ask the right questions. Overall, we asked general questions about the shop, the customers he gets and the kind of customers he wants to attract, the food they sell, and who the competitors are.

From the client interview, we discovered the themes of Guiltea Cravings, the mood and vibe. The shop was fun and bright. The client was very passionate about his products; they were made in-house. Based on this information, we wanted to highlight his products and the fun/bright mood onto the redesign. Learning the kind of customers helped set up how we would approach the user interviews as well. From the client interview, we were able to figure out and agree on some objectives with the client. These objectives were:

  1. Branding — The client stated how the current site was boring, not fresh/exciting. We wanted to showcase the fun, bright vibe of Guiltea Cravings and utilize a simple, modern look and accentuate bright colors.
  2. Menu — The client stated how the menu was constantly changing and it was never finished on the current site. We wanted to provide a list of current items and have a fixed list of their signature items.
  3. Customer Engagement — The client wanted to improve customer engagement and trust. We wanted to do this through clear content, including their story, promoting their rewards program, linking their social media.

In our user interviews, we talked to various college students, families, and friends. Our questions ranged from being about boba to specific questions about Guiltea Cravings. We also had the users go on the current site as well in order to ask them questions about the site.

From the interviews, we were able to create 3 personas with user scenarios and needs. The personas were Boba Expert, Boba Newbie, and Potential Customer. Here they are below:

Boba Expert Persona
Boba Newbie Persona
Potential Customer

From our user interviews, we found that many users first clicked through the site to find the menu, store location, and hours. As a result, we had to focus on the navigation of the site and make information easy to access from the homepage. We also found that many of our interviewees had no way of knowing about the actual space of the shop. Because of this, we decided to work on showcasing the shop by adding clear photos of it and their products. Also, we needed to make sure that the design of the website matches the atmosphere of the actual shop. Another issue we found through user interviews is the lack of information on the products of the shop; therefore, we really had to prioritize the menu.

We used the competitors the client told us about from the initial meeting to do a competitive analysis. We looked at the positives and negatives of each site from a mobile and desktop point of view. We learned several important takeaways from this analysis. One was quality over quantity is best in terms of color, images, and text. We would style the imagery with typography to help express the brand’s overall vibe and style. We can maintain a clean and minimal look while also adding splashes of color sparingly. There was focus on giving the users easy access to information by minimizing the scrolling and searching. We wanted to highlight the important info and calls to action to avoid overloading the user.

Competitive Analysis Summary

Using the information we have gathered, low resolution wireframes were drawn out. We started off with pen and paper first in order to get all our ideas out. Our focus was in fulfilling the client objectives and the audience objectives that we gained from doing our user interviews.

The goal of this website is to allow users to feel the ​welcoming​ ambience of the business and its brand, as if they’re visiting the store through the site. We did this by approaching a friendly and convenient​ user experience, providing them with easy-to-use ​functions, colorful and ​engaging images, and ​straightforward​ contents. We ultimately wanted users to know that Guiltea Cravings is distinguished from other shops, so our design focused on conveying its ​originality.

Low-Fidelity Wireframe

After the low-fidelity wireframes, we moved onto higher resolution wireframes using Sketch and InVision. Here, we created both desktop and mobile wireframes. Some screenshots of it are below:

Mobile Wireframe
Desktop Wireframe

As the sole developer on the team, I was able to pick the tools used in implementing this site. We used plain JavaScript, HTML, CSS. Also, I chose Twitter Bootstrap because of its responsiveness. The client stated how most customers viewed the site through the phone so we had a mobile-first approach. I also added the Instafeed plugin for Instagram and looked into Google Maps Embed API for the interactivity of the map.

Conclusion

As a result of this class, the boba shop wants to use the site as their main website. We created a site focusing on the brand as: simple & clean, cute & colorful, friendly & welcoming.

Success was defined by achieving our main objectives and I believe we did that. For branding: the site’s design was simple, modern, minimalistic, accentuates bright colors. For menu: we used the menu our client wanted from his shop including the signature items. For customer engagement: I thought we increased customer engagement through clear content, Instagram feed, interactive map, and the site was very intuitive; however, we can’t really tell without running real analytics.

From this project, I gained more experience in UX Design in utilizing the client meetings, user interviews, creating personas and especially in competitive analysis in terms of branding, functionality, content, site architecture and design. We used all of this to steer the direction of the website we were designing.

Guiltea Cravings current site
Guiltea Cravings redesign
Guiltea Cravings current menu
Guiltea Cravings menu redesign

UX Designer + Developer