Etsy E-Commerce Web Design
A desktop & mobile app connecting users through communication and trust
My Role: UX Researcher - User Interviews /Affinity Maps / Competitive Analysis /Personas
UX Designer - User Flows/Sketches /Wireframes /Prototype
Tools: Figma, Maze
Team: Suparna Nahar / T.H. Ponders / Madhiha Anis / Reese Chong / Caleb Ha
Duration: 4 weeks
Project Overview
Etsy provides a marketplace for consumers to buy all types of goods by creative artisans, but sometimes they have a very specific product in mind that they want created for them. My team of me and 4 other designers undertook a prospective project to create a way that would allow a customer to commission these types of requests and receive quotes from artisans interested in them.Our team was tasked to formalize and design a commision system so that both the buyer and seller would be able to conduct business seamlessly.
The Problem
When it comes to commissions, there are two audiences one must consider:
The patron/buyer requesting a custom item
The artisan/seller who actually produces the item
My team had to design a feature that connected these two users in a way that led to a harmonious experience for both parties.
Goal
We needed to design a smooth and seamless experience for both users on either side of the commission process.
The Process
With our goal set, we set off on our design sprint. We conducted user research in order to empathize with our users and determine the best way to help their needs. My team then ideated multiple solutions which we tested through usability tests before designing a high-fidelity prototype based on the results. We needed to design a fluid and comfortable experience for users on both sides of the commission process.
Discoveries
We began our research by conducting user interviews with our target audiences. We interviewed 10 people:
5 from patron user group
5 from artisan user group.
Artisan Interview Findings
The artisans we interviewed also expressed the importance of communication as well as freedom to customize, and payment about the order was a big concern for them.
“I like to get paid in advance or maybe a split payment but otherwise ok with receiving payment after completion.”
“I have a very specific illustrative style that is not for everyone.”
Patron Interview Findings
The patrons we interviewed expressed the importance of communication as well as being able to trust the person they were commissioning.
“I want communication throughout the process especially if they’ve hit a stumbling block. I want to work through it together.”
“I love it when an artist can keep my tone, but come up with a totally unique portrayal of that tone.”
After our user interviews were completed, we came back together as a group and made two affinity maps to identify trends amongst our users.
Patron Perception
We found that when commissioning items, patrons really valued communication and credibility. They need artisans who truly understand their creative vision for the item and they need to trust that they will deliver quality work.
Artisan Perception
Interestingly, artisans shared the same needs but in a different context. In terms of communication and credibility, they need patrons to provide clarity on what exactly they want and they need to feel confident that the patrons will compensate them for their work.
It’s a partnership that goes both ways to work
Affinity mapping really sealed the idea that the commission process is a joint personal relationship in which both parties have needs and thus both user groups must be accounted for without compromising either. The iperceptions we gained showed us that patrons and artisans are two sides of the same coin with a similar need to trust and communicate.
Further Deep Diving to Keep the Research Going
We then dug deeper by analyzing 4 competitors that utilize a commission based process. We conducted a feature analysis to see what common types of information were being presented to the user and determine which of these features would best serve the audiences interacting with our design.
Some of the companies we looked at
We gained some great insights from doing this:
All 4 companies have a review system to inform users of a seller’s credibility. 3/4 companies also provide even more transparency with credential verification.
2/4 companies provide a way for users to attach reference photos to their job listings, which we felt was an excellent feature that helps clarify a commission’s desired product to the artisan.
3/4 companies provide users with a shipping timeline of their order, giving them a clear sense of the commission’s progress.
My team also did a Comparative Analysis on Tinder. What? Tinder?
“So, what connection does Tinder have with commissioning custom made products?”
A good question to ask. Well, it was all based on the discoveries made from our user interviews. After realizing how important it was for our users to be able to trust and have strong communication with someone they met online, we wanted to find ways we could match-make users that would have a great working relationship. Thus, we saw Tinder as a service through which we could gain insight on how to effectively connect people together.
How can we match make with the right people so that they can work well together?
The most valuable takeaway from our comparative analysis was Tinder’s chat feature:
It’s a way for people to talk and connect more with each other to determine if they really are a good match or not.
It provides a way for their users to vet potential matches and ensure that there is trust before meeting someone new.
For these reasons, we found the chat to be a valuable feature and wanted to provide it to our own users.
Resonating with Users
Informed by all of our research, my team then worked to empathize with our users to determine their struggles and the best way to help them. We started off this phase of the project by creating two personas that represented both the patron and artisan user groups.
Alex was our persona embodying the patron side of the commission process. An aspiring filmmaker looking to commission a killer poster for her first short film. Her main concern is finding someone reputable, trustworthy and communicative so that she can have a unique product that represents her film’s essence.
Jacquelyn was our persona representing the artisan’s perspective. She is a freelance graphic designer that loves creating art, but also has to work part-time to cover her living expenses. She wants to find quality clients who are responsive, trustworthy and pay her on time so she can eventually be a full-time artist and live off her work.
We then generated two problem statements identifying our personas’ main desires and their motivation behind them.
The Patron
The Artisan
The personas and the problem statements were used to guide our brainstorming process in figuring out how might we help both Alex and Jacquelyn attain their goals.
How might we…
Facilitate reliable communication between the artisan and the patron?
Help both parties understand and communicate what the other wants?
Give the patron confidence that an artisan is trustworthy?
Give the artisan confidence that the patron is trustworthy about paying on time?
Creating User Flows
With our research synthesized thoroughly, we felt well informed and ready to move on to the design phase for our project. We began by creating user flows for both the artist and the patron to find out how both user groups would navigate the commission feature.
Combined User Flow
These user flows gave us guidance on what screens we needed to design for our commission feature. After messaging each other about a job listing both the patron and the artisan have a decision to make:
“ Do I want to enter into a contract with this patron or artisan? ”
Since communication was so important in making a commission actually happen, we focused on designing ways to provide clarity and communication throughout the entire process.
Ideation
We drafted some initial sketches from all the information we had gathered to get a feel for what our screens would look like and to generate some possible ideas for our commission feature.
The initial sketches evolved into mid-fidelity wireframes guided by the steps in our user flows.
Mid Fidelity Wireframe
Testing Things Out
With our mid-fidelity prototype ready to go, a few members of my team went out and conducted usability tests. My team had our participants perform specific tasks based upon which side of the commission process they were on:
There were 10 participants in total with 5 users testing the patron side of the commission process and 5 users testing the artisan side. We were happy to see these results!
10/10 users completed the tasks within 3 minutes with no major errors
Though the results were positive, we felt that the design could be better. There were three key things we wanted to improve moving forward with our high-fidelity prototype:
Improve visual design inconsistencies
Improve the clarity of the navigation system
Incorporate a “ Save as PDF ” function for artists to view their contracts.
The Final Handshake
Here’s a look at our high-fidelity prototype, a responsive design which was an accumulation of all of our research and testing.
Communication, and Trust
Allow the patron to create detailed job listings so that artisans know exactly what the commission entails.
A scrollable page where the patron writes commission details
Give users a messaging feature for them to connect and talk before settling on a contract.
The chat feature on the artisan’s mobile device
Provide a contract page where users can see all terms for the commission before moving forward.
Contract details page where both users must sign before commission is confirmed
What’s Next?
For future iterations of this project, there are some key things my team wants to incorporate in our design:
Continue testing to see if any visual design inconsistencies remain and how to fix them.
Continue testing the navigation systems of the site to see if more clarity needs to be provided.
Incorporate a “save as pdf” function for artists to view their contracts offline on their personal devices.