MOMOYA NYC

RESPONSIVE UI DESIGN

Artboard (1) Copy 4.jpg

TOOLS USED

 
toolls.png
 

MY ROLE: UI Designer

DESIGN SPRINT: 2 Weeks


THE CLIENT:

Momoya is a traditional Japanese restaurant with a focus on sushi and sashimi. With two locations in NYC, they have been a staple in their respective neighborhoods.

THE TASK:

 
 
 
 
 
 

THE PROBLEM:

Our team was tasked with creating a conceptual redesign for Win Son’s website to improve the site’s usability and UI. In the latter half of our design sprint, we worked with a team of web developers to bring the redesigned website to life.

Parameters and Limitations

The scope of this project was limited to a visual UI redesign of Momoya’s website, thus formal research was not conducted in this design sprint.

Our UI team created detailed mock-ups for 3 site viewports (mobile, tablet, and desktop view) and 1 desktop prototype for the purposes of creating a responsive site. The designs were handed off to a team of developers who are currently still in the process of developing the redesigned product.

 

Momoya is a traditionalJapanese restaurant serving authentic cultural cuisine but their website does not visually convey their mission or personality.

How might we help Momoya align their web presence to their brand that is reflective of the type of food they  serve while providing customers more information?


THE DESIGN

 

CURRENTLY

  • Current site has no global navigation.

  • No links to social media.

  • Poor visibility for menu.

  • Multiple external links.

  • Low visibility for hours and addresses.

 
ezgif.com-video-to-gif.gif
 
 

DESIGNING WITH DEVELOPERS

Our UI team led a design studio session with the team of developers in participation. The session was comprised of 3 rounds of rapid, collaborative sketching accompanied by rounds of individual feedback. Together, we created a final sketch combining multiple sketches to represent our minimum viable product (MVP) which would also be the basis for initial wireframes and prototype.

 

BUILDING A RESPONSIVE SITE

To develop a responsive website, we created designs for three different viewports: mobile, tablet, and desktop. Designs for all viewports featured a sticky header/navigation on top and a single scrolling page.

MAJOR UI CHANGES:

• The mobile and tablet viewports have hamburger menus. Once clicked, an overlay appears with navigational options.
• Vibrant hero images in carousel gallery
• Made all links internal links
• Switching from location to location is done with a slider

 
 
 
 

HAND OFF TO DEVELOPERS

  • Trello Board detailing agile sprint plan

  • Assigned user stories

  • High-fidelity wireframes

  • Uploaded wireframes to Zeplin

  • InVision Prototype

  • Assets folder containing icons & images used

  • In-person stand-ups and communication through Slack

NEXT STEPS

  • Conduct a round of usability testing to test site functionality

  • Integrate an internal reservations system

  • Allow extra time for the developers to finish coding the site

  • Continue collaborating with the developers’ team until project completion