My Role

My Role

UI Designer

Tools Used

 Tools

Photoshop

Illustrator

Adobe Exchange

Final Deliverables

Deliverables

Logo

Mood Board

High-fidelity mockups

Style guide

The Brief

 

Homemade yogurt is all the craze. The Yoghurt Shoppe wants to bring this craze to Chicago. Homemade yogurt is catching on because it’s healthy and fun.

The Yoghurt Shoppe is a local small business that has been making fresh, homemade yogurts daily in a variety of unique and classic flavors since 1970. They want to be adventurous as well as cater to people who want their classics and favorites. They’ve exclusively been selling at Farmers markets, but now they want to open their own shop. They are also tinkering with possibly doing a food truck as well.

The Yoghurt Shoppe uses locally sourced fruits and ingredients. They also try to use organic products as well. Customers are able to choose between different kinds of milk (goat, almond, soy, etc.) and toppings (fruits, spices).

Target Audience

 

The Yoghurt Shoppe is targeting health-conscious consumers and foodies. Socially conscious foodies who would like authentic, locally sourced ingredients with no added sweeteners or artificial ingredients.

TYS champions premium quality and flavor at an affordable price. TYS hopes to begin their big ambitious in Chicago and move on to other hip neighborhoods and trendy cities.

Brand Goal

 

Client wishes to emphasize the homemade feel but in a professional way. They want something modern clean and simple like their ingredients. They wouldn’t mind a premium look, but they are also opened to having a fun look and feel. They do not want to be associated with frozen yogurts or big brand name yogurts.

Deliverables

 

The client needs the following:

  1. Brand Identity
    • Logo
  2. A website (3-5 pages)
    • Home
    • About
    • Online menu
    • Online ordering
    • Locations/Contact

My process & Developing the style

 

Research

To get a sense of what is out there, I began by researching if there were any direct competitors in the domain. Fortunately, there was no existing platform online that are specialized in fresh homemade yogurt but they are numerous online platform on frozen yogurt. This is a chance for The Yoghurt Shoppe to take advantage of not only displaying their product online but also give their customers the options to view the menu online, order online and do quick pickups at the shop.

Competitive Analysis

After researched, I started to look closely at those frozen yogurt websites: Yogurtland, 16Handles, and Yofresh. Generally, I found a pattern on these websites where they all used pink, blue, and green in different shades and there are no online ordering options.

  • Yogurtland has great use of white space and incorporated shape elements to present information. I think the hero section are too busy it felt as all the elements are competing with each other and lacked hierarchy.
  • 16Handles lacked hierarchy, the hero image and content is clashing with their fixed ‘Meet Our App’ bar and there are no clear content on the home page to back up their large imagery for instant, I don’t know where ‘16Handles Cakes’ will take me if I clicked on the text. I think they did a good job with categorizing the flavors navigation but there are some spacing issues with the header and navigation bar where it’s too close in proximity.
  •  I think Yofresh did a great job achieving good design principles with white space and created a good contrast with colors, shapes, sizes, and they are just enough content to scan through and finding what you need to. The only negative I found are some positioning elements are a bit off.

Indirect Inspiration

Moving forward in the search for inspiration to get my designing juice flowing. I looked at websites that had online selling and menu layout which was Ruby Tuesday; the menu was laid very clearly and easy to navigate, Nuts.com; categorized their wide selections of nuts seamlessly and had customer’s reviews, and The Spice House; used large imagery and neutral background color to make the content pop with a clear order summary chart.

Design Direction

 

With the analysis and inspiration, I had an idea of what existed. I started to sketch out random ideas with a pen and paper, where I broke down the content that was provided into small chunks thinking about the best possible way to present information to achieve a seamless layout, an easy to navigate and user-friendly website.  My goal was to also focus on the brand goal and targeted audience, so I incorporated three different adjectives from the brand goal to represent The Yoghurt Shoppe tone and feel. Before starting my hi-fidelity design I created a mood board as a guiding reference. I went for an approachable, clean, fresh, and fun feel.

High-Fidelity Screen Mockups

Home Screens – First Trial

For the home screen, I played around with my color palette to get a feel of how applying different colors to the home page would look and I also tried different active state for the navigation. Below is displaying those high-fidelity home screens. After comparing them I chose to go with the orange mockup because the felt it adhered to the brand goal.

Final Exploration

High-Fidelity Screen Mockups

Thoughts

One mistake I made during my first set of trial mockups were, I waited to complete all the screens, then reached out to other designers for feedback. The reasons for this is a lot of people don’t respond, I understand if they are busy. As mid-level designer trying to excel, it gets frustrating at times because I feel other designers forget where they started! Luckily for Nik Payne constructive feedback, I was able to think deeper about my design choices at a different level. By trying to mix modern with a bit of classic was not well pulled off. Being a colorful person, it reflected in my first set mockup and made it feel too childish. The structure of the design was well received; yes! I was relieved to hear that because I did a good job thinking through the user experience flow.

The Logo and Explorations

I wanted the logo to be associated with an organic friendly feel and something to do with eating. With that in mind, I chose Medula One sans serif font because it has a brush-like end stroke that gives it an organic and modern feel. By replacing the Ps from Shoppe with the spoons gives the impression of eating. Below is displaying my exploration and sketching I did. I am a very lousy at sketching with pen and paper, but I realized it helped to get all the bad ideas out.

The Second Set Of Moodboards

The Second Set Of Home Screens

By listening to the constructive feedback, I decided to redesign the entire home page of The Yoghurt Shoppe while I kept the layout. The tone and feel of these second set of screens exploration are organic, fresh, modern, and homely. Since I designed the first set of screens with Photoshop, I decided to try a new tool call Adobe Exchange. I was very excited to go in and explore its capabilities; end result was fast and efficient, but the features were very limited in its windows beta version.

To achieved that homely and organic feel, I added textures over the imageries and backgrounds following with a milk splashed buttons because yogurt is made from milk. Additionally, the border shape around the headers created a strong organic feel and the scripted fonts added a bit of elegance to the yogurt. The other colors and fonts complimented the fresh and modern feel.

The other home screen on the right side, I replaced the milk drop button with a more casual type of button and simplify things by replacing the scripted header font and remove the organic border shape.