...lets collaborate!

 ux research, graphic design, illustration, animation

929-271-5649

 parameters

S’MAC was a concept born by husband & wife team, Sarita & Caesar Ekya. S’MAC (short for Sarita’s Macaroni & Cheese) is located in the heart of Manhattan’s East Village. Since it’s opened its doors in 2006, the family restaurant has developed loyal fans and is recognized in television, print, and other media outlets. SMAC has been awarded by TimeOut New York’s Eat Out Awards and The Stevie Awards for Women in Business .

 

SMAC hasn’t had an updated website since it’s very early development in 2006. The current S’MAC website lacks clear call to actions and focus on core functionality for hungry patrons. It should reflect the restaurant’s in-house experience; a quirky eatery with a tasteful twist on home food.

focus

Our team of 3 designers and 2 developers decided to improve the website so it is responsive to both desktop and mobile platforms. We also pushed to integrate a login feature for their order management system, offer order customization, and improves online ordering, catering, and ease of access. Additionally, we focused on improving navigation and providing a clear call to actions for users.

This project focused on design and development handoff; working alongside developers and bringing them into the design process. 

 process

I performed a heuristic evaluation and our team visited the restaurant directly in order to see how we could best execute this redesign. We then engaged in a team design studio and translated our insights into actionable features. I created a mid-fidelity user flow to conceptualize how users would navigate our prototype and final site. I designed pages for mobile including login, confirmation page, and the hamburger menu. I also created a style guide through Zeplin in order to pass relevant information to developers.

 

My teammate Danielle worked extensively on the desktop format. My classmate Valerie championed the overall design and made sure our pages and styles were cohesive throughout, especially during the transition to our prototypes. 

deliverables

research

design

  • field visit

  • problem statement

  • heuristic eval

  • qualitative interviews

  • feature prioritization matrix

  • MoSCoW map

  • mid-fidelity wireframes

  • high fidelity desktop and mobile prototypes

  • Zeplin file with CSS, styling, and style guide

  • development iterations 

users

Our users consisted of SMAC customers who want general information about the restaurant. It also consisted of patrons who wish to order online, order delivery, customize their items, or order large scale catering. 

In this way, the website needs to provide for goal-oriented users and users browsing for more information.

s'mac

design and development

1) preliminary research

2) design studio

3) high fidelity designs

4) developer handoff

info interviews 

tasty field visit 

We assessed S’MAC through a field visit and ordered via the restaurant’s on-site system to compare with the web experience. 

heuristic evaluation

I performed a heuristic analysis of the existing site using the Abby Method. Heuristics are used as simple and efficient rules of thumb in order to assess a system, but user testing is encouraged as the default method of assessment.

After visiting, speaking

with the patrons, as well as the owners, and performing a heuristic evaluation, we drafted a problem statement. 

We aimed to bridge user needs who visit the website and the company’s goals at large. 

problem statement

How might we increase smac's offerings, like delivery, on the go order, and price point, while replicating their homemade and quirky restaurant experience in the online realm?  

We ordered in-house, and also spoke to restaurant patrons as well as the owners. They expressed their delight over the enticing and relaxed in-restaurant atmosphere and ease of ordering using the management system. 

Both parties wished these positive traits could be extended into delivery, as smac extends to meet demand. 

We also drafted a problem statement in order to bridge user needs who visit the website and the company’s goals at large.

feature prioritization

I created mid-fidelity wireframes in order to asses the user flow for our prototype. This flow outlines the different options within our prototype that users navigate; ordering, catering, signing in, or creating an account.

MoSCoW map

The design segment of our team had a second studio session and created a MoSCow map in order to finalize which features were utilized for our MVP prototypes.

MoSCoW stands for “Must Have”, “Should Have”, “Could Have”, “Won’t Have”

mid-fidelity wireframes

Developer CSS Guide and Components


After designing our prototypes and sharing them with the development team we created a Zeplin file with all of our sketch files nested. 

desktop to mobile 

Here we’ve displayed our responsive desktop to mobile designs. We created consistent features across sizes while formatting them based on the platform.

 

We replaced Who?, What?, Where?, navigation with clear headers. We created three call to actions on the home page based on most immediate user needs.

This program allowed developers to use CSS values and determine the relative size and spacing of our designs.

zeplin style guide

iterations

Our developers created the front and back end of the site. While there were differences in the sizing and development in comparison to our prototype, we adapted as a team. 

I’m happy to report we met our developer’s technical parameters given the time frame. The back and forth between design and development made this project very much a living document.

Example of a design revision in order to keep the site responsive

presentation

next steps

Moving forward we would need to decide if we would formally build the site with a host platform or from the ground up. Both have benefits and drawbacks in terms of flexibility, functionality, available plugins for kitchen workflow, and price point. 

Our aim remained to find the medium between our client’s need and their users! This is the menu selection of our website, (within the parameters of a hosting site). 

development process

We created mobile and desktop prototypes of our designs and a basic responsive website.

We then presented our process and results to General Assembly design and development faculty and a student cohort. 

Working on features with designers and developers present allowed us to check and balance our efforts to create a viable and resource effective product. 

Examples include...

Realizing the difficulty and cost of cryptography for user accounts.

Understanding back end database requirements for custom orders.