Copper Top Crafts

Problem

Create a website for a small craft business that’s just starting out. How to display items that have been purchased by others to show as an example and allow the user to submit an inquiry and complete a purchase for a personalized one of a kind product.

solution

My solution was to create a site that allowed users to browse through prior commissions to see if they like the company’s work. Then they would select their product to be personalized and fill out an inquiry that would tell the company what they were looking for to be customized and any/all specifications that would go along with it. This inquiry form would need to change by product, but for the prototype I just used a generic form.

Audience

My audience would be anyone looking for a personalized gift. Based on the user survey, the audience would mostly be between the ages of 18 and 50 and is split 60/40 with the majority being women. However, our target audience isn’t necessarily a specific age range or gender. It is more about an audience just looking for something unique and personal.

Check out
the MVP
prototype

The goal was to create a prototype of a site that was friendly, creative and fun. Shopping for a customized gift should be fun! The website would allow the user to browse products that have been created for other clients in the past and the user then chooses an item to have customized and made personal for them. The site would be similar to an e-commerce site but the user would be submitting an inquiry as if they were requesting a service, similar to a home improvement site.

Discovery and research

User survey

Since this site needs to be created with accessibility and usability in mind, my next step was to conduct a user survey. I posted this survey on various social media platforms, which gave me 37 participants within 24 hours.

I was able to learn how my users felt about shopping online and their experiences purchasing a personalized gift. I also added a few extra questions that should help the site down the road that were what items on a site would be most appealing to a customer and what kind of occasions they typically shop for something personal.

Survey results

I was surprised how many users prefer to enter their credit card info in at checkout versus using an option like PayPal.Through the user survey I found that most users typically start their gift shopping through sources like google and Etsy. This confirmed my decision that a website would be the best route for this company rather than creating an app to start.

Using what was learned from the user interviews, I was able to find what tends to be the most frustrating for a user when shopping online. Focusing on these main frustrations helped to find a solution that allowed the site to be easy to use, and have an easy navigation.

user pain points

When navigating through a site and trying to view items the back button takes you back to the first original page instead of going back a page.
Constant pop-ups
Not being able to filter through options and seeing items that aren’t relevant.

I liked how Pura Vida had their items displayed and their overall layout of the mobile version of the site. However, the layout of the mobile VS the desktop site changes completely. When comparing this site to Etsy, this added to Etsy to be the more user friendly and functional of the two. Etsy has a much more consistent layout, I feel like Etsy’s decision to stay consistent helps to improve the overall usability for its users. These sites helped shape how I found my solution for creating an accessible site.

Competitive analysis

During my SWOT analysis I noticed that almost all sites did not shrink down very well, which led me to the decision to create the mobile version of the website first. I also found that sites like this example of pottery barn that had a lot to offer or a lot of inventory had an overwhelming amount of content on their home page. The overall layout of the page is displayed nicely, but it is just too much content overall to scroll through.

I chose to do a competitive analysis on a variety of different companies. I chose popular e-commerce sites like pottery barn and pura vida, etsy and personalization mall because they also create custom/personalized items, and home advisor since it is “requesting a service”.

user interviews

I conducted several user interviews with that participants from the user survey. I also did a mini usability/competitive analysis with the users I interviewed between Personalization Mall and Etsy to see which site they liked more and why. All users stated that they like to read through the reviews before making a purchase on-line. Most prefer that the reviews are detailed and with photos, not just saying something like “Great product!” with a photo that looks like it’s an instagram model. All users stated that they hate constant site pop-ups, which I found to be very interesting. I did notice that Pura Vida had a different approach to giving a pop-up asking for an email address during my competitive analysis. This assisted in my approach to the design solution.

user personas

The user personas were bases off of some of the users that filled out the survey. Since the majority were women, I decided to create two women personas and only one man. Creating these personas helped me to create a flexible design and allowed me to visualize who the users will be.

Age: 29
Gender: Female
Status: Engaged
Location: Nashville
Occupation: Nurse

Danielle has recently moved from Chicago to work as a RN in Nashville. She typically works overnight shifts. When she isn’t working she is typically falling down the rabbit hole of TicTok videos or taking her dogs to the dog park. She loves giving the perfect gift that feels personal and has an obsession with HGTV and the Home Goods store.

motivations

Easy to find link on social media for item to purchase
Easy and safe checkout with free shipping promo
Good reviews with customer photos

Frustrations

Shipping takes too long
Poor or lack of search bar feature on websites
Unclear return policy

