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:
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.
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;
}
<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
Header
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;
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;