Hero Text

-SUSHI FUZE-

Objective

Sushi Fuze is a speculative family-run restaurant in the process of converting their single outlet into a chain. This expansion would fill multiple new storefronts in counties adjacent to the original location, followed by plans of spreading further east if the first crop of stores prove successful. The following interactive prototype is the UX/UI design concept meant to serve as the restaurant chain’s new website.

Tools Used:

Sketch

InVision

Marvel

Zeplin

GitHub

Prepros

OVERVIEW

Founded in 1967 as ‘Sushi’ by an entrepreneurial couple, this Mom and Pop business flourished as a local staple for years, but had reached a plateau. They have since passed the mantle down to their three sons, who carry on this family-run business for a new generation. Their tenure had reinvigorated business at the original restaurant, to the point where expansion into new markets became a viable option.

Eventually, they were left with one last issue to be addressed, their weak digital footprint. Any chain worth their salt requires a strong online presence to back it up, and the best method to tackle that was with a new website. This meant designing an online user experience centered on intuitive navigation, up-to-date web standards and best practices, user interface visual hierarchy & grouping, minimizing the burden of working memory (saved user info/favorite dishes), managing and directing user attention, outlining and prototyping targeted user flows based on the needs of varied personas and scenarios, and more. This would also be in sync with their new brand identity, target market and business strategy.

PROJECT PROCESS

1. PROBLEMS

Small Brand Reach

Recognition for the restaurant ‘Sushi’ was limited to a base of locally driven traffic, built up over the years through community word-of-mouth. This support was not a guarantee following the expansion to a multi-location chain, so a broader appeal became necessary for those unfamiliar with them.
Outdated Website/Poor UX

The old website was a relic, last updated in 1998, and did not meet modern web standards. Lacking responsive design, riddled with broken links, dated UI, and usability issues abound, this website needed to be redesigned from the ground up.
Encumbered Ordering System

A backed up phone line during peak business hours was a frequent issue. This deterred possible customers attempting order placement and increased the potential of human error for swamped employees. An additional method of placing orders, with POS (Point of Sale) software integration, needed to be provided.

2. BUSINESS NEEDS

New Online Brand Identity

To update the restaurant’s appeal with a modern cosmopolitan identity, tapping into a larger customer base, while increasing the digital footprint. The old generic name ‘Sushi’ was swapped out for ‘Sushi Fuze’, to better reflect a contemporary restaurant chain that is host to a fusion of dish types.
Responsive Design/User Flow

To design a site and app that smoothly scaled across a myriad of devices and screen dimensions. Also, developed a streamlined sitemap that minimizes the number of steps required to accomplish a goal.
Order Efficiency and Management

To provide an additional method for customers to request take-out/delivery by implementing an online ordering system. This efficient alternative offers a checkout process with user-friendly task navigation and does not tax the working memory.

3. RESEARCH

Information Architecture and Sketches

First, I created two slightly different maps to outline the navigational layout. The information architecture for the apple watch app served as the starting base, which the second map expanded upon with a little more depth for the general website. I then drilled further down into interface level detail with some brainstorming sketches.

*Apple Watch

*Mobile

*Sketch 1

*Sketch 2

Personas and User Journey

Constructing several character personas as points of reference, I used these summaries to explore the potential needs of users. I then narrowed down to one persona and conducted a user journey to explore their possible pleasure/pain-points, touch-points, and thoughts as they navigate through all stages of the website. This evaluation helped shine a light on potential usability issues I may have overlooked.

Profile 1

Rachel

Details: In a relationship, skydiving instructor, 28 years old, thrill seeker, lives in an unincorporated area.

Quote: “I want someplace that offers light meals for lunch, but can also provide formal dishes for dinner events.”

Notes: Rachel loves the Sushi Fuze branded prepackaged shrimp wraps from the local market, yet she enjoys having meals delivered to as well. Her apartment complex is hidden down a poorly marked side street and is easy to miss, so she would like to track the delivery. She would also appreciate quick access to her favorite dishes when ordering online.

Health consciousness: High
Time constraints: Medium
Meal variety: High
Digital proficiency: Medium
Hobbies: Rock climbing, swimming
Spends most time: Small airport runway
Social networks: Pinterest, Facebook

Profile 2

Adam

Details: Married, brand consultant, 41 years old, quality conscious, lives in the suburbs.

Quote: “I want a dining environment where I can hold business casual meetings with clients.”

