A purpose led brand that promotes artisanal craftsmanship. The site features a collection of sustainably-sourced, ethically-made pieces ranging from home décor to fashion accessories.
My Role
Product Designer (team of 4)
Timeline
6 weeks
Tools
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
User Research
The first thing we focused on was our research strategy. In order to identify the flaws in the current UX and UI, we conducted a usability test by interviewing people that fit our user archetype. These were owners of small businesses, who are looking for suppliers, preferably from Africa. Before we began our interviews we first needed to do two things.
- First we conduct a competitor analysis. Aside from using and understanding SAFI Label, this also gave us an insight in the market space and provided additional context for the problem we are working on.
- Secondly we create an interview guide in preparation for Usability Testing. This enabled us to conduct our interviews in a consistent and controlled manner.
Competitive Analysis
As part of our Competitor Analysis, we conducted an analysis on four websites with similar product offerings to SAFI Label. These were: Urban Zen, Goodee, Powered by People, and Novica.
We focused our research on Site Map, User Interface elements and User Experience Flows – including the Sign Up process, Check Out Process, Browsing, and the Features.
Urban Zen key findings
- Strengths
- Easy product discovery w/ links to each category
- Prominent CTA for “Add To Shopping Bag”
- Secondary navigation guides users to content nearby
- Weaknesses
- The mention of artisans buried within the “initiatives” link is not easy to find. Information is top-level, with no detail about individual makers.
- Action Items
- Create a “Meet The Makers” section to help buyers learn more about each artisan’s design process, where they find inspiration and learn more about the positive economic & social impact each artisan has on their local region.
Goodee key findings
Strengths
Call to action button is clearly visible
Search results display items with pricing, details
Organized gallery layout with product images
Weaknesses
On the landing page, very hard to read the paragraph text with the images as background
The decorative font is hard to read at times when there’s a busy background
Font varies from regular to bold. Needs to be consistent
Action Items
Include an option to order large quantities of a product
Clear, stand out a call to action buttons
Incorporate hover action over product image (when
gallery layout) to quickly add to cart
Powered by People key findings
- Strengths
- Simple and intuitive UI design
- Buyers profile has all the information, including the company profile, payment methods, and the tax ID
- CTA prompts users to sign in/sign up to see the wholesale price of the product they are currently viewing
- Weaknesses
- The user’s website is mandatory
- The navigation menu doesn’t indicate the current page
- No clear affordance or signifiers of how to finalize the purchase
- Action Items
- Make artisans’ profiles front and center
- CTA for signing up
- Simplify potential buyers’ signing up process
Novica key findings
- Strengths
- Organize products based on regions and artisans
- Artisan’s description is in story format
- The order is trackable.
- Weaknesses
- Site structure is based on the type of product.
- Doesn’t have information about artisans’ specialties.
- Doesn’t have consistent look throughout the site.
- Action Items
- Tag each product with its region and artists for filtering and searching purposes.
- Add an option to customize orders for wholesalers.
- Have consistent look throughout the site. Stick to branding guidelines.
Empathy map
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.
Job
Owner of small business
Industry
Fashion, art, and craft
Goals
To find suppliers of raw materials for their art and craft
Preferences
Being able to monitor order online
Says
- "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.
Says
- 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
User Personas
After feedback from user interviews and competitive usability testing, I created three lightweight user personas for SAFI Label based on their different shopping behaviors:
- Anna, a Conservative Shop Owner, has a value-based budget.
- Tim, an Explorer Shop Owner, has a love for exotic and unique products.
- Hadiza, a Home Supporting Shop Owner, has a strong urge to support her hometown.
Conservative Shop Owner
Anna
Want to find a new source of artisanal products. Origin of the products are not as important as the quality and value.
Goals:
- Keep the supply at a value-based budget.
- Find artisans that can support her creative mind at a reasonable price.
Explorer Shop Owner
Tim
Want to find supply sources that provide unique materials. Willing to pay a premium price for premium quality.
Goals:
- Find unique materials
- Find artisans that can support his creative mind.
Home Supporting Shop Owner
Hazida
Want to find artisans from her origin. Willing to pay more to support her hometown and promote her traditional designs.
Goals:
- Promoting design and material that are from her hometown.
- Find artisans to support a cause at her hometown.
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?
Key Features
Most wanted features people wish existed
- Able to review artisans’ portfolios before placing an order
- Collaborate with artisans to create fully customized items
- Have history, sourcing information, and quality of the material ready
- Track order process
- Discount code
Features will be included in the MVP
- Able to review artisans’ portfolios before placing an order
- Collaborate with artisans to create fully customized items
- Track order process
Ideate
Sitemap
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.
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?
Onboarding Flow
Search Artisans Flow
Place Order Flow
Wireframe
Header Menu
Included a mega dropdown menu into the design. This allows quicker results for users, especially since Safi has many products.
Home Page
Top panel with short blurb and CTA, following with story panel to introduce SAFI backstory.
Sign In & Sign Up
When click on Account button, the page will take the user to sign in/ sign up page.
All Artisans Screen
Grid view for all artisans
Sort & Filter
Option to search for artisans with filters and sort option.
Artisan's Profile
Artisan profile page provides stories, products, reviews, and option to contact for custom order.
List of Products
Grid view of all products and filters. A CTA for custom order is placed below the filters side panel.
Product Page
Besides details about the product, there are sections that link to the artisan, more product from the artisan, and more product that user might like.
Place Order
Once the item is in the cart, the user can start placing the order with the process of putting in information and get confirmation.
Style Guide
Validate
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.
Would like to have breadcrumbs to go back to previous find.
Able to search for desired artisans.
Able to place custom order from various locations. Would love to have pre-filled options when placing order.
Would like to be able to track orders.
Would like to have an account view to see history of orders, save account profile, etc...
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.
Removing bullets in the listing detail. Update new fonts and logos.
Apply Google and Facebook button styles.
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.
Apply photos on the homepage, and changed the content overlay.
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.
Updated the filter and custom order CTA
Custom order form with more visual and verbiage updated.
Next Step
Remaining Questions
What are the outstanding accessibility issues that we want to address? For example, will users of the webstie 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.