Matt Breithaupt UX/UI Design Portfolio

loader icon

Hero Text       UX/UI Design

Main above fold image
triangle 1

-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

triangle 2
past restaurant

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.

triangle 3

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.

arrows
*Apple Watch
sitemap1
*Mobile
sitemap2
*Sketch 1
Sketch1
*Sketch 2
Sketch2

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.

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

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+

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

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.

wireframe
responsive sizes

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.

digital assets

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."

90% of users selected correct button.

10% of users selected incorrect button.

heatmap

83% of users selected correct button.

17% of users selected incorrect button.

heatmap

100% of users selected correct button.

0% of users selected incorrect button.

heatmap

93% of users selected correct button.

7% of users selected incorrect button.

heatmap

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;
}
                  
            
                
<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;
}
                  
            
                
<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%; 
}
                  
            
                
<div class="form-element">
    <label for="email" class="input-label">Your Email</label>
    <input id="email" class="input-email" type="text" placeholder="[email protected]">
</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

  • 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
  • profile
  • locations
  • gift_cards
  • contact
  • menu
  • logo
  • cart
  • facebook
    facebook
  • instagram
    instagram
  • twitter
    twitter
  • pinterest
    pinterest
  • 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.