SAFI Label
UX/UI Design for Web
TOOLS
TIMELINE
6 weeks
MY ROLE
As a team of 4, we performed user research, competitive analysis, created user flow, wireframes, and prototype. I worked on this real client project as part of my SpringBoard’s UX/UI Design course.
Background
There are millions of highly skilled artisans in Africa. Majority of them, women and youth depend on their craft for income. Limited to local sales and inaccessibility to a larger market they face a lot of financial struggles. The Creative Manufacturing and Handmade sector is one of the fastest growing global industries, yet it is slowed by communications and digital shortcomings. There is an increased demand for sustainable and ethically made products however the lack of transparency in the supply chain has made it difficult for conscious buyers to trust brands. With the growing consumer needs, the urgency to protect our ecosystem and need to promote diversity and inclusion, Safi is leveraging the power of technology and AI to bring positive change and innovation in the artisan craft sector. SAFI aims to create a platform that makes it convenient for socially and ethically conscious consumers and global retailers to connect with skilled African artisans. We want to build a website and a mobile platform to connect skilled African artisans directly to Safi and the global marketplace. The website will be used by customers and the mobile application will be used by artisans.Problem Statement
Brands get frustrated when sourcing artisanal products from Africa. The communication between buyers and suppliers in the artisan craft sector who want to purchase wholesale quantities is cumbersome. The manual administrative process involved in sourcing and managing the process is outdated. There are many kickbacks, which results in suppliers earning less and middlemen gaining a higher margin.Empathize
To start off, I created a provisional persona of potential SAFI users based on a selection of current SAFI users and my understanding of people I knew that used wholesale websites.
Persona
Job
Owner of small businessIndustry
fashion, art, and craftGoals
To find suppliers of raw materials for their art and craftPreferences
Being able to monitor order onlineSays
- “It’s difficult to find brands that I trust”
- “I want to connect with skilled artisans”
- “Purchasing from brands who share my social and ethical values is important”
Does
- Clicks on the search bar and types a keyword for the product they’re seeking.
- Clicks on a topic in navigation and takes the user to the general product page.
- Clicks on a product and is taken to a product details page.
- Selects quantity of product and adds product to shopping cart.
- Proceeds through proper registration and checkout process.
Thinks
- The user thinks the supply chain system is unclear. In order to gather information, the user needs to do intensive research.
- The user thinks Africa has beautiful products compared to others.
- The user thinks Africa’s middlemen are not as reliable as others.
- The user thinks the current manual administrative process involved in outsourcing and managing orders is outdated.
Feels
- Hard to find the right suppliers in Africa
- Frustrated when suppliers delay production
- Obsessed with crafts of artisans in Africa
- Excited about finding affordable distribution partners
Define
After doing guerilla usability testing with our candidates, we reviewed the recordings and used affinity mapping to group the pain points into similar categories, which came down to the below HMW question:
How might we design a seamless purchasing experience for wholesale buyers?
I first created a sitemap to structure the MVP content. Besides having a list of products, and information about the company, I added featured products, gift guides, and artisans’ information to the menu.
Ideate
User Flows
We identified the 3 red routes for this website:
- Onboarding flow: how do people sign up and sign in to the page?
- Search Artisans flow: how do users search and filter the artisans they are looking for?
- Place Order flow: how do user search for products and place the order?
Place Order Flow
Wireframe
User Testing
We performed usability testing on 5 users who fit the persona. There were 5 tasks during the testing:
- Sign up for an account
- Search for artisans
- Finding product
- View product details
- Add to bag
Below are key takeaways from our usability testing.
Prototype
After analyzing the usability testing notes, we made changes to the wireframes and incorporated the style guide to bring forth the Hi-fi prototype. Below are the before and afters of our key screens.
Listing the badges of socially and ethically conscious values/artisan missions. This adds a solution to the statement in the brief mentioning Safi’s aim to connect socially and ethically conscious consumers to artisans.
Breadcrumbs are added to help go back to the search page.
Added the artisan’s specific areas of design. This will ease the experience buyers/consumers have when searching for products to purchase wholesale
Changed from black text to white text overlay. Updated the filter list and adding visual.
Next Step
Remaining Questions
What are the outstanding accessibility issues that we want to address? For example, will users of the website validate that the skills and badges aspect of the website is useful? The people I interviewed liked the feature but did not note a personal need for it.
- How will we create a seamless experience for users to track all of their orders?
- How will we encourage users to engage with the website?
New Feature
I plan to integrate a profile page that provides all needed information to the users such as order history, point system, and message portal to talk to artisans or SAFI customer service.
Would like to have breadcrumbs to go back to previous find.
User 1 Search for products