M I S B H V
Side Project
Polish-based streetwear brand MISBHV has risen from the streets of Warsaw to international acclaim, by becoming one of the most talked about contemporary labels since starting out as a t-shirt line for an inner circle of models, artists, rappers, and skaters. I designed an example of the mobile app and website that the brand could have based on research.
Duration
One Month
Role
Product Designer
Deliverables
Interviews
Task Flows
Competitive Analysis
IA
Tree Testing
Wireframes
Mockups
Prototype
Usability Testing
Tools
Figma
FigJam
UXtweak
Miro
Maze
Where are the problems?
Test - > Find search on homepage
Responses : 5 participants
- I can't find it I don't know where is it.
-
Search is not legible.
-
Search is at the bottom of the page so it's kind of hard to find it's usually at the top of the page that's where most of the people will look. The homepage looks cool but my instinct was to click on search and nothing happened so I was confused.
-
Search is not legible it's really difficult for me to find it. It took me a while to find a search on the homepage.
On desktop, Search is not in a place where the user would usually find it. Commonly, we will find Search on the top-right of the page. This creates confusion for the audience as a result. Another issue is that the Search feature has not been designed as an icon.
The Search on the homepage is almost impossible to notice as the font colour blends in with the background image. It looks more like a feature that is disabled. This will be very annoying for users who tend to go straight to ‘search’ when they are looking for something.
The lack of footer on the homepage is another problem. In order to check the footer, which has loads of useful information about social media and shipping, you need to go to the category and scroll down to the bottom of all the products that are displayed. This can be very irritating for the user as we know no one has patience online and we are always in a rush.
MISBHV current website
What's the goal?
From a business point of view, to design a website that will allow users to search quickly for products or find them on the mega menu. This will increase sale for the company as customers can easily find for what they are looking for and won't leave the website quickly while struggling to find a basic function like search.
Research Books
- Don't Make Me Think by Steve Krug
-
Designing Interfaces by Jenifer Tidwell
-
Information Architecture: For the Web and Beyond by Jorge Arango, Louis Rosenfeld, and Peter Morville
Task Flows
Competitive Analysis
Link to Visual Competitive Analysis Click Here
Link to Competitive Analysis Click Here
Information Architecture Redesign
Link to Information Architecture Click Here
I want users to simply focus on purchasing products on the website, which is why I removed some sections from the global navigation and moved them to the footer. I changed some labels, for example MY CART to BAG, a common label among e-commerce websites.
I removed repeating content like the SPORT section and moved it to the WOMEN and MEN sections. Furthermore, I organized the subsections in alphabetical order so it is easier for the audience to navigate on Mega Menu. Footer categories are organized by topical and alphabetical schemes.
Tree Testing
I decided to test my redesign of information architecture for MISBHV with tree testing I wanted to gain data and see how many iterations I will have to do in the future to make information architecture understandable for the audience. Tree testing gave me very important data that's a few learnings that I gained after obtaining tree testing.
- Doing tree testing is an extremely important and interesting research technique for me it helped me to see data about how other people think and navigate online.
- When doing a tree test, it's crucial to ask very precise questions. Your question will influence your results. That's why it's so important to think carefully about the best solutions beforehand and then ask participants to take part in the test.
- Label Stockists didn't work out very well for people whose first language is not English. This needs to change, so people can easily find information about other stores and websites where they can purchase other MISBHV products.
Solutions
Homepage
Search
Product Listing Page
Product Detail Page
Usability Testing
I decided to do usability testing with the prototype of the website I designed. I aimed to gain data and find out what I may need to improve my design. I also wanted to understand with which parts of the design testers struggled with the most when accomplishing a task that stated:
Look for women shoes, pick black leather boots on the top right corner, pick size 5 and add them to the basket.
I am a huge fan of usability testing and it is the first remote usability test that I have run with users. In my opinion, everything that designers create, starting from website to app, needs to be tested multiple times. I strongly believe that usability tests make the designer's work easier.
You can reduce the amount of discussions about how a design should function, simply with usability tests. With these you will have data which to help you improve your design.
From a business point of view, you are helping increase revenue while reducing all unnecessary problems that users will face, starting from browsing and searching and finishing with adding products to baskets and placing the actual purchase.
Key findings from a usability testing:
Problem ---> Testers testing prototype on the phone
-
Say to your testers right at the beginning to not test the website on the phone. This will reduce the amount of tester who give up the test struggling to tap on the phone on a prototype which is designed for desktop.
Problem ---> Selecting the size of the shoes
- The option to pick the size of the shoes has a very high rate of misclicks. This design would never work well on the mobile where users click on the size because it's quite difficult for people to precisely select such a small space. People struggled to click on size 5 even when they were using a mouse, which is why I am adding iteration to this page.
- Iteration involves a very simple solution in which I am adding a rectangle, so when the user will hover or try to tap this option, it will show them a selection. At the same time, a grey rectangle will enlarge space on which the audience can click so they don't need to be so precise while selecting a size.
Product detail page tested at usability test
An updated version of the product detail page based on data from a usability test
Problem ---> Refining search results
- Testers struggled on this page, what I found out through the usability test was that 2 testers went straight to search after seeing shoes in the search bar didn't know what to do next.
-
I wanted to check if after typing shoes in the search bar users would notice the option to refine search results for women and man. Results clearly show that this design didn't serve the audience very well. None of them noticed an option to refine search results.
- I designed an iteration for this problem design that involves showing the audience option to refine search query first and later on, after clicking in women option they will go to the product listing page for women. This would have to be tested again to check if users follow the route which I designed.
Refining search results page tested at usability test
An updated version of the refining search results page
Takeaways
Follow the conventions - widely used design patterns at e-commerce websites
- There is a reason why the majority o e-commerce websites look similar this means these solutions were tested many times before and they work. Don't invent new solutions if the existing ones work very well and the audience learned before how to follow them on many different websites already.
-
As an example from refining, search results from usability testing show designing a new solution that is not widely used on other websites clearly shows that people don't understand how to use them. This results in them having to learn new ways of using your website, which is just not necessary.
-
Using conventions, you make people’s life easier because they don't have to figure out what things are and how they suppose to work.
Do a proper competitive analysis
-
To follow conventions you need to understand how other e-commerce websites are designed and test them. Look for issues understand why they are not good for users and business. Look for solutions that work well use them to your advantage.
Test your design with a usability testing
- Don't assume that people will understand your design as even the most simple solutions can be difficult for some people. I think is very important to understand that what you think will be easy for users to see may not be the case at all, and the best way to test this is to do usability testing.
-
Testing your design even on just 5 people can give you important data on how to improve your design. I believe that you should start testing your design as early as your can. This is what I would do differently, and I would test the prototype earlier in the process as it just saves your time and allows you to design a better experience for others.
- From a business point of you view, you save company money, allowing yourself to find as many issues as you can when you start testing right at the beginning.
The way how you think
- Try to put yourself in user shoes try to think how this person would behave on this page where they would go next? Can they understand what this label means? What do they see ride at the beginning when they land on this page? Can they go back if they don't know what to do next?
-
I think is very important to have this mindset as a designer, that you as a user constantly navigate on the website. That's why is very important to design a proper information architecture to understand how people will navigate from page to page, is it easy for users to find what they are looking for?
App Design
