With my first project, we lightly stepped down onto the tip of the iceberg that is UX. With this second project, we iterated on the first project by going through the process another time, but digging in even deeper to add more layers to our work and understanding.
This was our second project and spanned two weeks. The project overall increased in difficulty and challenged me much more, in a good way. Our brief was to design an online pop up shop for an e-commerce website with a persona in mind. We were given three personas and asked to select one persona to focus on, while keeping the other two in mind. I was assigned Eataly’s website and of the three personas, I selected John: a single father who works as an art teacher.
Now that the stage has been set, onto the bigger story at hand.
Discovery + Research
Initial Research
First off, I knew that I needed context before I could start asking questions. I watched users interact with the current website to get a feel for how a user might navigate the site and to identify general pain points. While I had a main persona, John, to work with, I knew that my designs would also need to fit the other personas’ needs.
My main takeaways from these initial tests are as follows:
- Users understood that they could buy food, but felt overwhelmed by the amount of content
- Users found the main navigation to be misleading
- Filters did not help personalize searches
- Users loved the one page checkout, but wanted it to be even easier
Site Mapping + Card sorting
One of our main tasks for this project was to create a new site map for our assigned e-commerce website, but even more so it was to focus on overall hierarchy and categorization.
I knew from my initial research that the navigation needed an update, so card sorting and working through a new site map was a good place to start.
We were assigned ~100 products from our e-commerce websites and were asked to use these products to create a new navigation. I set to work first with three open card sorts.
After these open card sorts I sensed a pattern amongst my users. Next up, I created 7 main categories for the new navigation bar, with the aim of a more natural feel to it.
I iterated on my navigation 3 times while watching users go through a closed card sorting before settling on categories that felt natural to users. Once I set these category titles, I had 5 more users undertake a closed card sorting.
I chose to inundate myself with data briefly to force myself to make decisions based on 80% of my users to ensure I was focusing on them instead of the edge cases.
After completing my closed card sorting exercises and sifting through the data, I felt confident that my new navigation would work for the majority of users on the site.
Feature + Heuristic Analysis
Eataly has plenty of competitors here in NYC, a foodie mecca. I chose a few competitors to get a sense of best practices and what sort of opportunities Eataly had in improving the features on their website. So, I completed a feature and heuristic analysis to identify these best practices.
This feature analysis highlights areas of growth for Eataly — most notably recipes. Eataly sells food and only provides cookbooks on their websites. If they were to highlight recipes and their ingredients, that could drive more users to pair items together for purchases.
Here is a heuristic analysis based on Abby the IA’s principles. As I filled this out, I acted as if I were John, my single dad persona and the scale was 1–3. For reasons I identified earlier on, Eataly’s website wasn’t exactly clear and easy to navigate. However, Eataly does provide more value as they provide an abundance of specialty Italian goods all in one shop and is an international brand.
User Flows
My persona, John, is an art teacher and loves to make things. I decided the story I wanted to tell was how he wanted to find ingredients on Eataly’s pop up website to cook a meal with his daughter.
I took some time and roughly drew out my initial user flow as the base for upcoming sketching sessions.
Sketching
Preliminary Sketching
Once I completed the Discover + Research portion, I began sketching. I started by looking at the home page layout of Eataly and sketched out a few ideas from there on a whiteboard.
From left to right, the sketch on the left is the current product page on the Eataly website. I knew that I wanted to add recommended items and reviews as they are features that all 3 of our personas preferred when shopping online.
I made notes for myself as I went through my iterations to show that I updated between iterations to keep track of how each screen evolved.
Prototyping + Usability Tests
After whiteboarding a few iterations of the Eataly website, I moved my sketches to Sketch. There, I iterated again on my wireframes another time and created a prototype on InVision.
Eataly v1
Once my prototype was ready, I asked 4 users to act as my persona John and these are my findings:
- 100% of users expressed the frustration that they could not search by recipes and had to search for a product first
- 50% of users said they would go to the product page directly and skip the quick view option
- 50% of users did not like entering their billing, shipping and credit card information up front before seeing the checkout page
- 100% of users wanted to checkout as a guest
Eataly v2
Between v1 and v2, I added the option to go to either the product page or quickview from the category page, added a second layer of breadcrumbs and updated the checkout process to be less invasive.
I tested 4 different users and here are my main findings:
- 100% of users explained they wanted to see the recipe on the product page
- 100% of users again expressed that John would prefer a guest checkout
- 75% of users were confused by the rewards point system and wanted more information earlier in the checkout process
- 50% of users said they felt the order summary section was too small
Eataly v3
With v3, my main updates revolved around the checkout flow. Initially I had my users register an account, but I opted for a quick guest checkout instead. I also cleaned up the ‘pick up’ section of the checkout flow and made the order summary section a bit clearer for users to see.
You can view the v3 prototype here.
Next Steps
If I were to move forward with this project, I would complete one more round of usability testing to ensure that all of the big ticket items have been accounted for so we could move forward with a soft launch. This would also involve building out more of the content and features and smaller items could be pushed back on the pipeline to be released at a later date.
Most importantly, I would focus on the three personas and plan for their future needs, wants and goals. Growing with your user is so important; thinking about what your user needs in 6 months, or even a year, is what sets apart lasting, memorable brands from those that fall out of style. Our users are constantly evolving and companies need to evolve with them. Having the foresight to plan and anticipate users’ future needs is crucial to long term success.
