The Challenge
Daniel Lee is the owner of S’more Amore, a relatively young online company. Daniel hopes to grow his company into a lifestyle brand but he has very few products and his current website is hard to navigate and has very little information for his customers.
Overview
Smoreamore.com was a pro bono client project for a company called S’more Amore that sells s’mores and s’mores related products. I worked in a group of 3 UX designers where we were responsible for the research, plan, design, and test phases. The website was designed to have an e-commerce platform.
My Role: I was heavily involved in the research phase, wireframes, and usability testing. I was also responsible for creating and designing the website’s allergen icons and initial wireframes.
Team Members: Paul Casey (UX Designer) and Hatim Dossaji (UX Designer)
Tools: Sketch, Omnigraffle, Axure, Adobe Photoshop/Illustrator
Duration: 3 weeks
The Proposed Solution
My team and I were assigned the task to redesign the overall flow and look of this website. The prototype was also designed to have an e-commerce option for online purchases and forms to book catering events. Ideally the website will have a flexible structure that will allow the client to grow his online business as he adds more products.
Research
In person and phone interviews were conducted on the targeted demographic of customers. In addition to interviews, an online survey was also sent out to the public to gather more data.
The data collected was then organized into an affinity diagram to identify overal themes in the responses. Our persona, Jennifer Robinson, was developed to represent potential users.
Forming the affinity diagram
our persona, jennifer robinson
Heuristic analysis of GetYourHotCakes.com and Boarshead.com, was conducted to identify key features found on well known e-commerce websites. The information was then compared to the current Smoreamore.com website layout.
Plan
A list of features favored by potential users was developed as well as a site map for the website. A user flow was also formed to identify how the user interacted with the site’s features.
Journey map of navigating smoreamore.com
According to the information collected from how users behaved towards e-commerce websites, a customer journey was formed to point out the “emotional peaks” of the user while navigating the wesbite. The features defined will ideally decrease negative emotional responses of the user.
Design
A design studio was performed to determine the overall layout of the website. The layout was based on the data collected from our user research and analysis of similar websites.
Design studio session
Wireframes
wireframes
Once the layouts were set, I created gray scale wireframes using Sketch.
Initial landing page
initial product page
initial checkout page
A color palette was also selected to portray the website’s look and feel.
The hi-fi prototype was designed using Axure RP.
initial homepage prototype
Catering page
about page with social media feed
I designed a fleet of icons to be used as allergen indicators on the home page and product page. These icons will allow customers with food allergies or preferences to efficiently navigate the website.
Test
In person and remote unmoderated usability testing of the Axure prototype was conducted. After consent was collected, data was recorded using QuickTime, Google Hangouts, and Usertesting.com.
The users were assigned tasks to navigate the website's features: browse and purchase an item, book a catering event, learn more about the website, and contact the retailer.
What they Liked:
- Users appreciated that the ingredients are stated on the details page, along with user reviews.
- Users like the allergy and filter options; phrasing of icons made the site feel friendly and personable.
- Users prefered multiple contact options, and a notification of timeframe when the company will contact them.
- Users greatly enjoyed the auto updates on the form (email and phone number fields).
- Users connected with the owners story. They commented he looks like a fun, nice guy to order food from; not pretentious; feels connected to the retailer.
What Could Be Improved:
- Higher quality photos with more contrast to attract the audience's attention. The prototype used pictures from clients instagram account.
- Users would prefer to see reviews of past catering events or types of catering they have done.
- Customers would like clear description of item, including size, suggested servings. Improved picture quality
Iterate
After usability testing, iterations were done on the current prototype. Overall the prototype gained positive feedback. By analyzing feedback, the initial prototype was updated to reflect the needs of the users.
To increase navigation efficiently, the navigation was slimmed down to 3 main points and the shop was made the home page. Prices and more product information was placed on the front page.
updated home page with filters
Updated product page
updated catering page
updated about page
A responsive filter option was added to the shop page and the allergen icons were edited to look more uniform with the website’s aesthetic.
Updated fleet of icons
Conclusions
The website will allow S’more Amore in its current state to grow as a business. The structure of the website is flexible so that the client can easily add more features as he creates more products.
As the business gains more popularity and the goal of the business is more defined we suggested to our client that a re-branding exercise should be performed.
One of the examples for re-branding is of the company’s current logo. After usability testing of the logo, my team found out that it was difficult to read initially after some usability testing. We suggested a redesign of the logo so that “S’more Amore” more legible.
After the re-branding of the website, additional usability testing should be performed to gain more accurate feedback for iterations.