Create a new logo and an ecommerce responsive website where Modas can sell their products online.
Goals & Objectives
Rebrand company with an updated logo and visual system. Design a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style and others.
Modas started back in 1994 as a clothing store targeting an audience looking for affordable yet fashionable clothing. Even though they’ve had great success with their many retail stores (400 locations), their e-commerce store has not seen that same success due to an outdated website with only information about locations, promotions, and a bit of background about the company.
To be able to really understand all the different views, behaviors, pains and joys of e-commerce users we first have to empathize with them. In order to be able to able to do that, I first had to understand the e-commerce market and uncover what needs and frustrations the target user might have.
I began by completing a market analysis as well as a competitive analysis. I collected all of Modas’s main competitors and then moved into looking at similar retail companies that run successful and profitable e-commerce websites. I finished by building out some provisional personas from the research gathered and by attempting to understand the shopping habits of those users.
To better understand the pain points and goals of those who shop for clothing online, I developed an interview script and conducted user interviews with participants who fell within the provisional persona profiles I’d established. Due to the current state of our country’s emergency (COVID-19), I conducted most of the interviews remotely while practicing safe distancing with those in-person. Through the research, I was able to identify some needs, pain points, and motivations of these shoppers that were really helpful.
After gathering all of the qualitative data from the research process, I decided to work on creating a user persona to help me identify with the users on a personal level. Alexis is the primary persona that emerged as a composite of my research findings.
Alexis is a young adult professional that loves to follow current fashion trends and values clothes that are good quality while still being affordable for everyone.
I then created an empathy map made up of observations and statements from my user interviews as well as my primary persona. Doing so allowed me to gain empathy with the user and helped find patterns and key insights about their day-to-day experiences in relation to their purchasing decisions
After all the research in the “Empathize” phase, I was able to collect a lot of useful data. I wanted to seek insight into what the user needs were as well as those of the stakeholders of the company. I then moved on into the next stage of defining the product, I mapped the overlaps of business goals, user goals, and technical considerations.
With the project goals in focus, I created a product feature roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. It was important to learn a little bit about what the industry standards were for features in this space before moving forward. I performed an in-depth competitive analysis of features, products and services provided for all the direct competitors as well as the indirect ones.
With the project goals established, I conducted an open card sort to get a sense of how users categorize clothing, shoes, and accessories. Using Optimal Workshop, I asked them to arrange 30 clothing items into categories of their choosing to get a sense for how users talk and think about clothing. After the conduction of the card sorting exercise, all the participants created a total of 37 categories with a median of 6 categories each. The Similarity Matrix below shows the results of the online sort and provides a quick visual read into how participants grouped cards together most frequently.
Based on the card sorting exercise and interview findings I was able to categorize my groupings effectively into a site map. The goal was to move forward with a navigation process that would be easy and familiar for the user to use.
Before moving the design phase, I identified the main flow that the user will follow by creating a task and user flow. I started creating the user flow by thinking of an experience my primary persona might encounter when shopping online. I then mapped out the whole process from receiving an email to the flow throughout the site to achieve the goal. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user.
Based on the site map created as well as the user flow, I began with some quick hand-sketched concepts for the Modas home page. I wanted to make sure that I included all the key findings that have come out of my research and card sorting results.
After solidifying a few ideas, I took the next step and created a few wireframes based on some initial UI product requirements I established. The goal was to focus on the buying process, from where the user arrives to the homepage to find a product they would like to purchase all the way to the checkout. I began wireframing some key pages informed by my user flow. It was essential that the website would present as well on tablet and mobile devices as it did in desktop size. I created three different responsive layouts for the home page utilizing a grid system for the desktop, tablet and mobile option.
One of the design goals for Modas was to have a fresh new brand and logo that spoke their brand message and values: having clothing accessible for everyone with good prices and a variety of styles. Modas brand is modern, clean, inviting, and confident. By staying true to these key adjectives of the brand, different logo variations were created and narrowed down to final and used version. I explored many different options but found that a simplistic route of using a modern typeface reflected better with our target audience.
Once the logo was created, I moved on to design a well-labeled and easy to understand UI Kit. I decided to go with a brand color that uses black and some tints & shades of the main color. There will be two secondary colors that could be used around the site for accents purposes but not as the main color.
High Fidelity Wireframes
After creating the mid-fidelity wireframes for multiple pages, I created and frequently updated higher-fidelity wireframes with the UI patterns and components used in the UI Kit.
My next step was to create a clickable prototype using inVision. I focused on creating three different scenarios that a user might go through, each with a task to complete. Before conducting the testing, I set to create a usability testing plan and checklist that included all of the information and goals I was looking to achieve. I recruited participants that fit the personas that I’ve been using throughout the design process.
A total of 5 participants were able to complete this usability test, 3 women and 2 men. The participants range from ages 21 to 53 and they all shop online for clothes at least twice a year. 4 out of 5 tests were conducted virtually using Zoom and its screen sharing service, while the last one was done in person.
of participants navigated throughout the site successfully
of participants understood how to find a specific product > add it to the cart > continue to checkout
of participants liked that the filters populate automatically when selected
of participants used megamenu in main navigation first to explore other pages
To synthesize the results and observations of the testing, I created an affinity map as a way of interpreting and prioritizing my findings. I was able to find out where the pain points of the users were stemming from and what could be further improved. The affinity map to the left visualizes these results.
After completing the usability testing and affinity map, I went back and made revisions to top pain points the participants shared. (The final prototypes are shown earlier on this page)
With more time, I’d like to iterate further and develop more pages until I build a full site design. Once prototype testings are completed, I will use Zeplin to hand off the design to the developer team when I have made all improvements to the prototype.
I’ve learned the importance of the UX design process from beginning to end in a fast-paced way. From completing user research, information architecture, interaction design, user interface design, and iteration to implementation. I discovered the importance of user-centered design and how to make a better product through user insight and understanding.
After completing my mid-fidelity wireframes, I originally wanted to complete a round of prototype testing using those screens. I wasn’t able to gather all the participants needed for testing without hindering the turnaround time of this project. Instead, I decided to hold on and test for usability when I finished my high-fidelity wireframes. Looking back, I would’ve found those user pain points earlier and it would’ve saved time when it came to creating higher-fidelity wireframes.