Twenty Nine Handmade
Deliverables: User Interviews, Competitor Analysis, Secondary Research, Affinity Mapping, User Personas, Sketches, Wireframing, Usability Testing, Iterations
Overview
Twenty Nine Handmade is a small handmade goods company based in Seville, Spain. The company makes everything from scrunchies to doilies to even handbags. The owner, Jenn, has mostly been advertising on Instagram and selling to close friends and family, but wanted to expand. She wanted a website to reach a much larger customer base so I used my design skills to help her out.
Roles
Sole UX/UI designer responsible for user research, UX/UI design, prototyping, and usability testing.
Challenge
The main challenge was making a functional website for a company that was still small, new, and developing. Taking this into account, I would have to make sure the website served the needs of the owner while also being easy to use for the customers. Personally, it was also my first time designing a real-world project, so I would need to actually bring my designs into the real world for the first time.
Solution
I designed a simple, responsive website that had both English and Spanish versions for users in the United States and the European Union.
Design Process
1. User Research
Research Goals
I wanted to determine how the customers approach shopping online.
I wanted to learn what they looked for when shopping for handmade goods.
I wanted to learn what drew them to Jenn’s products.
Methods Used
Five User Interviews: all with existing Twenty Nine Handmade customers.
Competitor Analysis: An analysis of potential competitors such as Etsy as well as offline competitors that sell handmade goods.
I did not know anything about handmade goods so I was very curious to see what motivates people to buy them.
SWOT Analysis
Research Findings
Customization is very important
Shipping information needs to be 100% transparent
Etsy is by far the biggest competitor
Prices need to be transparent
Reviews are important and should be included as a feature
Products for the home seemed to be the most desired
Users respect creators, so Jenn’s bio and personality need to be highlighted
2. Define
HMW’s
How might we differentiate the site from large competitors like Etsy?
How might we organize the information architecture to prioritize the inventory users are most interested in?
How might we showcase the owners’ story and personality?
POV’s
I’d like to showcase the creator and product creation process so that users feel they are purchasing something meaningful.
I’d like to help users personalize their products so that they can get something they feel is completely unique.
I’d like to help users feel like they are part of a community of shoppers via reviews or testimonials so that they can build trust in the brand.
User Personas
I chose two user personas based on the people I interviewed while researching. I wanted to choose one persona based in the U.S. and another based in the E.U. to reflect the potential user base of the site.
3. Ideate
I needed to balance the wishes and ideals of the users with the practical realities of what a small, independent company could offer.
User Flows
I designed the user flows based on how users expressed how they approached shopping during their interviews.
I tried to make it as comprehensive as possible while also keeping in mind that it would probably need to be adjusted after further iterations.
Low-Fidelity Sketches
I kept my sketches simple and used many big shopping brands such as Macy’s as inspiration.
I wanted to use custom orders for the CTA, since custom orders were the main way users ordered on Instagram.
Here is a link so you can get a closer look!
First Style Tile
I based the color palette on the existing logo. I kept the brownish orange and added a green for a secondary color.
For the type, I chose Helvetica since it is simple and very legible.
I also included pictures of the products as well as two websites I used for inspiration. One was Etsy, and the other was a Spanish business based in Madrid that a user talked about, De Piedra Creaciones. De Piedra Creaciones was an especially big source of inspiration.
First High-fidelity Wireframes
I started to bring the designs to life on Figma. I modeled them very closely to what I created in the sketches. However, I wasn’t satisfied with any of the visual elements. The colors matched the logo but they didn’t look very good on the screen.
The designs needed brighter and more inviting visual elements. Something that would make the users feel the artistic vibe of the company.
Second Style Tile
I kept the same pictures and website inspiration but I changed the color palette and typography.
I chose a purple color palette because it was more artistic and eye-catching.
For the typeface, I chose a New York Serif font for the headings and Helvetica Neue for the subheadings and text. I am a big fan of the New York font, I think it helped convey the artistic vibe the site is going for. Helvetica Neue is simple and legible, perfect for the customer base.
Iterated High-fidelity Wireframes
I applied the changes I made in the style tile to the wireframes. They were looking much better than the previous iteration in my opinion. However, I still wanted to make some adjustments before usability testing.
Some more adjustments were needed in order to make the designs ready for usability testing.
Desktop Iteration + Tablet and Mobile
I made some small adjustments to the desktop screens and I also designed the tablet and mobile screens as well. Since the company is based in Spain, I designed screens in both English and Spanish.
4. Testing and Iterations
Testing Process and Key Findings
User testing was done with five completely random users to prevent bias. All tests were done over Zoom.
Users were asked to buy a scrunchie, leave a review, and submit a custom order. They could do the tests with either the desktop, tablet, or mobile versions but users were shown all three.
Overall the testing went well, every user completed all the tasks without issues except one who completed two out of three.
The color palette was very well-received validating my earlier assumption that the colors needed to be brighter.
Users wanted some changes though. They wanted options to buy in dollars and to have color choices written out. Some Spanish copy was recommended to be changed as well (I should note that I speak Spanish at a very high level but I am not a native speaker).
Proposed Changes
Add choices to pay in dollars.
Write out color options.
Add a search bar when the company has a much larger inventory.
Add a payment information button on the footer.
5. Final Thoughts
This was a very challenging project with numerous constraints, namely the small size of the company.
We hope to get the website up as soon as possible. When it’s up, I will put a link here.
As the company expands, I hope to do further iterations so that the website can continue to be up to standard for the users.