Website design for a small local business — Yogurt World UCSD
Yogurt World UCSD is a small frozen yogurt store located on the University of California San Diego campus. Despite being adored by the local students and having a very social and kind owner, Mr. Tran, the store does not have any online presence.
In 2022 a group of 3 other UCSD students and I teamed up with a small local business, Yogurt World, located on the UCSD campus to develop their online presence and design their website. This was done a part of a Practicum in Pro Web Design course, as well as out of our love for the store and frozen yogurt.
Roles:
Project lead, Client communication, graphic design, UX Research, UX Design, competitor analysis, and information architecture.
Problem:
Yogurt World at the start of the project did not have a website, marketing material, or any other form of online presence. Therefore, the original scope of the project quickly grew from designing a website to creating a brand identity, making marketing material, and designing a website in order to create Yogurt World’s online presence.
Process:
After conducting the initial interview with Mr. Tran, the owner, I outlined a set of problems that need to be solved. First of all Yogurt World prides itself on their variety of flavors and toppings that cannot be found in other stores, so showcasing this variety had to be a priority. Second came the need to create a brand identity for Yogurt World. Third was the limitation posed by the owner — the website design must be easy to navigate, implement, and update. Finally, I wanted to emphasize the community and student centric nature of the business, especially the way it caters to dietary preferences.
Personas:
Yogurt World’s target audience and main client base consists predominantly of UCSD staff and students. After conducting a short survey on UCSD students, staff, and Yogurt World customers we created 4 personas to make it easier for the stakeholders to understand and empathize with the problems their customers face as well as the recourses they may require to accommodate them.
Competitor Analysis:
As a student team tackling a design project for a real world client we wanted to make sure we had a good understanding of the competition as well as the best practices in web design for the food industry.
During competitive analysis my team collaborated and looked at a wide range of websites, some from direct competitors and some as a source of inspiration and example of good and accessible design.
I examined Pineberry's, Blue Bowl‘s’, Happy Lemon’s, Kane Mochi’s, and Yoori Yogurt’s websites for my analysis. All websites boasted bright colors and a large collection of enticing images. However there were some noticeable downsides, Cane Mochi and Blue Bowl used text to present their menus making them confusing and requiring a significant amount of effort and concentration to navigate, especially when trying to get an understanding of the product in a rush. Few of the websites offer any explanation to their purchase or self-service process which, while not being an issue for existing customers, does not offer an easy or welcoming introduction to a new potential client.
Plan of action:
After presenting the above research to the client and relating their feedback and wishes to the team I created a plan of action to outline the design goals, keep the customer needs in mind, and most importantly keep the business owner’s expectations and needs as the priority.
First of all I identified the business’ objectives:
- Showcasing the variety of product options
- Spark interest in and bring awareness to store’s flavor rotation
- Create a fun and welcoming vibe
Second were the customer needs:
- Intuitive and informative flavor and topping menu
- Visible pricing and easy to understand self-service process explanation
- Easy to find location and opening hours information
Finally I wanted to identify the challenges my team would be facing:
- Create images to represent Yogurt World’s wide range of products
- Design a layout and color scheme that both fit with Yogurt World’s location and create a fun and welcoming vibe
- Provide accessible information to the customer base to reinforce their trust in the business
Prototyping:
Low-Fidelity Prototype:
I wanted to create an intuitive layout for the website that made good use of negative space and avoided text walls and clutter. For the first set of user tests I wanted to test the layout and information architecture of the website to prevent my team investing time and resources into a design that was either confusing to the user or hard to navigate.
User testing yielded overall positive results. Users were pleased with the layout and happy about the easy to locate contact and directions information. However there was a common pain point — the confusing presentation of the price information. Users felt that the home page banner was a confusing place to have the price displayed.
“I was confused by the price by weight. I didn’t understand immediately what it meant.”
The users also suggested leaning more into the fun and creative aesthetic of the brand.
“I think you could have a little more fun with the aesthetic.”
Working on brand identity:
We wanted to establish Yogurt World UCSD as fun, friendly, and student oriented. To do this we we used a pallet with bright, but non-aggressive colors, that came across as playful and fun, without being overwhelming. We also used colors close to UCSD’s blue and yellow to capture the university’s aesthetic and appeal to the student and staff. We also used rounded Sans Serif fonts to give our design a more friendly and casual appearance.
Designing a mascot:
I wanted to lean more into Yogurt World’s fun and playful attitude so I set out to design a website mascot that could embody it. What better to represent the store, its attitude, and product than a cute and friendly drawing of the product itself?
High-Fidelity Prototype:
After going through visual and graphic design process and a short photography session I was ready to put it all together in a high-fidelity prototype.
There was a large number of changes made from the initial design which were based either on user or client feedback and requests.
The page layouts remained mostly consistent after the creation of the low-fidelity prototype. However a significant amount of information has been restructured and reordered to ease the cognitive load of the user and to be more intuitive. Another important thing I tried to chase was WCAG compliance.
Home Page:
The Home page banner and buttons were redesigned in the accordance with the new design guidelines. The main banner was altered and given a tint to create a more obvious entry point, being “frozen yogurt customized your way”, to seamlessly grab the user’s attention.
Customer testimonials and a link to Google Maps Reviews have also been noticeably featured to highlight the fact that Yogurt World UCSD is loved by the community and to inspire trust and a sense of transparency.
Menu:
The Menu page changed the most as my team and I looked for the best way to layout and display the flavors, dietary information, and toppings. We wanted to avoid boring users with lists of disordered flavor and topping names. Instead I came up with a grid system that was used for both flavors and toppings.
I have added a How it works section to the page with a short, but informative graphic the not only grabs the user’s attention but also is informative as it educated the user on Yoghurt World’s self service process. It also allowed me to include the pricing information in a more intuitive and easy to understand manner.
Upon choosing a flavor or topping group that the user is interested in they are met with a pop-up. In the case of flavors it gives a short description of the taste, shows the dietary information in the form of icons, and shows an actual image of what the frozen yogurt would look like if they were to get it. I believe that including this image was an important step in building trust through transparency. While the graphics may be cute and attention grabbing, seeing the real product is often times what the users actually want.
I also found a new and better way to address the issue of rotating flavors. Previously Yogurt World used a spreadsheet with the flavors and they days they are available on. This table was hard to read and since most of the time the users wanted to know what flavors would be available on specific day I decided to add indicators next to rotating flavors to show what days they are available on.
Contact and About:
For the About and Contact pages I and my team have kept a simple layout that is commonly used by many other food industry websites. However I have shortened the amount of text used to avoid aunting text walls. Good UX Writing is an important step towards building a good and trusting relationship with the customer, as the last thing we want to do is making their time on our website tedious.
To break up the text that we included my team made sure to include a wide range of images of the business itself. We wanted to get old and new customers excited about visiting the location itself, as it is a very welcoming and joyful place.
User Testing and Feedback:
For testing the final prototype I chose to conduct a set of usability tests with a set of pre and post test interviews. I wanted to get a good understanding of how well I am my team captured vibe of Yogurt World UCSD and how intuitive our design really was. After a set of short observational tests and interviews we received and overwhelming amount of positive feedback. Users have reported the website prototype to be:
“Intuitive and easy to use.”
“Really clean. I love the cute little froyo guys, they are just adorable!”
“Easy to navigate. The information is clear and easy to access.”
“Love the circle with the actually image (referring to the flavor -pop-up). Honestly didn't expect it, but its a nice addition.”
We were also ecstatic to receive the praise of our course professor and mentor for this project:
“You have done a really good job with creating a fun and cheerful aesthetic and brand”
However no matter the amount of positive feedback each design has its flaws. We also received some criticism. As we anticipated most users to be accessing the website from their phones we opted for a mobile first design, but this came with some issues. The main source of criticism came from the sizing issues for the responsive desktop design, as some users believed that some elements were too large and that the design could benefit from having more space. However this issue was mostly noticeable on larger laptop and desktop screens (>23inch) and less so on regular sized laptops (<15inch). I believe this issue would be best fixed during the implementation process as Figma has some limitations when it comes to creating responsive prototypes.
Client feedback:
I made sure to meet with the client throughout the project as I wanted to be transparent and to make sure I manage his expectations, my teams resources, and our time appropriately. Before making final revisions I made sure to get client feedback, he was very pleased with the design and liked the graphics and layout I designed. His feedback was very positive and he was pleased with the design and the way my team and I represented his business.
Lessons learned and Reflection:
From this project I learned a lot about client communication and team management, as well as graphic and visual design. I took on a leading role and the responsibility of client communication early on in the project and the policy of being transparent with both the client and my team, which helped resolve a lot of scheduling and content creation issue early on in the project. This transparency policy was really beneficial in the later stages of the project as it allowed my team to get their things done early and encouraged honest communication about our limitations allowing us to pick up each other slack when needed. This made for a low stress and enjoyable experience for the entire team and kept the client happy as he was frequently updated with project milestones.
I would also like to thank my amazing team members, Clarissa Elbo, Mary Mei Longano, and Siyuan Wang, for their contributions and hard work.
