Crafting a User-Centered App
Mobile App Prototype
Explore the prototype here. Read on for more context.
My Roles
UX Design
UX Writing & Copy
User Research
Tools
Figma
Miro
Google Suite
Zoom & Slack
Timeline
2 weeks - April 2021
Fully remote team
3 UX designers
Michaels is one of North America’s largest providers of arts & crafts supplies and merchandise for makers and creators. With over 1,200 retail stores and enough sparkle to bedazzle the jean pockets of everyone in the US, the business aims to help people lead more creative lives. Our challenge was to make its app shine. ✨
What inspires crafters?
To learn how we could improve the retailer’s seemingly lackluster mobile experience, my team needed to gain some insight from crafters. We tracked ‘em down via Facebook groups and interviewed four people about their creative habits and shopping behaviors. We then mapped their feedback to identify some interesting trends. We found that 100% were project-focused.
A user persona began to reveal herself from all the interview data…
“When I go in a store, I’m on a mission.”
A look at Michaels’ existing app and its reviews gave us more insight. As half of our users said they’d never visited the app, we looked for opportunities to make the mobile experience more appealing.
home screen cluttered with info and doesn’t provide users easy access to projects
users weren’t thrilled with the app
category searches are text-heavy; no photos, not alphabetical, uninspiring
So what’s the problem?
Getting to know Ella sparked creative app-spirations of our own, so we looked at Michaels’ competitors and compared the app features of companies in other industries. Now we knew our mission…
Crafters need more thoughtful guidance, incentive, and inspiration so they’re better equipped to make their creative dreams reality.
We aimed for solutions to these questions:
How might we empower users to acquire the best products for their projects?
How might we make coupons and rewards more useful?
How might we help users get inspired?
How might Michaels become a one-stop creativity shop?
The Agile games begin!
To rocket launch the ideation phase of this project, Purvi, Max and I needed to work creatively, collaboratively, and rapidly. So we opted to run a remote Design Studio. Connected via Zoom, Slack, Miro, & Figma — we got crafty with it.
*you can almost feel the focus
While working in three different states could be challenging, we found a creative groove in this connected space. In just over an hour, we converged on our most user-focused ideas. The team expanded on our sketches, creating mid-fidelity digital wireframes via collaborative pages in Figma. We followed Ella’s lead to explore how she might open the app, search project categories, discover DIY projects of interest, access rewards, and get more out of the app.
Some first round wireframes
We explored how Ella might interact
Creating a style guide helped us identify and establish Michaels’ brand standards for consistency in our designs. This let us work independently, while mocking up a digital prototype with a cohesive look and feel before taking it for a test drive.
We connected with usability testers via Zoom. We asked them to show us how they’d find DIY projects that someone could make to wear to a summer music festival. We suggested a headband project and then observed as testers interacted with what we’d created.
simplified home screen; DIY featured in menu bar, less info overload
project search categories contain images
project results contain photos, project ratings, reviews, & answers to common questions
customer-shared projects inspire, offering descriptions, instructions, & more
project details include suggested product supply lists
all Michaels project products can be added to a user's cart with a click
simplified Rewards pages are easily accessed from the home menu bar
coupons & other desired features are found via MORE
Usability Testing Results
We conducted two rounds of usability testing and made improvements to the design after each round.
Results
100% of users found DIY helpful
60% commented that they liked the ADD TO CART feature for all products in a project
40% of users found coupons via MORE without guidance
60% of users went to SHOP before exploring DIY
Actionable Feedback
Add filters to project categories
With our updates, “festival gear” project results, for example, could now be sorted by difficulty level, most popular, featured, & more
“How do I go back?”
We added back arrows on all necessary pages to provide users easier navigation with the ability to correct. Heuristic oversight!
Add prices to products
We left out this important detail in the original prototype. Budget-conscious users need to know at a glance
Round 2 Feedback
66% of users found filter menus confusing, with irregularities
Some project filter options like “Zen Out” didn’t make sense without explanation
50% of users felt ADD TO CART was too small
Yikes. Users liked this feature, but it needed a hierarchical boost
“Are these alphabetical, or…?”
Users expected to see category items and search results organized in a way they could recognize
Assessing the sparkle ✨
At the end of our 2-week sprint, the product feedback we received from testers was largely positive. While Ella could better meet her project goals with the help of the reimagined app, Michaels would help customers lead more creative lives, and sell more products.
Next Steps
In another sprint, we’d focus on these areas:
Conduct user testing to define & add useful filter menu options for project searches
Make ADD TO CART option more prominent
Alphabetize product categories, project categories, and other listed elements displayed throughout the site for consistency and search-ability
Conduct user interviews and testing to determine how to best encourage, implement, and integrate user-uploaded projects
Work with stakeholders to explore how we might leverage rewards as incentives for users to share their personal DIY projects tagged with Michaels’ products