Checkout Process Redesign
How might we help customer’s shopping experience in order to for them to quickly and smoothly purchase items at Michales?
Project Role
UX Designer
App Content Synthesizer
Heuristic Evaluator
Methods & Tools
Figma, Figjam, Slack, Secondary Research, Michaels App, Prototyping, WIreframming, Google Slides, Google Documents
OVERVIEW
During my Bootcamp at Brainstation, my group and I work collaboratively in a design sprint to conduct a heuristic evaluation and redesign of Michaels's current checkout task flow. We were given just 1 week to assess any heuristic violations and develop a redesigned high-fidelity prototype.
Background
Problem Space
How might we help customers’ shopping experience in order to for them to quickly and smoothly purchase items at Michales?
Our problem space is that users will find it difficult to check out as the process is lengthy but also confusing. There are many heuristic violations that we will identify in this evaluation.
HUERISTIC EVALUATION
An inspection method is used to find usability problems in a user interface design. In an effort to support Micheals’ digital platforms, our team conducted a heuristic evaluation. A method to find usability problems in a user interface design. We as your Evaluators examined Michaels’s iOS interface and judged its compliance with recognized usability principles.
Methodology
Nielsen Ten Usability Heuristics
Here are all ten of Nielsen’s usability heuristics and the 5 we focused on are highlighted.
In order to assess the severity of usability problems, we used a 0-4 scale, With 0 being no problem at all and 4 being the most catastrophic usability problem. We considered a few factors such as the frequency with which the problem occurs, the impact of the problem, and the persistence of the problem.
Severity Scale
PROCESS & ITERATION
Martha our proto-persona is an online customer wishing to purchase art supplies with Michaels. Her goal is simply to use the guest checkout. Her main pain point is that she is overwhelmed with the amount of info which takes too much time.
Proto-Persona
Current Checkout Task Flow
Something to keep in mind is these are extended screens that require a lot of scrolling.
Brand, Typography & Colors
USER CONTROL & FREEDOM
Prioritization Matrix
It was important for us to stay consistent with Michaels's brand style guide focusing on usability design improvements. We continued with Michaels's branding typography and color palette.
We will begin with the user control and freedom heuristic. Which emphasizes giving the user a clearly marked exit to leave an unwanted action.
Design Improvements : Back Navigation
VISIBILITY OF SYSTEM STATUS
Prioritization Matrix
Next is the visibility of the system status. This focuses on the system's need to keep users informed with appropriate and timely feedback.
Design Improvements: Completion Status
CONSISTENCY & STANDARDS
Prioritization Matrix
Next are consistency and standards. This heuristic focuses on how users should not have to wonder whether different words, situations, or actions mean the same thing.
We sketched how the new payment format could possibly look like.
Design Improvements: Inconsistent Payment Format
AESTHETIC & MINIMALISM
Prioritization Matrix
Lastly, we’ll cover the aesthetic and minimalism heuristic which emphasizes that only relevant units of information are needed in the design. Based on our evaluation, 5+ pages violated this heuristic so it was imperative for us to implement design solutions.
Design Improvements: Information Overload
After identifying the heuristics of the current task flow and implementing those new designs we have finally arrived at our redesigned prototype for Michaels's checkout process.
REDESIGNED PROTOTYPE
Click here for the redesign prototype.
CONCLUSION
Key Learnings
Heuristic evaluations are key to identifying areas that need improvement. Very minor design improvements can improve overall usability significantly. Design constraints allow designers to focus on function vs. visual identity
Next Steps
Conduct A/B testing with new design improvements
Finalize the project by addressing other heuristics and pain points of our persona
Continue design improvements toward a desktop version