Notes: Adam is searching for a new contemporary restaurant that works as an informal public gathering spot with his colleagues and clients. The laid back nature of meeting at the restaurant, as opposed to the boardroom, helps set the tone for the nature his tasks. Yet, Adam remains concerned about accommodating for larger groups and is determined to avoid table wait times that could encroach into the schedules of others accompanying him. Therefore, he prefers to set reservations and place some orders in advance for early evening meetings, taking into account the dinner rush.

Health consciousness: Low
Time constraints: Medium
Meal variety: Medium
Digital proficiency: High
Hobbies: Reading, blogging
Spends most time: Meetings
Social networks: LinkedIn, Google+

Profile 3

Mike

Details: Single, night shift and on-call surgeon, 32 years old, efficient, lives downtown.

Quote: “I want a quick meal I can pick up on my way to work.”

Notes: Picking up a to-go meal is convenient for Mike, since the restaurant is on his way to work. With erratic work hours, an efficient and reliable service are highly appealing traits make Mike a frequent customer. He has very conservative pallet, in that he sticks with only a handful of familiar meals, opting not to explore different dishes.

Health consciousness: High
Time constraints: High
Meal variety: Low
Digital proficiency: Medium
Hobbies: Biking, basketball
Spends most time: Hospital
Social networks: LinkedIn, Facebook

Goal: Order dinner online and have it delivered to her apartment.
.
Scenario: Busy finishing up work she brought home from the office.
.
Constraint: With her working memory preoccupied, Rachel wants to use as little mental energy possible.

Mood

4. DELIVERABLES

Wireframe and Responsive Design

Adhering to a mobile first approach, I wireframed the website and outlined when layout specifications would responsively adapt across device screens of varying dimensions.

UI and Digital Assets

With a UX structure in place, I designed UI and digital assets that adhered to the visual brand identity. After importing these deliverables into a copy of the wireframe, they were lain over the structure and received additional size adjustments.

Interactive Prototype

Finally, I exported the UI assets from Sketch to InVision for prototyping, then transferred to Marvel for embedding purposes. This interactive model can then receive usability testing for additional user experience research and iterative refinements.

5. USABILITY TESTING

Example Navigation Task: "Find something that would make for a nice present."

Step 1

90% of users selected correct button.

10% of users selected incorrect button.

Step 2

83% of users selected correct button.

17% of users selected incorrect button.

Step 3

100% of users selected correct button.

0% of users selected incorrect button.

Step 4

93% of users selected correct button.

7% of users selected incorrect button.

STYLE GUIDE

My front-end style guide remains accessible throughout the design process for stakeholders to review, while my component markup and visual specifications are available to the development team for implementation.

BUTTONS

               
<button type="button" class="button-confirm">BUTTON</button>

               
.button-confirm {
    width: 16.15rem;
    height: 4.87rem;
    border: 0;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 6px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    background: #EFB961;
    box-shadow: inset 0 -4px 0 0 #BC862E;
    user-select: none;
}
@media (min-width: 45em) {
    .button-confirm:hover {
        background: #FFD590;
        box-shadow: inset 0 -4px 0 0 #EFB961;
    }
}
.button-confirm:active {
    background: #BB914C;
    box-shadow: inset 0 4px 0 0 #885E19;
}

               
<button type="button" class="button-confirm-long">BUTTON</button>

               
.button-confirm-long {
    max-width: 100%;
    width: 32.8rem;
    height: 4.2rem;
    border: 0;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 6px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    background: #EFB961;
    box-shadow: inset 0 -4px 0 0 #BC862E;
    user-select: none;
}
@media (min-width: 45em) {
    .button-confirm-long:hover {
        background: #FFD590;
        box-shadow: inset 0 -4px 0 0 #EFB961;
    }
}
.button-confirm-long:active {
    background: #BB914C;
    box-shadow: inset 0 4px 0 0 #885E19;
}

                
<button type="button" class="button-contact">
    <img class="button-contact-image" src="./email_(button).svg"><br>
    <span class="button-contact-text">BUTTON</span>
</button>

               
.button-contact {
    width: 16.8rem;
    height: 8.7rem;
    border: 0;
    border-radius: 12px;
    font-family: Helvetica;
    font-size: 32px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.16px;
    color: #ffffff;
    background: #EFB961;
    box-shadow: inset 0 -4px 0 0 #BC862E;
    user-select: none;
}
@media (min-width: 45em) {
    .button-contact:hover {
        background: #FFD590;
        box-shadow: inset 0 -4px 0 0 #EFB961;
    }
}
.button-contact:active {
    background: #BB914C;
    box-shadow: inset 0 4px 0 0 #885E19;
}
.button-contact-image {
    width: 5.4rem;
    height: 4.3rem;
    pointer-events: none;
	user-select: none;
}
.button-contact-text {
    font-weight: bold;
	letter-spacing: 6px;
    display: block;
	margin-top: .5rem;
	text-transform: uppercase;
    font-family: Helvetica;
    font-size: 1.7rem;
    line-height: 1.16;
    text-align: center;
    color: #ffffff;
}

     
                
