Freshening Up an Old Look: East Side Pockets Website Redesign
One of my favorite restaurants in Providence, Rhode Island is mediterranean spot, East Side Pockets. Unfortunately, their current website in no way reflects the amazing quality of their food. I thought to give it a fresh new look so that its online presence can reflect just how delicious their food is.
The Design Process
I first created wireframes to see how I wanted to restructure the new website.
Each screen is designed to fit the width and height of the browser window. The user goes between the main screens by either scrolling or clicking on corresponding menu item at the top of the sticky header. The footer also remains sticky for every screen.
The infinite scroll feature of the site was kept from the original, but it has been modified so that it is clear when the user is transitioning to a different section of the website. Before, the sections were sometimes longer than the window height of the browser. This broke the infinite scroll idea, and made the website feel more like a one long page site, instead of having hierarchy.
When thinking about the new site, I kept these ideas in mind:
Intuitive Design: The design of the old website was already similar to many familiar sites. It had one long page that served as their version of an infinite scroll feature. The header menu was sticky at the top of the screen, which allowed the user to know where they were on the page in relation to the site as a whole.
Ease of Learning: On the old website, it was hard to distinguish the different sections of the site, because there was no division of the page, and each section was a different length. In the new design, each section is made to take up the same amount of space, so that when the user scrolls, the next section will fill the entire new screen. The sticky menu items also correlate to the order of the sections on the main page. When the user is viewing a specific section, the color of the text on the menu will change to show it’s being selected.
Efficiency of use: The order of the pages on the old website needed to be changed in order to improve the efficiency of use. Often times most users visit a restaurant website to look at the menu, find the location of the restaurant, or order food. While the initial landing page had buttons supporting each of these things, when the user scrolls, these options don’t appear in the same order. With the design of the new site, the menu is the first thing that the user sees upon scroll. The fixed footer of the site also offers information about how to contact the restaurant, their hours of operation, and their address.
Memorability: With the old site, the user may forget where certain information was given because of its muddled quality. On the new site, the sections are clearly defined, so the user will know where to look for specific information.
Error frequency and severity: With the old website, everything was quite self-explanatory for the user. This was translated into the design of the new site.
Subjective satisfaction: The old website was not very aesthetically pleasing. Often times the text was hard to read due to the color and it being layered over images. In the new site, text and imagery are kept separate, and the site has more hierarchy through the use of a grid system, making the experience easier and clearer for users.
User Testing with Wireframes
I conducted a couple of Wizard of Oz style user tests to see if the new navigational flow of the website was successful.
From the tests, I’ve learned that users are more likely to look for items to click, than to assume that they must scroll. Had there been a small scroll bar, or ellipses, to show that there was more to the page, the users may have chosen to scroll down instead of click the menu items. I also learned that some users expect to be led to an external page when clicking an icon for a known website, like “Yelp.” It was unexpected for the user that they were able to submit a review directly from the current website. The user did not seem upset or confused by this, though.
Final Visual Design and Mobile Screens
