Jackson's Art: eCommerce Redesign
Jackson’s Art is a neighborhood art store/warehouse in London looking to improve their e-commerce site.
Note: Jackson's Art does not utilize this redesign. This is a speculative project where an archetype was provided.
Tools
- Figma
- Optimal Workshop
- Maze
- Google Forms
My Role
- UX designer
Timeline
Overall: 2-weeks
Discovery & Research: 1 week
Design & testing: 1 week
Problem
The business had an e-commerce site, but needed to improve it in order to to address the issues of the “Careful Critic” user who cared most about quality — while also maintaining the image of a small shop.
Solution
I created a feature that would enable the educated consumer to review and compare details more quickly. Due to time, I dedicated focus to the first HMW in bold below.
Surveys
Upon the kickoff, I struggled to define the strategy considering this was my first run creating surveys and without the supplement use of user interviews. I understood that my target audience was e-commerce shoppers. I designed a survey that was both open-ended and multiple-choice.
Conducting a survey was an optional requirement, but I wanted to put it into practice. What I learned is that of the 15 artists who submitted the survey, they shopped at their favorite art stores because of their reputation, it was clean, and close by and they offered a variety of selections including top brands. In addition, I learned that 80% of users purchased things that weren’t on a shopping list — meaning they enjoyed browsing. This meant that cleaning up Jackson’s current navigation menu needed better organization to allow for the ‘window shopper’ to browse with ease.
An added pain point that was provided via the aforementioned archetype (not from the survey) was that the user likes to compare multiple items before selecting which to purchase.
From their input, I was also able to determine which businesses would work for my Competitive & Comparative analyses: GreatArt, Plaza Art, and Utrecht; and Target, Amazon.com, and Walmart.
Card Sorting
To make sure that the site’s information architecture is aligned with user expectations, I conducted an open card sort of 75 items that were selected and provided by the instructional team. The sorting was sent out to 15 people using Optimal Workshop, but only 7 people successfully completed it. Our goal was to generate a more intuitive grouping for the existing product categories currently nestled into a lager subcategory. Participants were grouped mostly by paint, adhesives, pencils and supplies/paper. After organizing the data, I ended up with 5 categories — although, upon closer inspection there wasn’t a clearly defined system as people rushed through it. There wasn’t enough time to redo the sort with better suited participants. Even though they weren’t clearly defined, I was able to sense the trajectory.
Card sorting results from 7 participants. Information gathered using Optimal Workshop.
Sketching and Card Sorting
After creating two user flows (one including product discovery to checkout) I began the design process with low-fidelity sketches and wireframes to brainstorm solutions through visualization without losing time.
User Flow 2: Pelé wants to compare similar markers before completing checkout.
My sketches were based on the archetype/persona, the business goal, and the heuristic evaluation.
Sketches including the wireframe for the product comparison window.
Once sketches were completed, I began the wire-framing process using Figma. I came back to the sketches throughout the entire design process to make sure the primary goal and idea weren’t abandoned.
Sketches including the wireframe for the product comparison window.
Usability Tests
I created a fully-functional, high-fidelity prototype of the new flows using Figma. I conducted 5 usability tests in the first round and came up with one iteration. The first task was to find markers and compare two items; the second to add the item to cart and proceed to checkout.
issue 01: ‘Compare Items’ button
While people were capable of successfully completing the task within 2min., I noticed that 3/5 of users wanted to click the “compare” button before choosing items to compare.
solution 01: Remove the ‘Compare Items’ button
The solution was to remove the button until after the user selected at least two items to compare.
Next Steps
I would love to go back to conduct a better card sort utilizing more items specific to Jackson’s site. I also would also ideate more visual solutions from the HMWs. I would also:
Learnings
I learned how to conduct surveys for the first time as well as how to better formulate questions in hindsight. I realize that if given an archetype beforehand, I could’ve been more creative with the surveys and utilized the opportunity to act as though I’m rerouting back into the diverge stage of the research instead of as a first-time approach. I was also able to learn how to utilize and create component variants in Figma which was very helpful in prototyping the solution.