My second project for General Assembly, involved either creating or redesigning an e-commerce solution for a local Seattle business. For my project, I explored the desktop website of Pel Meni Dumpling Tzar, particularly the menu and ordering process. I reviewed the website's benefits and drawbacks, and came up with a solution to solve any issues it's users might have. I focused on adding a takeout ordering system to their website, and improving the overall menu experience.
Duration: 2 weeks
The first thing I did was visit their current website to get a sense of what the company is all about. They have two locations in Seattle, and offer Russian style dumplings as well as a full bar, and are one of the only restaurants open late in both Fremont and Capitol Hill. The menu, and the website in general, was a bit overwhelming at first glance. It definitely needed some clean-up and organization.
Dumpling Tzar online Menu
Dumpling Tzar in-person menu Capitol Hill
The next step was to figure out what people look for in a restaurant’s website, and what the customers’ interests and preferences are. I could certainly guess, but to avoid biases it’s always good to get real data. After all, I don't speak for every user of the site, and I could end up spending days creating something that nobody else actually wanted. For these reasons, I conducted an online survey and in-person interviews. Below are the results of the most telling questions from the survey.
The vast majority of people visiting a restaurant's website are looking for the menu. The second most important thing is the hours of operation. I would need to make these prominent and easy to find.
Visitors to restaurant websites appreciate an up-to-date menu, easy navigation, and photos of the food. Incorporating these would make the experience more enjoyable overall.
Jeremy DiPalma is a conglomeration of the data I gathered from the interviews I conducted, Jeremy is the typical Dumpling Tzar customer who would use the online ordering system.
Hours on every page
Easy to find menu
No online ordering
The homepage's content is pretty simple, but the visuals are overwhelming. The menu at the bottom was probably meant to be used for mobile, but remains on the desktop version. There is a lot to focus on.
During this phase, I focused on defining the e-commerce product I would create. Typically the scope wouldn’t even be limited to e-commerce, but the project brief specified it must be. Keeping this in mind, I did some research on what people use for ordering food, both takeout and delivery. Doordash came up frequently, as did the Starbucks and Chipotle apps. I compared what each of these offers and how it compares to Dumpling Tzar.
Since there are so many food delivery services in the area, I decided not to focus on delivery. It would require more employees and most likely not be worth the investment. I would instead create an online system for ordering takeout for both the Capitol Hill and Fremont locations.
I created rough sketches of my ideas to get the ideas down on paper without having to bother with precision. This is usually much quicker than using a computer and allows for a freer flow of ideas.
I used Sketch to create the basic layout of the page, and where the content would be most convenient for the users of the site.
After the basic layout was decided, I incorporated the brand colors and chose a more readable font that would still convey the look and feel of the Dumpling Tzar brand. I added imagery to give an idea of what the final product would look like.
I sat down with four different testers in person and got information on both how they felt about the processs, and what their tendencies were when using the prototype.
Having my product on inVision allowed me to send the link to testers remotely. It is not as in depth as in-person testing, but allowed for a larger quantity of testing to be done.
The biggest pain points for our users were:
Many of the users commented that they would like to see prices on the menu items, so I added that.
I also changed the Place Order button to Checkout with an arrow. This made it more clear that there were more steps in the process, and that they could change their order if desired.
The people using the site aren't going to use it perfectly every time. They are going to make mistakes or change their minds. For this reason, I added the ability to edit the order from the checkout screen.