Fictional E-Commerce Website

Updated logo and digital refresh for a big- brand clothier 

Customers looking for reasonably priced clothing for any occasion.

User Research, Interaction Design, Branding, Visual Design, and UI Design

THE CHallenge

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.   

empathy map

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.

Research insights

Direct Competitors:

  • Walmart
  • Target
  • Macy's
  • Amazon


  • Urbanization
  • Sophisticated buyers
  • "Experience" driven stores
  • Personalization is expected

Clothing Categories:

  • High and low end
  • Subscription services
  • Specific brand retailers
  • Retailer discount stores

What Success Looks Like:

  • Carve out a specific niche
  • Easy brand identification
  • Create strategic advantages
  • Successful social media campaigns

Interview insights


  • Returns
  • Choice overload
  • Tough buying process


  • Convenience
  • Consistent experience
  • Top product presenation

Other Notables:

  • Folks want new discovery methods
  • People often buy for specific occasions
  • Word of mouth is still important

    Story board

    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.

    product development

    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. 

    user flow

    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. 

    wire frames

    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. 

    user testing

    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.

    UI Kit

    high fidelity mockups


    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.