Shop

An easy shopping experience.

Overview

Summary:

Create a easy shopping experience that meets accessibility standards and doesn’t feel overcrowded with options.

Roles & Responsibilities:

Sole designer

Problem:

Current large option online stores can be visually loud, for Shop, the goal is to create a quiet version of popular e-commerce sites. To do this, research in whitespace & reasons of using service were needed.

Audience:

Online Shoppers

Process

Discovery and Research

Summary:

Took user surveys and used competitor analysis. The finding drove me to find solutions to problems in ease, why people use the services, reasoning for certain features and user driven results.

User Survey:

Now knowing that the majority of users like deals, it was top priority to find the best places to place deals. Finding an area & sizing for the search bar was also a mission to complete these user requested features.

35.3% of users saying sites like Etsy & Walmart are easy to use helped focus the project on reducing noise on already successful templates. Reinventing the wheel is not need. But as you can see by the open comments, people are looking for simplicity which is on track with Shops goal.

User Pain Points:

Competitive Analysis:

For You has 3 competitors Etsy, Walmart & Amazon for analysis.

Etsy:

Etsy has a great paper simple vibe but is overran with options and photos. You have a search bar, sign in, car, top menu, holiday menu, I’m shopping for section, and photos of items. It is most definitely more than what Shop needs for a simple design. However, the simpleness of the search was appealing.

Walmart:

Walmart has three simple colors: white, blue, and yellow. Using a simple color palette relaxes the user when they are on the page. The user doesn’t have to process as much, making it a better experience. They take the colors as far as to add them to they phone ads and deal ads. One color choice that was not appealing is the yellow search button when all other links are white or black. Not sure if the search choice was to draw customers into searching but it felt overwhelming at a glance.

Amazon:

Amazon has variations of the same color which is distracting. They also have the yellow search but it’s off from their other yellows. They implement block design a little more than the others which is nice for knowing which content is most important to the user. However for the ease and simplicity for Shop, the use of so many images up front I not necessary and can be distracting.

User Personas:

Leti & Shawn are average consumers.

User Journey:

Zoomed for viewing:

Information Architecture

User Stories:

• “As an average consumer I want the easiest cheapest website so that I can buy all my goods.”
• “As an average consumer I want a ethical website so that I can buy all my stuff.”
• “As an average consumer I want deals so that I can save money”
• “As an average consumer I want a seamless checkout expeirence so that feel trust that my prodcuts will arrive”
• “As an average consumer I want reviews so that I can trust the products and the company”

User Flows & Flow Charts:

Each user flow was made digitally

Wireframes:

Early on there were differences on how the shape of the site worked and placements of components. Over time, research and user tests the wireframes of Shop progressed into a user friendly, accessible, and simple.

Paper Prototyping Early Research:

Based on surveys and competitive analysis these paper prototypes were the solution to finding what our demographic of users pain points were and successfully used these drawings to find out problems.

Brand Development

Brand Personality:

Warm, eco-friendly & healthy are the vibes Shop is looking for throughout the site. Green and white being the main colors allows for intertwined design throughout the site.

Moodboards:

Sketches:

Logo:

Logo was kept as UI [ undefined ideas ] logo for brand identity and “shop” was added after so users can view what site they are on.

Color Palette:

With a AAA standard and the companies colors already being green and white, meeting accessibility guidelines was definite. But we need to work on normal text AAA on this site to make it full AAA.

Typography:

Font: Inter

Style Guide:

For a style guide Shop used a section compiling all notes, colors, ideas, competitors and inspirations. The reason why there isn’t a components library is because Shop was designed mailing on a web server called WordPress. For Shop’s website Figma version a more style tile version of designing was used.

Prototyping

Clickable Low-Fidelity Prototype:

Sketches turned to digital and clickable for users to test. This helped bring the new design forward. A great learning experience.

Iterations Of Design Prior To Usability Testing:

Snap shots of every major iteration change. Each one built better by the user tests that followed Shop.

“search bar needs help”, We took the search bar from the left of the “header menu” and put it on the industrial standard on the right. This helped users understand where the search bar is and made it easier to find.

Example of change:

“Overwhelming if you’re looking for ease” though one user mentioned this, we took it to heart and simplified the homepage. The simplification brought us with the clean page and accessible coloring you see on the right bottom photo.

Example of change:

Usability / Preference Testing With Results:

Most of the major steps taken are recorded here. The design changed and formed due to user testing.

How it started:

User test results:

How it ended:

High-Fidelity Prototype:

It took a lot of user testing and research to get the the goal of a high-fidelity prototype. The end result is amazing and a tribute to the users who built it.

Final Thoughts

Successes:

Created an ease of use e-commerce site that improves simplicity of the shopping experience using research and competitive analysis.

Learning Opportunities:

Finding more information with larger page options. Shop had 4 product pages which limited the amount of research gained but allowed to get results.

What Was Learned:

How to create a ease of use e-commerce site buy simplifying the options people have to choose at the start and making the progress more complex as they get more interested.

Mistakes Made:

Mental health during projects is really important. Focusing on my Brian first would allow for better results. Mistakes were made that relate directly to stress, frustrations and mindset issues. When you focus on yourself first, you are able to solve the problems without as much strained effort.