<button type="button" class="button-alt">
    <img class="button-alt-image" src="./nutrition_(button).svg">
    <span class="button-alt-text">Button</span>
</button>

               
.button-alt {
    display: inline-flex;
    width: 15.9rem;
    height: 5.8rem;
    border-radius: 4px;
    background: #BFBFBF;
    box-shadow: inset 0 -4px 0 0 #8C8C8C;
    padding: 0;
    margin: 0;
    border: 0;
}
@media (min-width: 45em) {
    .button-alt:hover {
        background: #D9D9D9;
        box-shadow: inset 0 -4px 0 0 #C0C0C0;
    }
}
.button-alt:active {
    background: #A6A6A6;
    box-shadow: inset 0 4px 0 0 #737373;
}
.button-alt-image {
    width: 5.8rem;
    height: 5.8rem;
    pointer-events: none;
    user-select: none;
}
.button-alt-text {
    align-self: center;
    width: 130px;
    font-family: Helvetica;
    font-size: 1.7rem;
    font-weight: bold;
    color: #000000;
    line-height: normal;
    user-select: none;
    text-align: left;
}

     
                
<button type="button" class="button-main">
    <div class="button-main-outer">
        <div class="button-main-inner"></div>
    </div>                  
    <span class="button-main-text">Button</span>
</button>

               
.button-main {
    display: inline-flex;
    max-width: 45em;
    width: 100%;
    height: 8.8rem;
    background: #ebebeb;
    box-shadow: inset 0 -4px 0 0 #B8B8B8;
    border: 0;
    user-select: none;
}
@media (min-width: 45em) {
	.button-main:hover {
        background: #F8F8F8;
        box-shadow: inset 0 -4px 0 0 #ebebeb;
	}
}
.button-main:active {
    background: #D2D2D2;
    box-shadow: inset 0 4px 0 0 #9F9F9F;
}
.button-main-outer {
    min-width: 4.6rem;
    width: 4.6rem;
    height: 4.6rem;
    background-color: #FFFFFF;
    transition: border-width 0.3s ease-in-out;
    border: solid .9rem #0078ff;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    margin-left: 4%;
}
@media (min-width: 45em) {
    .button-main:hover .button-main-outer {
        transition: border-width 0.3s ease-in-out;
        border: 2.3rem solid #0078FF;
    }
}
.button-main-text {
    width: 335px;
    font-family: Helvetica;
    font-size: 3rem;
    line-height: 0.82;
    color: #000000;
    align-self: center;
    margin-left: 5%;
    text-align: left;
}

     
                
<div class="guide-element button-amount-container">  
    <button type="button" class="button-amount">
        <img class="button-amount-image" src="./amount_negative_v3.svg">
    </button> 
    <button type="button" class="button-amount">
        <img class="button-amount-image" src="./amount_positive_v3.svg">
    </button> 
</div>

               
.button-amount {
    width: 39.2px;
    height: 38.8px;
    background-color: #037aff;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    justify-content: center;
}
@media (min-width: 45em) {
    .button-amount:hover {
        background: #1D94FF;
    }
}
.button-amount:active {
    background: #0061E6;
}
.button-amount-image {
    pointer-events: none;
    user-select: none;
}
.button-amount-container {
    width: 132.5px;
    justify-content: space-between;
}

     
                
<div class="guide-element button-decision-container">  
    <button type="button" class="button-decision" id="button-approve">
        <img class="button-approve-image" src="./approve_(button).svg">
    </button> 
    <button type="button" class="button-decision" id="button-disapprove">
        <img class="button-disapprove-image" src="./disapprove_(button).svg">
    </button> 
</div>

               
.button-decision {
    width: 91px;
    height: 91px;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    justify-content: center;
}
.button-decision-container {
    width: 303px;
    justify-content: space-between;
}
#button-approve {
    background-color: #4ED763;
}
#button-approve:hover {
    background-color: #68F17D;
}
#button-approve:active {
    background-color: #35BE4A;
}
#button-disapprove {
    background-color: #F92C34;
}
#button-disapprove:hover {
    background-color: #FF464E;
}
#button-disapprove:active {
    background-color: #E0131B;
}
.button-approve-image,
.button-disapprove-image {
    width: 60%;
}

     
                
