Past Tense Studio

Overview

The project was to create a responsive e-commerce website for Past Tense Studio. The e-commerce website was designed for a thrift/vintage shop that sells clothing and other unique home goods.

— Scope:

• Home page 

• Sign up/Login

• Checkout process - no need to login/sign up to purchase

• Recommended Items when viewing certain products

• Detailed photos and product descriptions so the customer knows exactly what they are getting 

• A help section for contacting the shop, FAQS, and shipping information 

— Constraints

• Time: 3 weeks

• Budget: There was no budget for the project, which meant I had to be resourceful throughout the entire project, from the survey to recruiting users for testing.

Problem

Past Tense Studio has been selling via social media for a while and was looking to create their own website for selling their vintage/thrift items. They need a responsive e-commerce website so that they could begin selling products online.

Solution

A responsive e-commerce website that allows customers to view products, filter products, login/sign up so you can see previous orders and check out faster. The website also offers detailed photos of the products and detailed descriptions so the customer knows exactly what they are getting.

Research

Competitive Analysis 

I began the project by looking at other thrift/vintage shops that currently exist to get an understanding of what people are doing well and what can be improved. 

I found that: 

• Great mobile-first websites

• Menus are clear

• Great filters to sort through the hundreds of products 

• Checkout flows are well designed

• Depop focuses on the app, but they could lose customers because they don’t have a solid website 

• Product descriptions are lacking

• Lacks detailed photos showing any damage or issues with the product 

• Requires an account to purchase

• Crowded menu and could be overwhelming, they also do not sell men's clothing

• Refashioner lacks in a lot of ways, their website is poorly designed and the checkout is cluttered and hard to read in some places

Therefore, Past Tense Studio has the opportunity to create a website that works well on mobile and desktop, a simple menu, filters, product recommendations, and detailed photos and product descriptions so that customers know exactly what they are getting.

Survey

I created a survey through Google Forms and deployed the survey utilizing Facebook, Reddit, and Slack to gain insight into user behaviors, needs, and demographics. The survey allowed me to define the target audience and make decisions for features within the app.

After conducting the survey, we gathered and analyzed the data to summarize the findings.

— Key Findings: 

• 75% of thrift/vintage shoppers are 18-34

• 75% of shoppers like seeing recommended items

• The majority of shoppers don’t find a chatbot helpful, although a considerable amount like it so maybe that is something that could be added in the future

• 100% of shoppers like having a guest checkout or not being required to create an account to checkout

• Different payment options like PayPal and Apple Pay

Interviews

In the survey, I asked people if they would be willing to be contacted for further questions and I had several people say they would so I reached out to them and set up an in-person interview if they were nearby or utilized Zoom if they were elsewhere. I really wanted to understand some of their problems and hear in their own words what they thought would be beneficial in an e-commerce website.

During the interviews I learned that users would like to see these features the most: 

• Website to work well on mobile

• Guest checkout, no need to sign up for an account

• Simple filters to sort through if there is a large number of products 

• Options for both men and women

• Multiple options to pay, like PayPal or Apple Pay

• Quick checkout process

• Detailed product descriptions with size, fit, condition of the product 

• Detailed photos showing any damage or wear and tear on the product

Personas

After I had conducted all of the research I was able to create personas that I believed gave insight into the user and would allow me to design the website with empathy. 

User Stories

Following the research, I began thinking about user stories and the user journey by tapping into the psychology of our users. I created a sheet with possible tasks that users could complete on the website and labeling them in terms of importance to help guide the design process and keep me focused on the most important tasks.

Design

I was able to wrap up with the research portion and take everything I had learned about the user to begin designing the website. But before diving into the screen design I wanted to figure out how the user would flow through the app, so I created a user flow to guide me through page design.

User Flow

Log In/Sign Up Flow

Browsing/Purchasing Product

Help/Contact Us

Branding

I finished designing the wireframes and moved onto branding. It was time to choose colors and fonts for the website. 

I chose colors that were neutral and I thought would be appealing to everyone. I wanted the design to be simple and have a consistent look and feel.

I chose fonts that were websafe and easy to read in order to allow for accessibility for everyone.

Accessibility

I wanted to ensure that the application was accessible to everyone, even those with visual impairments, and to ensure this I checked the contrast of colors against each other to ensure they meet AAA Normal across the board.

Evaluate

Usability Testing

I conducted user testing with 15 users through Maze.

The goal was: 

• Get data from users about the e-commerce website

• Find out if the users liked the look and feel of the website

• Measure success with login/sign up, finding items, and checkout

• Discover user difficulties when using the website

• Gain insight for improvement

— Key Findings:

• Make radio button have a larger touchpoint/bigger button

• “Help” in the menu at the bottom in the footer

• Sign up button/text was too small, users had trouble seeing/clicking on it 

• The logout button should be located in a different position than the other parts of the menu

• Testers thought they should be able to go straight to sign up - I kind of figured that would be an issue but wanted to see, users wanted a button for login and sign up 

• Fonts could be changed in a few spots to make it easier to read

• Overall the people taking the usability test liked the design and overall look and feel of the website

• People liked the typography and colors

Outcomes and Results 

The result is a responsive e-commerce website that allows for Past Tense Studio the ability to sell its products online.

Recommendations for Past Tense Studio 2.0

• As Past Tense Studio grows, there may be the need to add sections for each type of clothing

• Additional filters may need to be added (sizes, colors, material)

• More payment options

• Wishlist (Ability to save items for later)

• Chatbot or customer service chat

Lessons

• I learned how important it is to get feedback early and often. I wish I had done some testing following wireframes to get a feel for what users thought before creating the high-fidelity versions because I think it would have added great value to the website

• Learned the benefits of nesting components in Figma

• Learned how to use Maze and how powerful the tool is for testing