UX CONCEPTUAL PROJECT
Bringing mom and pop online.
Creating online shopping for SF’s favorite quirky variety store.
The brief.
Due to the COVID-19 pandemic, Cliff’s Variety wanted to retain business and adapt to the changing commerce landscape while simultaneously preserving their local mom-and-pop charm. Enter online shopping.
Duration.
2-week sprint
Role.
Apart from user research, I completed this project solo from heuristic evaluations to an intuitive and pleasant hi-fi prototype.
Tools.
Figma
Optimal Workshops
Method.
Heuristics evaluations
Competitive and comparative analyses
Card sorting
Wireframing
Prototyping
Usability testing
THE PROBLEM
It’s simple: no online shop, no business
You can’t sell remotely unless you have an online shop.
Going into a store to purchase goods is riddled with uncertainty for our target user who carefully researches and compares products. Cliff’s is now facing decreased sales as customers are moving their business to online shopping where they can ensure they’re buying the right product by reading reviews, comparing products, and reading detailed product specs.
Since Cliff’s doesn’t have an online store, there is no avenue for business from customers that prefer to have the internet at their fingertips. Additionally, Cliff’s website lacks an intuitive UI and IA, causing confusion and frustration for the user.
THE SOLUTION
Empower the user.
Equip them with the tools to make an informed decision, remotely.
I designed for Cliff’s an online shopping component to their website that is familiar, intuitive, efficient and powerful. In addition to the basics of search, the shopping cart, and checkout, I met the target user’s needs by featuring filters, sorting options, customer reviews, extensive product details, and the ability to compare up to 4 products side-by-side.
These features, folded into an easy-to-use shopping UI, makes the process of researching and comparing goods easy. The customer can now purchase their product confident that they made the right choice -- all while supporting a local business.
Solution objective.
Clean up disjointed and cluttered experience.
2. Incorporate bespoke online store.
3. Foster confidence in product purchases.
How I approached it.
Making order from chaos.
In order to get a better sense of what to deliver for my MVP, I had to pare down the overwhelming possibilities of what the product could do to what it absolutely needs to do. Creating a list of features and ordering them by importance was immensely helpful for narrowing my focus to a laser-like level. What was once nebulous and overwhelming became clear and actionable.
Don’t reinvent the wheel.
The second portion of my approach was to see how competitors, both direct and indirect, executed the key features I had just determined. By performing a feature inventory, task analysis, layout comparisons, and pluses and deltas, general trends started to appear that would help me create a UI that was familiar and flattened the learning curve.
Finding my blindspots.
Once I had a working prototype based off of my previous findings, as well as heuristics evaluations and card sorting, I performed usability tests to unveil my blindspots. The tests revealed a number of insights that I incorporated into my final prototype, making it stronger and even more intuitive.
Deliverables.
Intuitive, familiar UI and IA.
Use familiar UI, features, navigation, IA and elements to ensure that our target user is not stuck learning how to use the website. For the sake of keeping the user from experiencing friction, I aimed for a design that prioritized familiarity over originality.
Compare multiple items at once.
This feature allows users to select (and deselect) up to 4 items to compare side by side. This was the most challenging feature to implement, but as you can see it is easy to use and effective.
Filter and sort results by criteria that matters to you.
A staple of ecommerce sites, this feature was especially important for the target user. In addition to the ubiquitous left-column filter, I incorporated collapsible categories and a toggle switch for the entire filter to reduce visual clutter and make things easier for the target user.
Read and submit customer reviews.
Since the target user wants to be confident about their purchase, I dotted user reviews in almost every step of the UX journey, ensuring that it’s always visible. In addition, I included the option to rate reviews, with most helpful positive and negative reviews at the forefront.
Results and reflections.
Create a blueprint before you build the house.
Doing the necessary research and evaluations was key in enabling me to create a product that is easy to use and hits all the checkboxes. By holding off on scheming a product in my head, and letting the data inform my design, I was able to create a wireframe that was not what I thought was best, but was in line with ecommerce design standards and the goals of Cliff’s and its target user.
Iterate, test, rinse, repeat.
Despite putting in a lot of research, evaluation, and analysis prior to even creating the first sketches, it was clear that although the first tested prototype was intuitive and strong, there were a few changes that could be made to the product. Before I send over the prototype to engineering, a second and perhaps even third round of usability testing will ensure that the majority of UX kinks will be ironed out.
Get in touch.
Let’s build something together.
jamesrothbart[at]gmail[dot]com
Oakland, San Francisco Bay Area