Safi logo

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.

Designing Process

We follow IDEO’s Human-Centered Design and Lean UX Design Thinking process to make sure that my design decisions were supported by user research and feedback.

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 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.

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.

Sitemap

Ideate

User Flows

We identified the 3 red routes for this website:

  1. Onboarding flow: how do people sign up and sign in to the page?
  2. Search Artisans flow: how do users search and filter the artisans they are looking for?
  3. 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.

All Artisans View

Grid view of all artisans. Option to search for artisans with filters and sort option.

Home Page

Top panel with short blurb and CTA, following with story panel to introduce SAFI backstory.

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.

Artisan Profile

Artisan profile page provides stories, products, reviews, and option to contact for custom order.

Style Guide

User Testing

We performed usability testing on 5 users who fit the persona. There were 5 tasks during the testing:

  1. Sign up for an account
  2. Search for artisans
  3. Finding product
  4. View product details
  5. Add to bag

Below are key takeaways from our usability testing.

Would like to have breadcrumbs to go back to previous find.

User 1 Search for products

Able to search for desired artisans.

User 2 Search for Artisans

Able to place custom order from various locations. Would love to have pre-filled options when placing order.

User 3 Custom Order

Would like to be able to track orders.

User 4 Tracking Order

Would like to have an account view to see history of orders, save account profile, etc...

User 5 Profile Page

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.

12_product page13-product detail

Added the artisan’s specific areas of design. This will ease the experience buyers/consumers have when searching for products to purchase wholesale

09_artisan detail_review10-artisan detail-review

Changed from black text to white text overlay. Updated the filter list and adding visual.

07_all artisans_filter detail08-all artisans-filterdetails
Clickable Prototype
All Hi-Fi Screens

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.