Redesign Case Study
Length of the project: 2 weeks
My role: UX/UI Designer
About the project: During my 6 months at Boozt I've been challenged by several different tasks, both small and big. The tasks let me become more and more familiar with Boozt every day. Working with Design Systems, developing my UI skills and taking on new challenges has allowed me to grow as a UX/UI designer. The difference from day 1 until now is huge, not only by professional development but also personally. Therefore, I was very proud and happy to take on this task.
This task was given to me by the end of my internship. The idea was to give me free hands and choose areas of improvement on mobile/or desktop web of Boozt.com or Booztlet.com.
Areas of improvement:
When browsing during a task or during my personal shopping, I've always had my thoughts on different improvements. The area I decided to focus on was:
The product listing pages on mobile.
I define high value to the users/customers as providing easier navigation. To find what they are looking for without any difficulties and to navigate seamlessly. The areas I decided to focus on within the mobile product listing pages are:
1. Redesign of the filtering.
2. A quick-shop feature added to product cards.
3. A "back to top" button for easier navigation.
Competitive analysis
I started by doing a competitive analysis to:
- Gain a broader understanding of how to showcase the different features
- To gain some inspiration/ideas
I did it for filtering, product pages as well as product listing pages!
Frankenstein UI
I decided to do a mashup of my favorite elements within my findings to showcase my vision. It's an exercise to open up for creativity and play around with different looks!
Part #1
Redesign of the filtering
Why?
I believe that the UI of the filtering can be improved.
As seen to the left, when you press “filter” a modal shows up with different categories to filter within. It’s only when you press one of the categories that the alternatives show up, which is one click more than actually needed.
Hypothesis
"Users don’t find the current filtering quick and simple on mobile."
Solution:
My thought is to showcase all alternatives within the filtering when the modal pops up. In the current design it’s hiding the alternatives within the filter categories. In this way, the users will get a better overview and have an easier time to filter. This will give clarity on what is available or not when filtering by visibly showing the status of the choices. I also see potential in improving the prize range filtering. In the current design you have to checkmark a certain range for example “300-500SEK”, it’s not very specific. My solution for this is to have an actual scale where you can drag to choose the specific range you wish for.
KPI's to evaluate
-
Time spent on filtering.
-
Time spent on listing pages before adding a product to cart/favorites in case of filtering.
How to measure
-
A/B testing
-
Set up tracking to see if the feature is being used successfully.
Lo-fi wireframing
To save time in the long run, I started lo-fi to wireframe my vision for the filtering redesign.
A similar filtering I’ve imagined already exists on Booztlet, I really like the way it offers very specific choices.
My thought was to make a twist on that design and to keep it simple.
Such as only showing the "Clear" button once alternatives are filled in to provide a clean look! I played around with different looks and that gave me a good foundation to go mid/hi-fi!
Blood, sweat and tears
(jokes aside, this was fun)
made the lo-fi wireframes turn into a detailed mid/hi-fi prototype.
Hi-fi prototyping
Part #2
Add to cart feature (aka quick shop)
Why?
When it comes to shopping, every user is different and have different needs. But one thing that I believe would benefit Boozt is to have a “add to cart” button on the product cards on the listing pages.
Hypothesis
Users want a quick way to add products to cart.
Instead of having to go to the PP to add a product to your cart: You can simply use the “add to cart” to select size and add to cart. This modal also has potential for upsell of products after the selected product has been added to the cart.
The feature of quickly adding an item to cart is very handy and it already exists on Booztlet. The thing I would like to improve about Booztlet’s version is that the modal can be made smaller and with less information. I like to keep the design very simple and minimalistic.
The placement:
I tried out several different looks of where the button would fit the best.
I also did some research and the optimal button placement follows the Gutenberg Principle. You should place your buttons at the end of the user’s scanning path when they’re ready to take action. When the user scans the product card, they end up in the bottom right corner.
KPI's to evaluate
- Amount of products added to cart with the quick shop feature
- Higher conversion rates
How to measure
A/B testing, set up tracking to see if the feature is being used
But... What happens when you press the button?
I made sure to document everything that the modal should contain before I started wireframing. Including all edge cases of products having different sizes, colours and all possible combinations there was.
When a product had been added to cart, I wanted a final step in the modal to show the success state + possibility to continue shopping or go to cart! Then I started wireframing as seen below 👇
From lo-fi to mid-fi...
I made my lo-fi wireframes come to life by using the Design System as well as all of my learnings from the past 6 months.
From mid-fi to hi-fi...
One of my favorite parts: Connecting everything together.
If you want to try out the prototype, click HERE
I've named the different product cards depending on the size of the modal, clever right? 🤓
Part #3
And last but not least, the "back to top" button
What?
A “back to top” button that will appear when you have scrolled a certain amount down the listing. The current “back to top” button is located in the very bottom of the page, which might appear hidden.
Referring to an article I read, any page that is longer than 4 screens should have a back to top button.
Placement in the lower right corner, because that's where the users expect to see it.
We can take advantage of an icon to describe the buttons purpose. No text needed.
Hypothesis:
Users don't use the current “back to top” button because it's too hidden.
KPI's to evaluate:
Amount of users who actively use this button when browsing on the listing pages.
How to measure:
Set up tracking to see if the button is being used.
Congrats! you made it this far 🥳
If you like my work, don't hesitate to contact me on:
Matilda.svensson@hyperisland.se
Here's some nice illustrations of my prototype in action 🎥
