Challenge
The design challenge that was given was to select an existing website, identify pain points, and propose solutions, and to create an atomic system for the site.
​
My Role
Designer
Tools
XD and Invision
Timeline
2020 Sep - 2020 Nov
Quote
"The simplicity and consistency is the key to successful design."
Results
A consistent, and timely attractive design system
​
An Effective User Experience
Overview
Little Bitty Burger Barn is a Hamburger restaurant in Houston, TX. This design system concept for Little Bitty Burger Barn helps establishes a consistent design system throughout the site. I chose to expand Little Bitty Burger Barn Restaurant with a cart feature to order food through the site and to encourage more users to visit the site. This allows users to save time. With this additional feature, users have the ability to pay online.
Problem
Little Bitty Burger Barn customers are frustrated about the site's functionality because of the inconsistent style, broken links, and order functionality.
Focus one
A consistent website with an atomic system
​
Every part of the website communicates the brand and dining experience with readable text, accessible colors, and quality photographs.
​
Focus Two
Order Feature and Online Payment System
​
Through this system users able to order food items through the site and they are able to do online payments. This helps users to save time. Also, users receive a confirmation number for that order so they can pick up the order when they are ready.
​
​
​
​
​
​
​
​
Process
Overview
Current Experience
The Little Bitty Burger Barn website mainly uses to order food but every time customers order a food item they need to go through the Grubhub site and have to follow their steps.
​
However, there is currently no place to order food items through the Little Bitty Burger Barn site.
​
UX/UI Audit
Unattractive
​
The website looks outdated, clunky, or is using clashing color combinations
The color scheme is the real problem; It's hard to read the white text against the yellow gradient background.
The menu item images are just too small (while they have to be in the focus of the user’s attention)
Neglect to take into account details such as font styles and size
The absence of a clear message about the business
The images are randomly put in different places without any order or formatting
Too much content, which you don’t really want to read
​
​
Lack clear organization
​
Hard to find the information (Menu Items)
Spacing issues, Padding issues, Margin issues
Broken Links: Links on social media doesn’t work, Button links are broken
​
​
No call-to-action
​
The site is not responsive - not mobile-friendly
Unnecessary complexity
​
Personas
Joe Perez, 40 yr
"I hate to go through Grubhub site and order food and it's is time consuming"
Pain Points
It takes time to go through the Grubhub site and order food.
​
Goal
He would like to have a way system that can order food through the site and a quick and easy way to pay online.
​
Jane Roy, 20yr
" I really like the service I get from Little Bitty Burger Barn Restaurant but I don't see that success on their website"
Pain Points
The images are not appealing as the actual delicious food items she gets from the restaurant.
​
Goal
She would like to see a well-designed website so she also can order food through the online site and save time.
​
James King, 30yr
"Because of the busy layout of the site, it's hard to find the place to order food"
Pain Points
Because of the lack of a hierarchy of information, he cannot really find a place to order food.
​
Goal
He would love to have an easy place to order food. Also, he would like to see an organized layout throughout the site, so he doesn't get confused with what he needs to do.
​
Comepetitive Analaysize
.
Burger King
Pros
They have a user-friendly system to order food from their site
Design style is consistent throughout
​
Cons
Image quality is bad
Bold text on buttons effects readability
​
Carl's Jr
Pros
They have a user-friendly system to order food from their site
Design style is consistent throughout
Image quality is good
Accessible colors and font choices
Design
Inspirations
​
​
I did research about well-designed and effective websites that I can get inspiration from. I do like the layout of the Burger high website but I still believe white text on yellow hard to read. The image usage and type tratement are works well on this site.
​
​
.png)
.png)
.png)
Site Map
​
Style Tile
​
Direction 01
Direction 02
Atomic System
​
​
I used an Atomic design system to build the site. Atomic design is atoms, molecules, organisms, and pages concurrently working together to create effective interface design systems. Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Also, this system helps to keep unity and consistency.
​
​
Atoms
The simplest building blocks call as atoms. This includes labels, buttons, backgrounds, images, headings, inputs, colors, icons. We cannot break down these atoms any further. They are abstract. The below image shows the atoms that we wanted to use on the site.
Molecules
When a group of atoms bonds together, they create functional elements and they are known as molecules. This is the smallest fundamental unit of a compound and more concrete than atoms. This is a backbone for complex systems.
Organisms
When a group of molecules grouped together to form relatively complex, unique elements of an interface we call it organisms. This encourages creating standalone, portable, reusable components such as navigation and footer.
Templates/Pages
The next level is the templates. When we combine those organisms, we create a template that can be used on pages. Templates help to keep consistency and to save time. SERL has five main pages such as Home, About, Projects, Publications, and contact. On our site, we use the same template for current publications and past publications.
Wireframes: Mid Fidelity
​
Wireframes: High Fidelity
​
Order Feature
This feature helps users to order food items within the site, so they don't have to go through the Gruphub site process. As a result, it helps to save users time.
.png)
The user has the ability to pick food from 4 main categories. For Example,
Jen picks the Special Burger category.
.png)
When the user clicks on the order Now button it goes to the page that has all the items listed according to that category. For example, Jen picks Western Burger.
.png)
When the user clicks on the Order Now button it goes to the page that includes Burger information such as size. Also, the user has the ability to add like ranch, onions or lettus. For example, Jen picks 1/4lb and add Ranch.
Now, the user can add the item to cart and proceed to check out to pay. Also, user have the ability to cancel the order as well. Jen decide to proceed to check out the Western Burger.
Online Payment System
when users can pay online it helps to save their time. Also, it's a benefit for the restaurant by ensuring that customers pay for their orders. When we have online payment processing, the restaurant doesn't have to worry about customers who place fake orders or never show up to collect their food.
Now, user can add the item to cart and proceed to check out to pay. Also, the user has the ability to cancel the order as well. Jen decide to proceed to check out the Western Burger.
.png)
Then the user can add thier personal information and continue to payment methods.
.png)
The user has the ability to review the order can pay through the card. Also, the user doesn't need to add these information each time they pay. Our site has the ability to save those information and this helps to save time.
.png)
Lastly, the user can get information about the order such an order number and order date.
Functional Requirement Document
Annotation
This document addresses how something is used, why it is part of the design, and where it will take the user. In this document, I have addressed where buttons/links go pages to page and what dynamic elements do such as carousel arrows. Link to the document: FRD (Mobile) FRD (Desktop)
Evaluate
Take Away
​
This project helps me to build my knowledge on web design because of the research I did to find out what makes a great website. With adding a new feature to an existing application I found it was important to make effective design decisions that go hand in hand with the original purpose of the application. Also, I changed myself to go beyond with atomic system and to create a consistent design throughout the site.
Future Steps
​
I will definitely do research about user experience to improve the project. There are certain issues with spacing and sizing on the mobile. Also, I will change the names on the buttons according to their functionality to give a better understanding to users. In the future. I would like to add more features and develop the project to users a better experience.