<button type="button" class="button-delete">
    <img class="button-delete-image" src="./delete.svg">
</button>

               
.button-delete {
    width: 39px;
    height: 39px;
    border: 0;
    border-radius: 3px;
    background: #b7b8b9;
    display: inline-flex;
    justify-content: center;
}
.button-delete-image {
    pointer-events: none;
    user-select: none;
    width: 2.5rem;
    height: 2.5rem;
}
@media (min-width: 45em) {
    .button-delete:hover {
        background: #d1d2d3;
    }
}
.button-delete:active {
    background: #9e9fa0;
}

     
            
<button type="button" class="svg-button-edit">  
    <svg height="39" viewBox="0 0 39 39" width="39" xmlns="http://www.w3.org/2000/svg"><path d="m37.9296951 1.0707236c1.4282537 1.42824079 1.4258923 3.74320963 0 5.17145041l-1.7234261 1.72341055-5.1726398-5.17145041 1.7234262-1.72341055c1.4281775-1.42702202 3.744386-1.42824079 5.1726397 0zm-25.8538293 20.6832879-1.7222073 6.8936422 6.8937045-1.7234105 17.2354798-17.23532426-5.1726397-5.17145041zm17.1747696-3.3849687v15.7558953h-24.37552949v-24.37530941h15.75718019l4.873811-4.87506188h-25.5060971v34.12543319h34.1257413v-25.5072379z" fill="" transform=""/></svg>
</button>

            
.svg-button-edit {
    fill: #999999;
    border: 0;
    background: 0;
}
@media (min-width: 45em) {
    .svg-button-edit:hover {
        fill: #B3B3B3;
    }
}
.svg-button-edit:active {
    fill: #808080;
}

FORMS

                
<form class="form-element">
    <div class="guide-radio">
        <input type="radio" id="radio-1" name="takeout">
        <label for="radio-1">Delivery</label>
    </div>
    <div class="guide-radio">
        <input type="radio" id="radio-2" name="takeout">
        <label for="radio-2">Pick Up</label>
    </div>        
</form>

               
.guide-radio input[type="radio"] {
    opacity: 0;
}
.guide-radio label {
    position: relative;
    display: inline-block;
    padding-left: 3.87rem;
    font-style: oblique;
}
.guide-radio label::before,
.guide-radio label::after {
    position: absolute;
    content: "";
    display: inline-block;
}
/*Outer-box*/
.guide-radio label::before {
    height: 3.17rem;
    width: 3.17rem;
	border: 2px solid #587c8a;
	box-shadow: inset 0 2px 3px 1px #0000001f;
    border-radius: 8px;
    left: 0;
}
/*Mark*/
.guide-radio label::after {
    width: 10px;
    height: 10px;
    background-color: #000000;
    border-radius: 4px;
    top: 11px;
    left: 11px;
}
/*Hide the mark by default*/
.guide-radio input[type="radio"] + label::after {
    content: none;
}
/*Unhide the mark on the checked state*/
.guide-radio input[type="radio"]:checked + label::after {
    content: "";
}
.guide-radio {
    width: 11.8rem;
    height: 3.17rem;
    margin-right: 2rem;
}

Street Address

                
<div class="form-element">
    <label for="address" class="input-label">Street Address</label>   
    <input id="address" class="input-text" type="text" placeholder="123 Main Drive">
</div>

               
.form-element {
    flex-grow: 3;
    max-width: 453px;
    width: 100%;
}
.guide-section input[type=text] {
    max-width: 558.2px;
    width: 100%;
    height: 3.59rem;
    border: 2px solid #587c8a;
    box-shadow: inset 0 2px 3px 1px #0000001f;
    border-radius: 6px;
    font-size: 1.76rem;
    background-color: #ffffff;
    margin-bottom: 0;
    padding-left: 1.6rem;
}
.guide-section input[type=text]:focus {
    background-color: #fafafa;
    box-shadow: inset 0 2px 5px 3px #0000001f;
    outline: none;
}

Card Number

                
<div class="form-element">
    <label for="secure" class="input-label">Card Number</label>
    <input id="secure" class="input-secure" type="text" placeholder="0000 0000 0000 0000">
