Project overview
The product
Craftopia is a customer loyalty app that offers a variety of art and craft products. The app allows users to search and order products in advance. The app targets craft enthusiasts who are on a budget, providing them with regular discounts and access to product advice/tutorials.
The problem
Many craft enthusiasts lack time and/or finances to purchase products in physical craft stores. Some have further challenges, for example living with a visual impairment.
The goal
Design an app for Craftopia that makes purchasing art and craft products quicker, easier, and more cost effective.
My role and responsibilities
Sole UX researcher and UI/UX designer for the Craftopia app, from conception to delivery.
Paper and digital wireframing, competitive auditing, conducting interviews and usability studies, low and high fidelity prototyping, accounting for accessibility.
Understanding the user
Summary of user research
To better understand Craftopia users and their needs, I performed competitive audits, and created user flows, user personas, and empathy maps. The primary user group that I identified was users who do not have adequate time or finances to make craft purchases in-store.
The research further revealed that time and money were not the only inhibiting factor to purchasing in-store. Certain users had challenges with accessing products, for example due to a visual impairment.
Pain points
Finances. Art and craft products can be quite unaffordable.
Unsure of product usage. Stores can be overwhelming with so many products, especially if users don’t fully know what everything can be used for.
Accessibility. Text on product labels are hard to read, other craft platforms are not equipped to be accessible.
User persona
Problem statement
Byron is a craft enthusiast who needs a way to search and order products in advance because she is visually impaired and on a budget.
User journey map
Empathy mapping
I mapped Byron’s user journey to better understand and empathise with what users need in an app like Craftopia.
Starting the design
Paper wireframes
My first step in the design ideation was to sketch out my initial ideas onto paper. I kept pain points in consideration, and aimed to design screens that would have a clear, easy to navigate user flow.
Digital wireframes
As a next step, I started wireframing my paper designs digitally into Figma. I implemented a navigation bar to allow users to easily navigate through pages. The search bar lets users find exactly what they have in mind, and the search page allows for suggested products and tutorials to appear.
Low fidelity prototype
After designing individual screens for the digital wireframes, I connected the screens into a low fidelity prototype. I prioritised the user flow of finding and ordering a product.
The link can be found here.
Usability study
I conducted a usability study with five participants using the low fidelity prototype for Craftopia. This study supported in how to progress with the high fidelity mockups and prototyping.
When creating the research plan, I established research goals as well as research questions that the study aimed to answer.
The full research plan can be viewed here.
Study findings
There were two main findings from the usability study:
Users want to edit personal details more easily, through the settings or profile page
Users want to navigate through product categories and not just use the search bar
Refining the design
High fidelity mockups
To begin designing the high fidelity version of Craftopia, I created a ‘sticker sheet’. With this at hand, I could easily place components, icons, and colours where needed.
I kept the basic structure of the mockups similar to the wireframes, but added additional features after the findings from the usability study.
Originally, the primary colour in Craftopia was a shade of orange, with the hex code #F69C48. However, after checking accessibility guidelines, this shade failed all accessibility checks. I then changed to the shade of blue that Craftopia uses now (#387AAA).
High fidelity prototype
With all relevant screens designed, I put together an interactive high fidelity prototype. The link can be found here.
Accessibility considerations
Colour contrast within the app is accessible for all users.
Possibility to change the language of the app within settings.
Alt text is included on imagery, to be more compatible with screen readers.
Going forward
Impact
The Craftopia app allows users to shop for art and craft products at their own convenience, and encourages their creativity by providing access to product and craft ideas.
What I learned
During the design process for Craftopia, I learned the importance of user research and usability studies. Putting away my own assumptions and listening to what the user really needs is what makes the difference in UX design.