Age: 43
Gender: Male
Status: Divorced
Location: Lemont
Occupation: Director of Sales

Chris works part time at a bar as a hobby to keep himself busy on nights he does not have his daughter. He enjoys fitness and outdoor activities like canoeing. Chris is recently divorced and purchased a small home to be near his daughter. He is a minimalist that will typically search on google for what he is looking for.
‍

motivations

Spare cash ready to spend
Easy checkout
Save time and shop with efficiency

Frustrations

Dislikes the crowds when shopping at an actual store
Doesn’t want to waste a lot of time looking for something
Lack of filter options

Age: 38
Gender: Female
Status: Married
Location: Downers Grove
Occupation: Teacher

Jess is a kindergarten teacher that enjoys being very active. She also stays busy spending time with her loved ones, including a group of girlfriends that have been friends for over 20 years. She loves romantic or sentimental gestures and loves to support local shops. Jess enjoys not being glued to her phone.
‍

motivations

Personal gift
Good Reviews
Support local brands without having to visit in-store

Frustrations

Over priced buy buy baby gifts or stores like it
Overwhelming amount of items to choose from
Color inaccuracy of products

information architecture

User Stories

I created my user stories based off of what I learned from my survey and user interviews. I tried to create as many user stories as I could think of, and then sorted them by priority by thinking back to the user pain points and goals. The highest priority user stories then helped to create the user flows.

user flows

site Map

I created a site map to use as an outline to help me identify where the gaps were and what views I would need for when I began testing. Creating the site map also allowed me to visualize what the best navigation for the site would be. Based off of all of my prior user research results, I wanted to make sure that the site’s navigation would be simple and easy to use, so the site map allowed me to visualize how the overall flow of the site would be.

Sketches

As I sought a solution for this project I decided it would be best to try and sketch my ideas out first. To help iterate my ideas, I did a crazy 8 sketch to try and find what the best solution would be. I sketched out as many solutions as possible to find the most efficient, user friendly and accessible way to solve the problem. Once I had my solution in mind I began creating my wireframes.

Wireframes

While I was creating my wireframes and had a layout I liked, I referred back to my user stories, personas and flows along with the content strategy in order to ensure that I was creating the best solution for this site. The user research showed that users typically use a google search in order to find a gift for someone. With this knowledge, creating an app would not be beneficial for this company since they are just getting started and are fairly unknown. When conducting my competitive analysis I saw that a lot of competitors had responsive issues when trying to shrink the site down in size. This led to my decision to create this websites prototype as a mobile site first.

Click the wireframe photo to see more!

Mockups

My solution was to create a site that provides the user with an intuitive but simple design that allows the users to browse through prior commissions to see if they like the company’s work. Then they would select their product to be personalized and fill out an inquiry that would tell the company what they were looking for to be customized and any/all specifications that would go along with it. This inquiry form would need to change by product, but for the prototype a generic form was used.

Since this site would be creating each item personally, I chose to not distract the user with a lot of pictures on the home page, so I chose minimal pictures and instead used little icons to help categorize the site. I also found that this made the overall layout and spacing much more simple and accessible.

Brand development

brand characteristics

The overall tone of this site is intended to be friendly, creative and fun. Shopping for a customized gift should be fun! The goal of the site is to appear clean and simple. In order to accomplish this, I decided to make the majority of the content to be black and white with just a splash of a brighter color. This also allows for the the photos of the products to stand out more on the prototype.

Logo Digital Sketches

In order to create the logo I took inspiration from Chip and Joanna Gains from the show Fixer Upper in order to create the logo. I created the logo in Adobe Illustrator so that I could manipulate the text better. I chose a distressed typewriter font with cursive letters for the logo to give some contrast to the actual content of the site.

style guide

After deciding on my final color scheme, typography and logo, I created a style guide to refer back to while I was creating my prototype.

TYPOGRAPHY

For the typography of the site itself, I chose my font based off of the need for accessibility. The font was chosen based on the knowledge that it is a standard for CSS based off of the content provided by google free font. I chose to use the Montserrat font since it is a sans-serif so that even if the font is smaller, it would still be legible.

Color Scheme

Cyan teal was chosen as the pop of color since it is a combined shade of blue and green and those are the top two color choices of men and women. It was also chosen so the users would feel relaxed and have a sense of security right off the bat when they’re navigating through the site. Since this color is so bright and the background of this site was going to be white for contrast, in order to keep the MVP accessible, anywhere the color pop was placed there needed to be a black border to go with it in order to keep it within contrast.