</div>

               
.form-element {
    flex-grow: 3;
    max-width: 453px;
    width: 100%;
}
.guide-section input[type=text] {
    max-width: 558.2px;
    width: 100%;
    height: 3.59rem;
    border: 2px solid #587c8a;
    box-shadow: inset 0 2px 3px 1px #0000001f;
    border-radius: 6px;
    font-size: 1.76rem;
    background-color: #ffffff;
    margin-bottom: 0;
    padding-left: 1.6rem;
}
.guide-section input[type=text]:focus {
    background-color: #fafafa;
    box-shadow: inset 0 2px 5px 3px #0000001f;
    outline: none;
}
.input-secure {
    background-image: url('secure.svg');
    background-size: 1em;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: 95%;
    padding-left: 5%;
    padding-right: 15%; 
}

Your Email

                
<div class="form-element">
    <label for="email" class="input-label">Your Email</label>
    <input id="email" class="input-email" type="text" placeholder="name@service.com">
</div>

               
.form-element {
    flex-grow: 3;
    max-width: 453px;
    width: 100%;
}
.guide-section input[type=text] {
    max-width: 558.2px;
    width: 100%;
    height: 3.59rem;
    border: 2px solid #587c8a;
    box-shadow: inset 0 2px 3px 1px #0000001f;
    border-radius: 6px;
    font-size: 1.76rem;
    background-color: #ffffff;
    margin-bottom: 0;
    padding-left: 1.6rem;
}
.guide-section input[type=text]:focus {
    background-color: #fafafa;
    box-shadow: inset 0 2px 5px 3px #0000001f;
    outline: none;
}
.input-email {
    background-image: url('email_(form).svg');
    background-size: 1em;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: 16px;
    padding-left: 4rem !important;
}

                
 <form class="form-container">      
    <div class="form-element">
        <label for="first-name" class="input-label">First Name</label>
        <input id="first-name" class="input-name" type="text" placeholder="Jon">
    </div>
    <span class="form-filler"></span>          
    <div class="form-element">
        <label for="last-name" class="input-label">Last Name</label>
        <input id="last-name" class="input-name" type="text" placeholder="Smith">
    </div>   
</form>

               
.form-container {
    display: flex;
    margin-bottom: 0;
    justify-content: space-between;
}
.form-element {
    flex-grow: 3;
    max-width: 453px;
    width: 100%;
}
.guide-section input[type=text] {
    max-width: 558.2px;
    width: 100%;
    height: 3.59rem;
    border: 2px solid #587c8a;
    box-shadow: inset 0 2px 3px 1px #0000001f;
    border-radius: 6px;
    font-size: 1.76rem;
    background-color: #ffffff;
    margin-bottom: 0;
    padding-left: 1.6rem;
}
.guide-section input[type=text]:focus {
    background-color: #fafafa;
    box-shadow: inset 0 2px 5px 3px #0000001f;
    outline: none;
}

TYPOGRAPHY

                       
Font-size: 47px; Font-weight: bold; Font-family: helvetica;

Body and Feedback

                       
Font-size: 26px; Font-weight: normal; Font-family: helvetica;

Options

                       
Font-size: 19px; Font-weight: normal; Font-family: helvetica;

Checkout

                       
Font-size: 18px; Font-weight: bold; Font-family: helvetica;

CONFIRMATION BUTTON

                       
Font-size: 18px; Font-weight: bold; Letter-spacing: 6px; Text-transform: uppercase; Font-family: helvetica;

Form Placeholder

                       
Font-size: 18px; Opacity: 0.26 Font-weight: normal; Font-family: helvetica;

Form Microcopy

                       
Font-size: 18px; Font-weight: oblique; Font-family: helvetica;

Checkout Sub

                       
Font-size: 15px; Font-weight: normal; Font-family: helvetica;

                       
Font-size: 14px; Font-weight: normal; Font-family: helvetica;

COLOR PALETTE

#000000
#ebebeb
#ffffff
#adbec6
#587c8a
#33495d
#4a4a4a
#0078ff
#5952df
#4ed763
#fe9400
#efb961
#ff9a99
#ff6b6d
#f92c34
#f33940
#ff0071

ICONS

Menu Icons

appetizers
sake
soup
fried_rice
specials
entrees
beer
salad
noodles
wrap
sides
wine
dumpling
vegetables
grill
drinks
juice
sushi_roll
new_profile
favorite
history
dollar
pin
door
fruit_smoothie

Option Icons

profile
locations
gift_cards
contact

Header Icons

menu
logo
cart

Footer Icons

facebook
instagram
twitter
pinterest

Other Icons

phone (button)
phone (form)
email (button)
email (form)
nutrition
secure

SVG ANIMATIONS

Logo

Map

Tracker

CONTACT

Feel free to get in touch, view my resume, or see more content.

Matt Breithaupt UX/UI Design Portfolio