Case Study 01
A project by UX/UI designer Luci Cantey
Crafter & Maker
Here’s the problem. As a crafter, specializing in sewing home décor and garments, often simultaneously engaging in several complex projects, I needed help organizing all the details. I like using my phone to conveniently keep a lot of info in one place without worrying about where I put that scrap of napkin full of carefully calculated quilt block measurements. Surely there’s an app for that?
I couldn't find it. So I decided to make it.
Roles
UX Research
UX/UI Design
Wireframes Prototype
User testing Analysis
Tools
Google Forms Pencil and Paper Figma Adobe Xd Adobe Illustrator Usability Hub Maze
The Solution
What’s the problem?
Problem
Crafters and Makers like to organize project details, plan out aspects of a project and track progress. They also want to catalog their collections of components. There are a number of different apps for people engaged in various crafts, but each is specific to a craft and to only one aspect of that craft.
Audience
This creative community comes from a wide variety of demographics and backgrounds. For the purposes of this project, I focus on Quilters and the characteristics of a quilting project.
Goal
Give the creator community an user friendly app that lets them record details for every step of a project, all in one place with beautiful, accessible UI.
Competitive Analysis
My comparison research focuses on three quilting apps that had the most downloads from the Apple App Store,: Quilter 2, Quiltful and Stash Star.
Combining app store reviews, feedback from my user survey and my own experiences, all three of the competitive apps show definite trends in frustrations:
Does not allow users to do everything they want in one place, lacking in features
Poorly organized structure
Complicated to learn, not user friendly
Plus, each app only allows users to conduct a single task.
Adding The Specifics
This SWOT analysis defines the characteristics I need to take advantage of or avoid;
strengths of competitors I can work with
weaknesses of the competition
opportunities I have to counter those weaknesses
potential threats to my app that I need to address.
Discovery and Research
In a survey conducted with members of a Facebook quilters group (although all participants indicated that they engage in more than one type of crafting/making), I asked users what they would want out of a project planning app, if they were even interested in using one at all. Within a few hours, I had 101 responses and tons of feedback, along with a very positive response to this idea. I asked users what other apps they had tried and what they liked and didn’t and why.
Less people than I expected had tried a quilting app.
Very few continued using the app on a regular basis. People liked the idea of a project planning app on their phone, but they had felt the same frustrations I had when trying the competition.
There was quite a bit of crossover regarding why people had stopped using an app and reasons others cited for not trying one.
Users were excited to tell me what they did want from a project planning/cataloging app.
Personas to Design For
As a connective tool to focus on during my development of this app, I created several personas to design for. They represent the users who participated in the survey.
Morgan, a Gen Z influencer creative
Wants something portable
Sells on Etsy— works on multiple projects at once and needs to keep details organized and separate, needs to track costs and have note space for customer details
Wants to keep a shopping list handy for when inspiration hits her
Other apps don’t offer the features she wants, they're not user friendly or customizable and they don't have a modern look/feel, not enough photo capability
Candice, a Gen X working mom hobbyist
She loves her huge stash of fabric and wants a way to know what's in all of the boxes she keeps it in, without digging.
She gets busy with family, so sometimes doesn't get back to a project for a while, she wants to remember where she was AND she may want to select a project based on what stage it's in.
She wants to design a quilt in an app and have it calculate the yardage.
Other apps don't let her design and calculate fabric yardage and add project details all in one, she finds them confusing and says if instruction is even available, it's not easy to find.
User Stories Developed From Persona Needs
High Priority for MVP
As a crafter, I want to be able to organize projects and components, because I tend to be working on several things at once.
As a quilter, I want to remember what stage a quilt is in, so I can track my progress and prioritize projects, especially if I
am making commissioned items.
As a fabric junkie, I want to be able to photograph and catalog my stash and use those photos in planning files for
projects, so that I can get all the details of my ideas down when inspiration hits me.
Journey Mapping
Creating and understanding Morgan and Candice helps me understand detailed information concerning their needs, thoughts and actions, which then determines the language and structure of the site.
Info Architecture
Because of the nature of the app, I need to make sure there are a lot of “happy paths.” Each user is so unique in what they want to add and how they might want to move around inside the app.
For the scope of the project at this time, I’ll focus on the project detail screens, including a flow for adding fabric details (seen at left).
Making it real(ish)
By starting with sketches, I can play with various layouts and page hierarchies.
Wireframing is the stage where I ask myself some important questions, the whole time making sure to think about how my design decisions work for my personas, Morgan and Candice.
How does the copy work on the screen?
Is the component library well stocked?
Is hierarchy obvious?
Can users find what they need?
Is the learning curve minimized?
Are the contents of each screen relevant?
Is this design accessible to all users?
After flows determine the types of screen I needed, developing the wireframes add clarity to exactly how many screens each flow requires.
Wireframes give me a big picture view of all the components I need and help me determine how I want to incorporate the branding into the UI.
From the main project set up screen, a user is able to add details for all of the fabrics included in the quilting project.
Wireframing lets me arrange components and determine what actually fits well on a particular viewport, in this case, a phone.
Research shows a need for a wide span of optional information fields, but not each person will want to use every field.
To keep the UI clean, I created collapsible menus.
The wireframe stage is also the time to start thinking about accessibility features. I want to be cognizant of:
Placement and distance of items, spacing and grouping
Contrast
Voice command option when keyboard pops up
Interactive elements are easy to identify
Easily identifiable feedback
Form elements include clearly associated labels
Moving to the Mockups
Refine the wires and add the UI
For my logo, I chose to use an interesting font without any sort of graphic, because I want it to be all purpose and not look like I was favoring a particular craft discipline.
I’m using mainly black text on white with some pops of bright color, stimulating, happy and provides contrast to encompass all levels of visual ability users may have.
The fonts I want to use should be clean and easy to read, Font choices will indicate hierarchy of info and distinguish types of info, i.e. instructions versus commands.
I also want to focus on using font size, as opposed to just color, to differentiate copy.
My goal is to incorporate the branding into the UI while considering the related accessibility needs.
User Feedback, the True Test
I recruited 13 of my user survey participants to take prototype tests I set up with Maze. The flows I focus on for testing are:
Saving photos to a project
Adding details using the drop down menus
Adding details using the collapsible category menus
Adding fabric details top the project, while also saving the fabric details in the “Stash” catalog
Updating complete steps in the “Progress Meter”
The good news?
Lots of great, positive feedback from the testing group— 12 out of the 13 testers said they would love to actually use this app!
In large part, users accomplished tasks handily and had a positive response to the compact solution for managing so many data entry fields. They note tat even if a task was difficult to complete at this stage, they like the abilities offered.
Let’s look at a couple less successful screens and the fixes.
Users were able to accomplish a task adding details from the drop down menus with ease.
To keep my ego in check… learning opportunities and value adding edits
Quilters tend to buy more fabric than they need for one project, so it’s important to include a feature that lets users simultaneously add a fabric to their project and also to their “Stash” collection, so they can track the remaining amount of fabric.
The heatmap reflects a couple of issues:
Multiple components for the same type of task leads to confusion
Cramming too much instruction into a smaller amount of copy leaves users confused
Dense instructions for the task leads to confusion
People who did figure it out liked the idea of saving it to the “Stash” catalog at the same time as entering the fabric into the project, but this direction block wasn’t working.
The solution for correcting the component inconsistency is an easy fix, just make the buttons match. This consistency helps alleviate error.
Users can appreciate the value of a more robust app that requires instruction, IF those instructions are presented in a manner that makes sense. Adding a popover instruction panel gives plenty of space to adequately lead the user down a happy path. I want to strive to ensure a user only needs direction a few times before it becomes intuitive.
Adding a background color to the help icon made it stand out more. I positioned it like a tab on the edge of the page so users can always find it fast.
Testing shows the “Add a Photo” page needs some cleanup.
Users were tasked with tapping the star icon to select a cover photo for the gallery. The heatmap indicates users had trouble finding the star— I thought the white background would make it obvious, but that wasn’t quite enough.
Copy instructing the user how to set the cover photo was too wordy. That density overcomplicated a simple step.
Increasing the size of the star and moving it to the top edge of the image makes it easier to find.
Moving the trash icon out of the image and inline with the caption gives more space to increase the size of the icons that sit on the image.
Simplified instruction gets right to the point and prevents error.
Making a process overly complicated, such as how a user highlights a button for a progress stage progress, may come from a well meaning place, The intent was to let the user have multiple ways to mark steps, plus I wanted to give them a way to eliminate progress steps they may not be using from cluttering up their Project Summary Page. That first iteration and another example of maximized instruction proved problematic for users.
Simplifying the process and the instruction gives the same result and is much more effective for users.
Making a process overly complicated, such as how a user highlights a button for a progress stage progress, may come from a well meaning place, The intent was to let the user have multiple ways to mark steps, plus I wanted to give them a way to eliminate progress steps they may not be using from cluttering up their Project Summary Page. That first iteration and another example of maximized instruction proved problematic for users.
Simplifying the process and the instruction gives the same result and is much more effective for users.
Conclusion
Summary page only shows the fields a user has decided to fill in. No annoying blanks to scroll past.
What went well?
I solved the problem Morgan and Candice were having by giving them a place to organize projects and components, track progress and prioritize projects and photograph and catalog their “Stash.”
Very positive feedback from testing groups! Several people told me they were extremely interested in the app and wanted to be kept in the loop as it advances.
Some of the tester commentary included:
"Love this! Super pumped.""I absolutely love it. "
"This was super easy to use - very intuitive and clear instructions. I’m excited to see where you go with this! "
What did I learn?
Minimize Instruction— Don't forget that the user hasn't been on this journey to develop the app- it’s all new to them and any copy or instruction needs to reflect that.
Error Prevention— Be wary of overcomplicating a process. Just because it may seem more "sophisticated" to do it a certain way, nothing supersedes the ease of use and familiarity for the user.
Consistency— When offering multiple options in a task, present them all in the same format/with the same item from the component library.
The future of Crafter & Maker
Continued revisions on screens with updated branding
More usability testing
Expand flows to include other aspects of project set up, craft calculator collection and Stash catalog feature
Conduct accessibility tests to make sure my product meets requirements for all users
Talk to some developers and make this real!
Thank you for reading.