Prototype

The idea

When creating the prototype, I realized that the name of the company was not located anywhere. Only the logo without any wording was in the header. Once the company name was added, it was above the fold and took away from the rest of the site. After user testing and several iterations, the company name was finally displayed in a way to keep a balance with the visual hierarchy.

Check out
the MVP
prototype

After completing the usability testing and checking the prototype’s accessibility, I learned that the solution for this site needs some work. Since this is essentially an e-commerce site, creating the site to feel like a service site (lawn or maid service estimates, etc.) is going to be successful. Instead of having the "see how it works" link to explain how to order a customized product, I could create little icons to help display the process or steps to draw the user's attention and help avoid confusion as to how the site works.

DESIGNING WITH ACCESSIBILITY

After creating the first version of the prototype, I realized that the cyan against the white background would not pass a accessibility test. It was also noted that during the user testing (which is discussed in more depth below), that the users over 70 were not familiar with a "standard" user profile icon. After several iterations this prototype was made so it could pass an accessibility and usability test.

Iterate prototype

There were some visual adjustments that needed to be completed for this MVP. The hierarchy was adjusted above the fold and the "how it works" explanation was changed so it pops out at you more. The profile icon was also changed to display sign up/sign in at first, then once the user has signed in, the profile icon will appear along with the "favorites" icon. The icons on the top were also adjusted to be a combination of both categories to serve as a fast click feature. These can be changed once the site is up and running and be based off of which pages on the site are the most visited.

usability testing

The testers

Seven users of various age ranges assisted in testing the first version of the prototype.
The testers were selected based off of their knowledge in sales, shopping habits and how frequently they use technology/UI. This assisted in making sure that the feedback received would be the most candid and helpful feedback possible.

Check out the
Mprototype

Tasks

Each tester had five tasks to complete:

How would you check the price point average on the site?
How would you search for a specific item?
How would you browse the site if you were shopping for a gift for someone?
How would you create a user profile so that you could favorite an item?
How would you complete a checkout?

They were then asked a few follow up questions in order to develop a better understanding of what would need to be improved if/when this site would be built.

The results

The user testing results showed that all users found the site easy to navigate and visually appealing. Most users did not click on the “Read how it works” link at the top, which led to confusion as to why the prices were listed at “starting at” instead of a set price.

Most users stated that when they’re making a purchase they want to know how much the product is, they don’t want a ballpark estimate. There was also a lot of confusion when filling out the inquiry form and completing a checkout. Saying things like, “When do I pay?”,”Why do you need a photo?”.

Once the testers read "how it works", the checkout process became much more clear and made more sense. All users liked the overall organization of the site and the little icons, but stated that the "browse by category" icons on the top might be redundant with the "browse by category" option further down that has pictures.

One user stated that he didn’t like the little icons on the top, but then realized he was using them the most to navigate around the site. He stated, “I don’t like them but I keep using em’!!”. All of this user feedback was very helpful in discovering what changes needed to be made for the next few versions of this prototype.

Final thoughts

ConcLusion

Once the MVP design is re-worked, little additions could be made to the site to make it feel for fun and personal.
Simple additions like a 'New Arrivals' or 'Best Sellers' section.
An even more fun and person addition would be to add a little link in the footer that says “DO NOT CLICK THIS LINK”. This could then take the user to a page displaying something like,“You little rebel you” with a funny dog video. In addition to this below the video it could display something cool or beneficial to the customer, like a discount code or giveaway. For example, "Enter this code at checkout for a free gift".
Just an extra something that would give the site more of a personal feel and just make it a little bit more fun overall.

From a business perspective it would be a good idea to give the user options to choose from versus letting them input whatever they want on the inquiry form. For example, choosing your color scheme would be a drop down of colors for them to choose from. Choose your cup phrase could be radio buttons, one being “name” where they would then be able to type whatever they wanted, or perhaps a “I want something else '' option, something along those lines. I think the overall flow of the site and how it is organized works well but the actual displaying of the items will definitely need to be iterated.

Next Steps

Create user flows and update the prototype so that all user stories are included in the functionality.
Update the site layout and photos to have the “generic” pre-customized version displayed. This will help to avoid confusion in what the user is actually purchasing.
More user testing and iterate!
The best way to create something based off of user-centered design is to continue to see how the user reacts to your project.

Additions

It was a lot of fun getting this project started and I cannot wait to see what it develops into. Stay tuned for more updates on this website!