![bakery- purple.png](https://images.squarespace-cdn.com/content/v1/5a0c7999f6576e509f08d367/1529711355471-059CDDQ2NM2GGSMDOQ8B/bakery-+purple.png)
Lehi-Bakery
Lehi Bakery
Responsive site for Bakery
![bakery crop.png](https://images.squarespace-cdn.com/content/v1/5a0c7999f6576e509f08d367/1529600484547-NKNLEQA01SDR5TVISBH8/bakery+crop.png)
This is a school project I did for a local bakery. The project was to design a responsive site, and the process took me 4 weeks.
BACKGROUND
Lehi Country Bakery is one of those hidden gems that once you find, you keep coming back for more. What started out as baking things for family and friends has turned into filling orders by only word-of-mouth advertising.
They want to be able to have an option for their customers to order online for special occasions with their option of pickup or delivery.
RESEARCH
I interviewed 4 people, 3 females and 1 male, ages 30-40.
They all have purchased from a bakery within the past 6 months and go at least once a month, unless there's a special occasion. 2 went to the same local bakery while the other 2 went to others. All of them purchased in-store, but for special occasions they called in ahead. 1 likes to try new places whereas the other 3 have their go-to place.
Task Flow
This Task flow shows the process of ordering a cake for a birthday online, where they have the option of ordering online or calling in and delivery or pickup.
Wireframe Sketches
I came up with 4 different possibilities for the Homepage. I ended up going with the top left, which has all the information from the nav bar on the whole page. As you click on a link from top navigation it will automatically scroll you down to that part of the page, as well as having the nav bar still accessible.
High Fidelity Wireframes
Going from the chosen wireframe sketch, I built a high fidelity wireframe using Sketch.
Branding
A new logo was designed, keeping in mind the Bakery is the home of the square doughnut.
The color palette was chosen for a country/homey/friendly feel.
UI Kit
UI Design
Prototype
Using the finished UI design, I created a prototype on Invision. The participants tested the process of ordering a birthday cake online.
Usability Test Results
I had 4 participants, 3 female and 1 male, test the prototype by going through the process of ordering a birthday cake online.
Overall, the users found the process pretty easy and self explanatory. The biggest things I noticed were they didn't click on the Order Now button like I thought they would, but would click the Cakes category.
All of them preferred delivery over pickup, saying that was more convenient.
Affinity Map
Here's a list of the user's successes, struggles, patterns and improvements that were done on the prototype.
Next Steps
This started out being done for a local bakery, but as they were difficult to get a hold of, I continued with the project and will continue to contact them and get their approval of the overall look and feel and workability of the UI. I'm aiming to have them put up a fully-functional prototype up on their website to see how well it does with users.