E-commerce Case Study — Boohoo Man
There has been a significant change in the fashion industry over the past 10 years due to reasons which I will number below:
- Millenial and Gen Z
- Increased use of smartphones and mobile shopping
- Social Media and social commerce
- Fast fashion trends
- Different payments methods
- Variety of products
- Delivery to your door
- Personalized shopping experience
- Power of influencers
There has also been a turn in the amount of people shopping online as opposed to physically going into stores and shopping. The convenience of being able to shop from your own home, flick through different fashion stores and have a much wider product range is something that has sat well with a number of people who prefer who opt to shop online. More and more businesses are joining the ecommerce world due as barrier into this space has become a lot easier
Covid-19 has further impacted an already uphill battle for retail shops. The long-term effects of Covid-19 has made hundreds/thousands of businesses visit their online page and ensure that conversion numbers are high, user journey is a pleasant journey and that sales are increasing. People generally do not like change as we are wary of the uncertainty and the idea of having to shop online for some people is a change they are uncomfortable with. Covid-19 has forced people who are uncomfortable with shopping online to do it if they are in need of products which has caused a bigger issue for the retail stores as they’ve lost loyal customers who preferred to go into the shops. Those customers may not return to shopping at stores as they can see how easy and convenient it is to shop online and can lead to stores closing down due to lack of funds.
Ecommerce Statistics
- It is expected that 22% of global retail sales will be due to ecommerce by 2023. To give context to this growth, 14.1% of global retail sales were ecommerce purchases in 2019
- Around 51% of online shoppers conduct purchases via their smartphones
- There are over 2 billion digital buyers in the world
The Project Brief
To Identify 5 problems areas within the website journey experience across mobile and desktop screen size. It is my job as a UX/UI designer to use my design thinking knowledge and solve these problems and demonstrate my ability into responsive design.
I have chosen to focus on Boohoo man. The reason I have chosen Boohoo Man is because I have been able to identify pain points throughout the user experience which I will expand on in my business research section.
My Aim
- To improve and simplify the journey experience
- Make this a website which users would come back to
- Increase conversion
- Make it WCAG compliant
- Implementing focus and hover states
My Role
I will be the sole UX researcher, UX&UI designer.
Hypothesis
My hypothesis is that, if I am able to implement my aims which I set out above, this will lead to increased sales and increased conversion throughout the site. Implementing those changes will strip out the pain points and accessibility issues which makes the overall user experience better.
Business Research
Competitor Analysis
The first part of my research phase was to conduct a competitor analysis and see how other websites differ from the one I have chosen, especially taking a look at key functionalities. I have compiled a list below which does a close comparison between each of the different websites and also included an indirect competitor to see how that one is different from the retail industry. I have also set out a screenshot of different homepage and analysed each one.
Common themes that I noticed
·
User Research
Once I completed the business research and being able to identify common themes between BoohooMan and its different competitors I moved onto the user research. This will assist me in being able to find out current pain points that users of BoohooMan are experiencing. Upon the user research phase, I immediately became aware that it was important for me to find out what BoohooMan users are set out to achieve whilst shopping on the desktop or mobile browser and what is stopping them from achieving this. In order for me to get a better understanding I conducted a survey and interviews with a variety of users.
Survey
I put together a survey to gather quantitative data and some useful information on BoohooMan users. I was able to gather a good amount of responses to see common themes that I will expand on below.
Age range: 20–30
Number of responses -9
As you can see from the responses on the above screenshot, nearly all of the users were not happy with the way BoohooMan have decided to lay out their information and features. The reason I chose to look at this website was due to the fact that I believe that is far too overwhelming for a user and the responses above have further backed up my point.
I have combined the two results above together as they link in well. More than half of the users were dissatisfied with the shopping experience and similarly with the interface. The use of various bright/dark colours, fonts and pictures goes against user empathy and if anything makes it all more stressful for the user as they are being overloaded with information and various other designs which may not be relevant to them.
Similarly, to the first screenshot, we can see if given the chance they would like to make the website “less busy”. Another issue which a user experienced was that you are unable to navigate around the website with your keyboard due to there being no focus states which can confuse the users as to where on the website they are.
Overall, the common themes I can draw from the results are that the website is overwhelming, excessive use of different colours and pictures, lack of spacing between text and lastly the lack of focus and hover states. During my redesign process, I will be taking into account the pain points which the users expressed in the surveys and will be implementing changes.
Ideation Phase
During the start of the ideation phase, I kept in mind some of the pain points that I was able to identify during the business research phase. Taking that into account I was able to start designing and ensuring I was able to mitigate the various pain points.
Crazy 8’s
For the ideation phase, I started off my design process by doing a crazy 8s exercise. Doing this exercise permitted me to concentrate on coming up with a variety of ideas without any limitations and was able to think creatively. This exercise also allowed me to start imagining a different way of putting together the BoohooMan website.
Wireframing phase
Low-fidelity Wireframe
Above are the two wireframes I produced using Invision Freehand. I was able to design them based on the research I had done and also taking into account the crazy 8’s ideation technique which is shown above this section. Having looked at my survey results and particularly the question regarding the layout, I was able to see that nearly half of the users said that there was too much happening. Taking this into account, I made sure that I made the homepage simple and short in order to not overwhelm any of the users. Another change I made was moving the search bar into the middle of the page. I found that BoohooMan’s search bar failed to comply with the WCAG guidelines due to the colour scheme. Having done research on other competitors, I found that the majority of other ecommerce websites have the search bar across the middle. Looking at my expanded survey results I was also able to see that the first thing that some users do on a website is type in the product they want to search for. Having taken those factors into account as well as Hick’s law I believed it would be most beneficial to have it in the middle of the navigation bar which immediately catches the users attention.
During the changes from low-fidelity to mid-fidelity wireframe I:
- I expanded the space between the different options. I thought that this was important as it would ensure that the user does not feel overwhelmed whilst navigating around the website.
- I also added in a swipe bar in order to give the users the ability to browse through the bestselling section instead of having to navigate away from the homepage.
In order to ensure that my changes would work, I showed it to a few users who liked the idea and especially as they will not have to navigate away from the homepage.
After implementing those changes to the mid-fidelity wireframe, I was able to create a detailed high-fidelity wireframe. Completing my high-fidelity wireframe allowed me to see what my final design would look like.
UI Phase
Below is my final homepage for both desktop and mobile. After having done research and asking my users, I decided to create a dark mode for each screen. I also completed a style guide. My colour choices were based off the user research and taking into account their needs as well as the WCAG guidelines.
Design Fundamentals
Hicks Law: I chose to make the search bar bigger than what it was on the current BoohooMan website and placed it in the top navigation bar. After reviewing my survey results, I was able to see that many users first point of call was to use the search engine and look for an item that way. Having it that size and across the top navigation bar, it immediately catches the attention of the user which means they are able to make a decision much quicker.
Millers Law: The homepage abides my Millers Law, I made sure that I did not use more than 7 images on the homepage. This will allow the user to be able to see all photos and keep them in their memory. I also decided to keep the number down to 7 as many of the users complained that there was far too much going on.
Jakobs Law: I ensured that the placement and size of my CTA’s were compliant with other websites. In doing this, I was able to abide by Jakobs law which explains that users prefer websites that work in similar ways to other websites which they use.
Accessibility Design
At the start of this project, I mentioned that one of my main aims was to make the website WCAG compliant as there were some clear accessibility issues on the BoohooMan website. It is vital that website meet the WCAG guidelines in order to ensure that it is accessible to a variety of people with different capabilities.
WCAG Colour Contrast
On the below screenshot, you can see that my designs are within the criteria and pass the contrast checker.
Screen Reader
When choosing the BoohooMan, I immediately realised that the way the information was laid out, it would be difficult for the screen reader to go through the website. Keyboard accessibility is also one of the most important aspects of web accessibility. Again, from looking at my results I was able to see that users would like to have focus states when using the keyboard to navigate and this is something the BoohooMan website does not have. I have shown how the focus & hover states would work on my design.
Conclusion
In conclusion, I redesigned the BoohooMan website taking into account pain points from users and trying to mitigate those as much as possible. I completed business and user research which allowed me to find out different ways for me to redesign the website. Throughout this process, I used different ideation techniques which allowed me to generate a variety of solutions to the user pain points I explained along with my survey results.
Looking back at my aims, I believe I was able to provide solutions to my objectives by:
- Simplifying the user experience to make it a more pleasant user journey.
- Having completed my design and showing it to users, they said that it is a website which they can see returning to.
- From simplifying the website, and placing the large search box this will encourage users to search for a product which will lead to increased conversion
- With the colours I used, I was able to make the website WCAG compliant
- Lastly, I implemented focus and hover states that the BoohooMan website was missing which ensured that it also meets the accessibility needs
Self-Assessment
Overall, I believe that this case study was able to provide me with a solid insight into the UX/UI design process from research phase to the final stage which is the prototype.
Key takeaways:
- I’ve developed my problem-solving skills, time management skills and also how to balance different information.
- My research skills were something which I was able to develop throughout this project. I was able to go through and extract key information from both business and user research and implementing that into my design.
- Looking at my case study, I can see there is space for improvement and if I was given more time on this project, I think I would be able to improve and refine my designs.
Thank you for reading!
