UX/UI Design for Web
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.
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.
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.
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.
We identified the 3 red routes for this website:
We performed usability testing on 5 users who fit the persona. There were 5 tasks during the testing:
Below are key takeaways from our usability testing.
Would like to have breadcrumbs to go back to previous find.User 1
Able to search for desired artisans.User 2
Able to place custom order from various locations. Would love to have pre-filled options when placing order.User 3
Would like to be able to track orders.User 4
Would like to have an account view to see history of orders, save account profile, etc...User 5
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.
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.
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.