Redesigning El Corte Inglês website — a UX case study
El Corte Inglês is a Spanish chain of department stores with its headquarters located in Spain. My goal was to improve the costumer’s experience by bringing a fresh look to their website without compromising the Company Branding and trustworthiness making an easier user journey and intuitive interface. This was a personal speed case Study with no commercial use when I noticed some usability issues while casually navigating through the website.It was developed within a timeframe of 3 days where my role was to redesign this website and its mobile-optimized version concept.
Article Structure:
- The Problem (Contextualization)
- Goal and Proposal
- Research
- Design Process
- Solution (prototypes)
- Conclusion and Recommendations
The Problem
The website is not focusing on the users, due to various reasons. Along with the competition and cost, the following factors were found:
- Complicated Journey order — It’s difficult to understand where to start searching.
- Repetition of elements that could be eliminated
- Excessive and irrelevant information that could be simplified which is distracting the user
- Hierarchy not established — making it difficult for the user orientation
Goal and Proposal
Redesign a better way to enjoy the shopping experience by creating a better user journey across this website
Process
Understand who is the user, what will the user currently struggles with, focusing on the user’s outcomes, what does differentiates El Corte Inglês from the competition, from this, a problem statement will be generated which will allow me to reach the source of research questions to start brainstorming and therefore start designing while focusing on the user’s core need.
Research
- Website Deconstruction
- Competition Analysis
- Website deconstruction
- Target Audience Understandings: User persona, User Journey Mapping, Prioritization Grid, Assumptions and Questions;
- Identifying key flows, challenges and pain points
Website Deconstruction
During the process of Redesign is important to identify key problem areas with the existing website, this allowed me to avoid opting for personal preferences.
Competition Analysis
both direct and indirect competition experience provided to customers was analyzed. I responded to questions such as “how the competition communicates to its audiences in different contexts?” “What is the target of each competitor product? “ “How advanced their features are?” the comparison not only allowed me to understand the positioning of the Brand, understand where does El Corte Inglês stand, but also to learn the other websites organized their product selection and overall layouts
User Persona
The goal was to evaluate how people are using El Corte inglês by building shared understanding and empathy in order to surface the top pain points which will be useful to improve the user experience for each user’s needs.
The target users of this website chains are adult workers, mother or Father with children. These users have a strong preference for luxury fashion brands and quality over quantity.
A key differentiator of this user group is that Time management is extremely relevant, going to a store chains allows them to shop all the necessities without having the burden to dislocate from a store to another.
User Reviews
While the Case was being developed for personal research, there was no possibility to conduct the intended one to one interviews and surveys to get more in-depth feedback. To resolve this problem, I went straight to the assumptions and questions based on user reviews of the website and also from the app which gave me hints from users reviews which may or not present highlighted issues related to usability or functionalities but still gave me an idea about the user experience.
Pain Points:
- The functionalities available don’t improve the user experience, in fact, makes the journey more stressful.
- The user finds that reaching certain products is complicated
- There is no correlation between the website architecture and the shop organization and wayfinding.
- There are issues related to the finalization of the shopping payment sequence.
Prioritization Grid
After a brainstorm, the focus now is to prioritize which set of ideas are important by developing a prioritization Grid, I came to understand what some initial features were in fact going to take too much time to deliver and of little value to the user.
Other features not included were per example the ability to include physical promo cards that are currently impossible to merge into the digital version of the Store. This helpful data that helped solidify the exploration stage or in other words, the design process, for example the users rating of products was eliminated due to its high feasibility compared to the users value given, so it was best to focus on other features.
Design Process
I recreated the information architecture Based on the user flows that enable me to have a visual representation of how your user will move through the webpage, where the user can search for the products with more ease. Conducting the User Flow, low-fidelity wireframes were sketched which included new features necessary for the improvement of user experience.
I bore in mind that is inevitable that users will become apprehensive with whatever change in the design, this because change implies need to learn something new.
Solution
Homepage
To try to avoid the repetition of information, the shortcut menu was moved to the left, since it was not clear where to find the sign-in option, the profile icon was added to the menu. Furthermore, I restructured the sections to be more compatible with the physical stores to increase coherence. The promotions and new deals feed are limited to the homepage instead of being spread to various segments as it was previews structured in the old version.
Note: After revising the prototype, I recommend a further version to add a highlighter button to redirect to us to the supermarket website, the user should not be expected to search for it.
Product Cards — The old-fashioned ui design was revised to improve the look and feel and its usability. Also I filtered the cards to 3 buttons to reduce the user’s decision time after getting to the conclusion that the information bellow the “buy” buttons was additional information that the user could visualize if there was interest in the product (after click to see more details).
Note: Since El Corte Inglês is a departments Chain Store, all the different category items were tested with the proposed UI design in other to understand if it would fit in different item dimensions and characteristics
Product detail page
The additional information that was previously eliminated (Click and Collect and Standard Delivery Options available) is now appearing in a discrete form under the Buy button just as a signal icon of availability. The “add to wishlist button” seemed to be almost invisible in the old version, so now its more accessible and also allows the user to see the number of people that also added the item to their wishlist.
Revision Note The Reviews rating was opted to be left behind, since its yet to be evaluated to understand its necessity, since this users trend to search for reviews is tech specifics sites, but since El corte ingles also have other departments in a gamification system
Listing page
Listing pages are essential in any e-commerce store, as well as filtering is a part of the user journey in search of a specific product or a range of products. Some users may know precisely what they want others may rely on browsing to discover what products will suit their needs. Due to the time constrains for this study case development I opted to create a polyhierarchy structure to avoid losing user since Laubheimer,Page (2018) claimed that this structure increases its product findability
Mobile version
The website should be responsive so it can automatically adapt to any screen layout to enhanced search visibility by easily access and navigate from any device.
Conclusion and Recommendations
To be the most transparent possible throwout the study case, some revision notes were included during the presentation of the proposed solution, noting that this is always an ongoing process subjected to receive alteration and improvements. Some challenges appeared during the conception of the project: time constraints and insufficient data. Consequently, the assumptions are based on my personal experience and the data from user reviews.
Recommendations: Since the user, most complains was related to the quality of the client support it would be wise to creat a special popup to easily reach and chat with the client support specialist;
I recommend a Deeper user research analysis and additional testing which remains unconcluded, this will provide the validation necessary to understand if the solutional proposal was, in fact, successful or not.
This project was developed around April 2020
References
- Alaves, J., 2020. Figma Community. [online] Figma. Available at: <https://www.figma.com/community/explore>
- Laubheimer, P., 2018. Nielsen Norman Group: UX Research, Training, And Consulting. [online] Nielsen Norman Group. Available at <https://www.nngroup.com/articles/polyhierarchy/>
Thank you for Reading! Feel free to give me any feedback on the article and methods used, I would love to hear your suggestions!
Chat with me on Linkedin :)
