JADE NING


REDESIGN: UMELT WEBSITE



UMelt is a Grilled Cheese fast food restaurant located in Providence.
The website of UMelt offers ordering of food online and delivery.



Jade Ning / Jenny Zhang / Rachel Kim

October 2019





INTRODUCTION



UMelt is a Grilled Cheese fast food restaurant located in Providence. The website of UMelt offers ordering of food online and delivery. We found that the website has some usability problems. In this project, we redesigned several pages of the website to improve their usability, visual design, and responsiveness.





Here are some of the problems we found in the website (click the button at the end of this section to view the original UMelt website):

  • 1. Intuitive Design
  • • Umelt does not have its own website. Its website is a part of larger parent company, which is confusing since it is included with other stores and websites that are not just food.
  • • No navigation menu of its own.
  • • Navigation buttons (i.e. food menu) all over the place; in the middle and bottom of the page.

2. Ease of Learning

• Hours of operation and address are hard to find. They are small and at the very bottom of the page.

• Naming of buttons is not clear.

• The definition of order pickup and order delivery is not clear.


3. Efficiency of Use

• One has to scroll all the way down to see address, hours and paper menu.

• Disorganization of home page.

• Repeated elements on page (e.g. Instagram pics at the very top and bottom).

• Too many links to social media; distracts from the actual food ordering.


4. Memorability

• No clear navigation menu, so it is hard to memorize what content is on the page


5. Visual Design

• Logo really big in the middle of the page, looks like you can click on it but it’s just an image.

• Very black. The dark color doesn’t fit in with its concept of so-good-you-melt grilled cheese.

• Photos of food unappetizing.

• The website does not create a sense of hierarchy. There are so many colors on the webpage that it is hard for people to have an overall impression on it.



WIREFRAMES & NAVIgation flow chart



In order to solve the usability problems, we created a set of wireframes.

Compare to the original website, our redesigned interface, these are some changes we made:


1. Intuitive Design

• Umelt has its individual website that is separated from the restaurant group website so that the information on this website is less complicated.

• A navigation bar is added, which brings the navigation buttons together.

• Better organization and naming of tabs- combining order pickup and order delivery into one “order” tab


2. Ease of learning

• Important information such as menu, hours and address can be easily found on the top part of the page


3. Efficiency of Use

• The users can find almost all the information they need on the navigation bar at the top of the page.

• Unnecessary repeated elements were deleted


4. Memorability

• The navigation bar will leave a brief impression for the users on the structure of the website





User testing



We conducted a Wizard of Oz evaluation with our wireframes. The Wizard of Oz is a simulation of how the users will use the interface without actually developing the interface. We printed our wireframes, and then make cutouts of interface elements that change when interacted with (e.g., menus, sliders, interactive components, tabs, panels that change) so we can simulate interaction.





User 1

  • When the user was asked to order online, she hesitated between the button “menu” and “order”. She was asked to order a combo, so she went directly to the combo page. Then she found that there are only options for sides and drinks in this page, which means she had to also go to the “grilled cheese” page to order a grilled cheese separately to buy a combo. While checking out, she found that she couldn’t remove items in the cart.


User 2

  • The user was asked to find the Social Media and Contact Us page. He was confused by the purpose of the home page and expected images to send him to a separate link. The amount of writing on the home page was dense and hard to understand. The user reads through the navigation bar from left to right. The user clicked on contact us and filled in his information and submitted. After observing the user, there was confusion in terms of naming and information. The contact us page was straightforward, but some information, such as hours could be more prominent in the home page, as suggested by the user.


User 3

  • The user was instructed to look at the menu and then order one item from the Grilled Cheese or Combo section. She smoothly found where she is supposed to go by looking at the tabs in the navigation bar. She hesitated at the menu since it is divided into three columns with all three columns having the same items. She had to look twice at how the menu is organized before she was able to decide what she wanted to order. Since some elements are blank such as the price in the cart page, the user thought she had to fill out something. From this user, I learned that naming and phrasing really matters. The first thing she did was read things on the page and noticed inconsistencies immediately. From this, I will focus on text where the user interacts with the interface the most, such as instructions and names of food on the menu.


We adjusted our wireframes according to the feedbacks we got in the Wizard of Oz evaluation, and made visual design for the website based on the new wireframes.



VISUAL REDESIGN



In the visual redesign of this website, we used a yellow color palette to make the website look bright and clean. The bright colors work better for a grilled cheese store compared to the original dark background. We also used aesthetically pleasing high-resolution photographs. The typefaces used in the design creates a hierarchy: we used larger Futura Bold for titles, while the body texts are in smaller Cloud Regular. Both types are legible at a relatively small size so that the website has a good readability. We employed grids in both pages, especially in the order page so that the pages look clean and organized.





Homepage



Order grilled cheese



Jade Ning



jning01@risd.edu