TARGET USER
Customers looking for reasonably priced clothing for any occasion.
ROLE
User Research, Interaction Design, Branding, Visual Design, and UI Design
Design a company logo that is neutral, modern and fresh to attract all types of people and styles.
Design a responsive website that shows a range of products and provides key filters for an inclusive and pleasing experience.
The monochromatic logo featuring a Works Sans font has an updated and authentic feel while being easily recognizable across different digital and print mediums.
The website’s redesign improved product presentation, provided effortless and consistent navigation while creating a warm and inviting shopping experience.
Mirror is a (ficticious) clothing store started back in 1994 that targets audiences looking for affordable clothing for any occasion. Previously the company had been successful offline, but they did not have a strong digital presence. They decided to make a push into the online space to grow sales and provide additional convenience to their increasingly demanding customer base. Before beginning to create their new website and logo, I decided to conduct some secondary research and interviews to gain an understanding of the marketplace that Mirror competes in, and their customer base.
Secondary research allowed me to understand the marketplace that Mirror competes in. Current clothing industry trends, categories, and digital success stories were studied in an effort to help create a distinctive brand and overall experience for Mirror. After that was completed, interviews were done to help empathize with their current and prospective customers. I was able to gain insight into consumers’ shopping habits, their needs, their pain points and the overall experience that they were looking for. This information would become instrumental when making decisions on what was a must-have versus a nice-to-have for the website.
Using the information gleaned from the secondary research and the user interviews I created a main persona for a young mother in her 30’s. This was considered a highly desirable demographic due to women’s general shopping habits, their need to buy reasonably priced clothing for family members, and their digital inclination.
Creating the empathy map of the young mother allowed me to better understand her point of view. I was able to see her daily interactions with other moms, social media and her family. This has enabled me to design Mirror’s website so it fits seamlessly into her everyday life by eliminating pain points while providing moments of joy while shopping for her loved ones.
At this point in the process it was time to start to synthesize the information from the research phase. The key insights combined with the empathy that I gained from the interviews could now lead the way to help define the key features. These features would become the basis to designing the logo and the overall website. Below is a high level overview of the larger takeaways from the discovery process.
The storyboard was the next logical step to help visualize a likely scenario that the main persona would go through. This forced me to think about the screens that would be most useful to Em and the general progression that she would take through the new Mirror website.
While the storyboard provided some context for the way a user would use the Mirror website, the Mirror Product Development Matrix provided a hierarchy for the most significant features that would be implemented.
The user flow was essential for creating the path that users would take to complete purchases. The original user flow showed how to purchase a dress, but then was changed to showcase how a user would buy a boy's puffer jacket. The change was implemented to showcase a hover effect that takes place on Mirror’s home page when you mouse over the Kids category. Otherwise, this flow would be similar to the one that someone would take to purchase a dress.
After doing all of the research and preparation it was time to design. I liken everything that happened up to this point as prep work like I used to perform in the kitchen when I was a line cook. Prep was necessary, but cooking, or design in this case, was where the real fun was where the real fun started. I bgean with some sketches in a notebook, followed by wireframes, and finally some mockups. Throughout the process I tested and iterated on the design to make sure that I was headed in the right direction.
The sketches shown below are the initial ones completed for Mirror’s home page. I played with multiple layouts for the navigation bar, hero images and footer.
One of the most important parts of this project was that the website be responsive. For this project I started with designing the desktop version before moving on to the tablet and phone versions. It was interesting to see how the initial design needed to change in order to accomodate the smaller devices. A great example of a section that needed to be redesigned a few times was the Trends section. The desktop and tablet version were very similar, but I couldn’t show the three images with information below them for the mobile version. Instead I needed to add the ability to swipe left or right in order to see all three of the main trends.
This project was the first time I completed a user test for a design. While I was hopeful that users would find it intuitive and easy to go through, I knew that there would inevitably be multiple issues that needed to be addressed. There were problems with the key terms, where sections of the site were located, functionality and more. In the end was thankful for the negative feedback because it facilitated a superior final product.
In this phase, there was an emphasis on understanding how to figure out what could be improved upon. The first order of business was to understand the marketplace that Mirror competes in. In order to do this I conducted secondary research to understand who the direct competitors are, the different categories that they compete in, trends seen in the clothing industry and what success looks like.
Once I had an understanding of the marketplace, it was then time to figure out what the current state of the Mirror website was like. There had to be a reconciliation of the current state of Mirror’s on- and off-line offerings. Next, I needed to determine how consumers felt about the brand, what they were looking for from a company like Mirror and what their current pain points are in the marketplace. Finally, I interviewed stakeholders to understand what their needs are and where they plan to take the company.
This was my first real UX project and many hours went into learning the basics of the entire design thinking process. I gained skills in research, interviewing, sketching, wireframing, prototyping and usability testing. My abilities with sketch greatly improved as I went through this project by working on the basics of implementing shapes, adding pictures to the mix, thinking about contrast, movement, and other elements. Looking back at this project now there are certainly many improvements that I would make, but I believe this project was instrumental in my initial learning of the design world.
