Responsive Website Design
Company: Mirror is a fictional large clothing store chain for men, women, and children in 400 stores worldwide.
Background: Mirror is growing their business to have an online presence. They want to cater to their customers who increasingly shop online. They need a new logo, brand, and website.
Goal: Complete the redesign process by doing research, defining results, creating new website and style, testing results, prototype, and summarize conclusions.
Research for Mirror started with getting to know my users. I did this by utilizing these methods:
1-on-1 User Interviews & Competitive Analysis
The goal of my research was to know what online shoppers value and how they interact with an e-commerce website. Then I could create a responsive new website and brand for Mirror to continue its business success online. My research objectives were to: determine why people shop online vs. in-store, understand user navigation, learn what features make easy and intuitive selections, find user pain points, errors, pathways that stop and those that continue forward.
According to these results, I’d create a Mirror shopper User Persona and identify strengths and weaknesses of competitors.
After my user research, I took the data and completed several additional tasks in linear approach. I started one and finished it. Then began a new one. This was an insightful way to perform research for me, as a new UX/UI Designer, allowing me to fully understand each step before moving forward. The tools I used to understand my users and compile data were derived from Information Architecture and Interactive Design: User Flow, Card Sorting, and User Task Flow.
The User Task Flow helped me to understand the pathway of the user from arrival to the Homepage, finding the item desired, adding to cart, proceeding to checkout, and submitting the order. The Card Sorting exercise gave insight into how the users group the items. They also labeled the groups, showing me their understanding of relating items. The User Task Flow brought the psychological part of shopping. Arriving to different points, asking a question, and following the flow with “Yes” and “No” questions helped me to set up a user experience that was easy and friendly.
Design time utilized several stages of the design process including: Sketching, Wireframing, Logo & Branding.
I started with 3 different versions of sketches exploring different layouts for the website. Sketching with pencil and paper makes it easy to quickly and easily envision website layout and interface. After that, I chose one to proceed into wireframing. With the wireframes mapped out, I was able to receive helpful feedback in the layout of the website and assess usability. I created wireframes for the: Homepage, Category Page, Product Page, Shopping Cart Page, and Checkout Page.
Creating a new logo and brand for Mirror included a tone of feeling happy, earthy, retro, timeless, minimal, and attainable for all. I felt that the leaf laying on top of the word and dotting the “i” evoked that vibe. My favorite part of the design process was creating the Style Tile and bringing everything together. I like seeing the visual aspects combine like the colors, typography, photography, and logo. I can assess the style. I also like iterating. I often want to change or improve something, and so going back and adding or adjusting things is what I enjoy.
After designing the high fidelity wireframes, I tested them in the form of a prototype. I had 3 participants who tested the prototype. There was 1 in-person test and the other 2 were both remote tests. I took notes on their feedback and created an affinity map of the results. After that, I went back and iterated on the hi-fi wireframes implementing the users input. It was really fun to test the prototype with my participants. It was my favorite part of the whole process. Getting to see how people interpret and use your product is delightful and humbling. I learned something from each person and their every movement and comment. Understanding people and having empathy for them helps me to create the best user experience.
It was a wonderful experience to complete my first project, Mirror. This entire process enlightened me as a UX/UI Designer because it set my knowledge foundation. In going through each step of introduction, research, defining, designing, testing, and concluding I was able to understand how they all come together. I have the full picture of UX Design after completing this project. One challenging part was recruiting participants for research and in the relating age range/demographic. Next time, I will utilize social media to recruit correlating participants. It was important to learn how to listen to users and ask objective questions relating to the experience vs. subjective preferences mostly unrelated. Overall, this is a project I look at and want to continue to iterate on. E-commerce is such a vast and popular business. I am constantly inspired to re-create and improve my initial designs of Mirror. Going forward, I anticipate my work will flourish because of my foundational skills gained from this project.
