Halal Taco Dude
Halal Taco dude was a Food Cart that was located in Newark, New Jersey. It was a father and son business that served halal food. They were lacking a mobile app and they needed an alternate method for their customers to order.
User Research
Pain Points
Time
Working professionals have little time to go and wait for an order to be made
Inconvinence
Sometimes the orders are not made correctly, or they are not easily delivered
Language
Sometimes communicating with a server may be a challenge, and makes the ordering process stressful
Personas
Debbie
Age:42
Education: College
Hometown: Kenton
Family: Married, 2 Kids
Occupation: Business Owner
“My days are very busy and I do not need unecessary distractions”
Goals
Grow the business to the point where she can spend more time with her family
Incorporate things into her life that releive stress
Frustrations
Has very little time to go out and get food during work day
Having to stop working to go get food
Getting her order messed up
Debbie is a proud mother of 2 kids and she loves her family. Everything she does is for them. She recently left her job in order to pursue her true passions and start her own business. She is a very hardworking and busy woman who does not need extra things cluttering her day.
Jones
“I wish people and business’s were more accommodating to my language barrier”
Age:25
Education: College
Hometown: Nairobi
Family: Single
Occupation: US ARMY
Goals
Learn valuable skills to open up opportunities for himself
Explore his city and find all the great things it offers
Improving communication skills
Frustrations
Restaurants often rush him to order, leading to miscommunication
Places and apps are not always accessible for me
Jones immigrated to New York City from Nairobi, Kenya. He came over when he was 18 years of age. He has a decent grasp of the English language, but he is a little behind. This has presented several challenges in his day to day life, such as ordering food. Despite this he has embraced the challenge of being in a new country. He is currently serving overseas, but whenever he is back home, he is constantly learning new things.
Ideation
User Flow
A User flow was created to visualize what a user would ideally do if they were attempting to order food with our app. We want to make the process as intuitive as possible, and the user flow is a tool that was used to aid with this goal.
Story Boarding
Both big picture and close up story boards were created. This aids with visualizing and empathizing with the user at all times. It helps in visualizing who your user is and what they need
Designs
Paper Wireframes
The initial stage of the app design was building paper wireframes. the focus was making different versions of the home screens and choosing aspects that seemed to work well
Low Fidelity Wireframes
These are the low fidelity wireframes that were made prior to usability testing, eventually more parts of the user interface were added
These are the low fidelity wireframes that were a result of user feedback. The main alteration was made in the home screen. Also the ability to edit orders was added in the checkout screen.
High Fidelity Mockups
These are all the screens of the finalized high fidelity mock up. Internet sourced imagery and Iconography from Material design is used.
Design Refinement
This project, was my first step into the world of UX. After a few more projects under my belt, I decided to revisit this project and make some modifications to improve upon the initial design, without redoing the whole thing.
Before
After
Looking back on this project, I felt that the original colors were not visually appealing and certain parts of their use lacked consistency. There are 3 different colors originally used in the top bar, and the progress bar has no relation to those colors. The new top bar has 2 main colors and the progress bar contains a shade of both of those colors. The color scheme is also more visually appealing than before. The text in the newer design also uses a shade of the green found throughout the design
Before
After
The bottom menu was revised and new icons were used in the newer design. The back button and the home button served the same purpose, making it redundant. The text on all parts of the new design are a darker shade of the green found in the bottom and top bars. There was also alterations in the emphasis of certain parts of the text. the names of menu items along with the menu section was emphasized. The buttons for the menu items were also rounded along with food images to make it more visually appealing. The text and the backing colors also meet WCAG recommendations.
Before
After
The main issues noted in the initial feedback I received was the toggles for the customizable add ons. They don’t fit into the overall design language, and are a little too complicated. I simplified it to fit into the design language, and to carry on using the same colors found in the rest of the design. Since the back button was removed in the bottom bar, modifications had to be made. That button was moved to the top of the screen next to a more emphasized text for the menu item. The add to cart button was also altered to better fit into the design language. The lines separating the customizable items were initially a shade of grey, but it was also changed to the same shade of green as the text.
Before
After
Once again I continued the same color use that has been present throughout the refined design. I wanted to make this more consistent than the initial design. On top of that I changed the add and subtract item option. The original design is not intuitive and there is no place to see the quantity of the items added. The menu items in the cart can also be used as buttons to go back and edit the item. In the older design it isn’t as clear that those are clickable buttons. In the newer design, the button layout is the same as all the previous clickable items. This was also altered in an effort to maintain consistency.
Before
After
Once again the buttons that allow you to select the order method are altered to be more consistent with the rest of the design. The original design uses 3 different colors in a button, and that was reduced to 2. Once again the back button from the bottom bar was moved to the top. The text at the top was also altered, and the emphasis was reduced.
Before
Before
After
After
My Goal with the redesign was to make the overall design more harmonious and consistent. That goes for the color usage, the basic design of clickable elements, and the emphasis of text. Certain aspects of the original design were simply unintuitive, such as the rewards bar, and the customized menu item toggles. Also the app was lacking a tracking bar, a feature that is commonplace in modern food delivery apps.