Hero's

Role:

Concept
Research
Interactions
Visuals

Duration

May - June 2022

Project Vision & Goal

Hero's is a regional sandwich chain located in the Chicago area. This responsive website will offer the best experience for those looking to quickly order a healthy meal and have it delivered.

Challenges

A quick and easy way to order healthy food
Introduce a fun way to select a healthy meal
Tracking their lunch order/delivery

Kickoff

Hero's is one of the smaller food chains in Chicago and because of this, I had to ask, what are their goals to compete with the other options? What stands out about Hero's? One thing that stood out in the competitive audit and through user interviews for the product was how they're one of the healthier options compared to competitors.

Competitive Audit

Through competitive analysis, I found that there are several sandwich shops in the area where Hero's is located, however, most do not offer specifically healthy options and while all offer delivery, only Jimmy Johns promises a quick delivery of your meal.

Hero's Users

Drew

Age: 28
Occupation: IT

Brian is an IT specialist at a smaller company who spends much of his time at home, working remotely. He doesn't get many breaks because he is so busy, but when he does, he feels he makes unhealthy food choices. Brian would love if he could get a healthy lunch delivered to him without much effort.

Dina

Age: 42
Occupation: Program Manager

Dina is a very busy program manager who finds it hard to get away from her job for lunch, so she is often getting food from a vending machine. Some days she finds that she even forgets to eat because she has so many meetings through the day. Dina would like a quick option for lunch or even dinner, that isn't junk food and that she can quickly order.

Information Architecture

Paper Wireframes

There are many options for restaurant menu layouts, so I wanted to explore a few of these before jumping right into creating digital wireframes.

Digital Wireframes & Lo-Fi Prototype

Upon loading up the Hero's home page, I wanted new users to be greeted appropriately and to not be confused about where to go, while having returning users be able to quickly order what they want.

Usability Studies

I conducted two rounds of usability studies during the development of Hero's (one for the Lo-FI Prototype and one for the Hi-Fi Prototype). Each round had the user ordering a meal.

Lo-Fi Round

Some mobile portions did not look as good as the main site
Users didn't like the wording of the calorie counter

Hi-Fi Round

A way to track their order/delivery

Mock-ups & Hi-Fi Prototype

Users wanted the sandwiches section of the home page to look similar on both versions, so I made the mobile version use the same cards as the main site and now the user can swipe to see the options. I also updated Calorie Counter to say Calorie Chooser, as users felt that the word "counter" felt assuming.

Challenge 1

I needed to make sure that the task flow for ordering food was quick and easy. Making sure food option buttons were front and center for the user was of the utmost importance while they decided on their meals.

Challenge 2

Eating healthy can be tough, so introducing something fun on the website was important to keep the user on track with their decision.

I created the Calorie Chooser so that the user could select how many calories they wanted to eat for that meal and then get a recommendation.

Challenge 3

Users wanted a way to track their orders, so I utilized a progress bar to show them at what stage their meal was at from the order being made to when it would be delivered.

Web Media

Takeaways

Designing for both mobile and web at the same time can be challenging and lead to issues that you may not have thought about previously. Also, choosing the right words is very important or your product. Some words can be triggering or make the user feel a certain way and it's important to remember that.

Page updated

Google Sites

Report abuse