Role | UX Designer
Objective | To create and Design Responsive Web Design
My Royal Donut Case Study is a school project I created for DesignLab
Skip to:
The Original Royal Donut shop is a timeless classic shop in Burlingame, CA. Planted in the city since 1960.
The location is key for this shop. Right next to the Cal-train station, Burlingame High School and Downtown Burlingame avenue. The donut that they sale are casual baked-goods offering many varieties of donuts, croissants & ice cream flavors.
The competitor analysis stakes are high for this little shop on the corner. There are quite a few other popular shops in about
40 foot radius, them being Pete’s Coffee, a Starbucks Coffee shop, The Crepe Vine and many more. Even though the business has been a hit for the past 60-70 years they have never had a website. My job will be to create a website prototype that will help the shop place orders and pre-orders in hopes it will help their business be more organized and they will be able save time in the morning when they are help customers and baking donut .
Research Goals
• Find out what makes the donut shop different from its competitors and why it is in more of a demand for preorders.
• Determine how many orders are made in an average week and what are the top three donuts made.
• Understand and determine the best process for creating a preordering a custom order system for customers to place order Online.
Design Process
Research Questions
• How do people choose The Original Royal Donut over so many other shops in the area?
• What type of donut and how many are people interested in getting? What for and why?
• Determine when orders are placed how many are ordered and how often are they sold out.
Methodologies
Secondary Research: Look at the existing research and reviews on yelp.
Interviews: Create and interview guide and conduct interviews.
Market Research and Competitive Analysis: Successes and failures. What else is going on in the neighborhood and how is the donut shop different from its competitors and how can they learn and grow from market research.
Local Competitors
The local competitors for the donut shop. These are not direct competitors because they do not sell for the mass, but they are in the same category of coffee and pastries. They can be used for business events and meetings, but they can’t serve a mass about in such short notice. Because of the location of the donut shop there are many competitors that it has, but the main competitors are the ones online that most people can place pre-orders or custom orders like cupcakes shops all over the bay area. Since my persona is someone that is local and has to make orders on the go with out much time management, this is why I choose to to look into the local competitors in the area rather than searching for doughnut shops online.
Persona
My persona was my best part of my project, it really helped put a perspective to the problem. When explaining my reason for this site, I would always go back to my persona and why it was needed. Hiroko works in HR and has to help with company events and moral issues that can happen around the office. She gets last minute calls from supervisors and the office management of things they need in the office. She takes the train to work every morning and she is always runing around for the company. She needs a place that is local and get provide for the mass but also could use a site to make these orders and pre orders because phoning in, isn't always the best method for her. She wants to able to see the selection and choose different items each day without having to ask.
Site Map
After creating a list of features that were found needed during my research for this project, I created a site map that will help organize my work flow. I started out with the home page and listed the top needs of my stakeholders and added the proper pages and links that would be on those pages. I wanted to make a page for just order already made donuts on the go and also a section where my stakeholders can place custom orders for special events. What was founded in my research is that people don't want to call up and ask questions, they want fast ordering that doesn't rely on another person to get it right. Creating a site that is straight forward in ordering sweets and also keeping it sweet fresh and simple began to be my goal for the royal donut.
Task and User Task Flow
With the information I found in my competitors analysis, persona, interviews and so much more research, I put together a user task flow and a task for to show all the different pathways of the site I wanted to create for the royal donut shop. The challenge and goal for this project was to make sure the stakeholders could place and order as fast and easy as possible. To create a menu, a custom order section, and also to have a pre-order section that was completely different from the custom tool. To give the site more of a use, I wanted the shop to have their customers come back and enjoy this experience again so I decided to add a CTA where the client could write up a positive review for the business and then receive a special treat! For this site I didn't add as many CTAs as I would of liked, because I wanted the order process to be clear and fast and easy to make for my stakeholder.
Low Fidelity Wireframes
After creating my task flows, I started to work on some wireframes for my site. The hero section tends to come first, using the information that I collected, I made the navigation bar and a huge order button on the front hero section so my stakeholders can get straight to what they came to the site for. Once the user clicks on it, it then takes them to the type of order they want to create CTA. From there can place their order, but also go back and look at the menu or past custom doughnuts.
Below is a link the low fidelity wireframes with annotations, in case you are interested in seeing more of my work flow this wireframes. Mostly explains the process of the ordering system and the ideal steps for the royal donut shop.
Brand Tile and UI Kit
I came up with the brand and logo myself. I started by researching all different kinds of sugar and technology art work, found colors that would work well for a user friendly site and created a logo with the title of the shop. The shop currently has the same type of look, but it is a bit out dated and rusty.
This new brand look cleans up the old shops image. I created a color pallet and found images that I wanted the user to feel when they used my tool. I wanted to the stakeholders to get excited about ordering more donuts so creating something sweet and colorful was a major goal for when I was creating the brad design.
I wanted the logo to be simple and sweet. I added the crown on the doughnut to get it more of a royal look. The colors I choose to use almost remind of rainbows and unicorns since it was a lot of the custom doughnuts that I found while researching custom doughnuts online.
High Fidelity Wireframes
After creating the UI and Brand for the shop and creating some low fidelity wireframes, I started to work on my high fidelity frames. As you can tell it looks very sweet! I used photo cards as big part of my display and also for navigation for the user so they knew what order they were placing since it would be selected right under the donut they wanted to buy.
I created a CTA page for the order button on the hero section, but also having the menu and custom detail page all with in reach in the navigation bar. On each page that is way to get to the homepage, by click the logo at the top left corner.
On the pre-order and custom order process a notification of where the client is in the process of ordering displays how much further they need to go by the step bullets. I also wanted to make sure the user has away to go back in case they need to change their information during the ordering process, so a next and back button were added below each order page.
High Fidelity Prototype and Live Prototype Video
I brought all my high fidelity wire frames to gather and created a prototype. I had a few friends test it out and look it over. They all really enjoyed the tool and wanted to know if they could really order doughnuts from the shop! They mention it was easy to use and navigate through the site. Most of them really liked the bright colors and the imagery of the custom doughnuts and found the prototype very intuitive. My goal for this prototype was to showcase the need for this shop and it's stakeholders. So presenting the task flow is the pathway of the site's structure.
You can view the video below or visit the live prototype on the link below.
Conclusion
There were a lot of different take aways for this project. I learned a lot of different tools and methods that can be used for online food ordering. Moving forward on my other capstones I want to be able to use photo cards again and also use some of the same methods for check out since it seem to moved smoothly. It was fun and creative way to help a local shop place orders more defiantly and faster than having the clients call in each morning. I found that most average people would prefer to order Online instead of calling in. With a site and a ordering system the shop will most likely have a longer lasting effect on their customers and could end up finding more customers than they had before.