THE GAP
Mayer had a website that felt generic and did not effective communicate the brand identity. This was a factor in the rate of returning customers
TASKS I PERFORMED
UI Design, UX Design, Page building(with Shogun), User Research, Built Site Maps & IA Diagrams, Created Wireframes & Prototypes, Performed User Testing
THE SOLUTION
To design and build a site that accurately represents the brand with a improved shopping and checkout experience
I rely on Design Thinking as a process for developing solutions. In reality projects don’t follow a linear methodology, but for the purposes of the case study, I broke down the various tasks performed into these stages:
It was necessary to understand the users I was designing for as well as the industry. Digging into the audience helped learn about their interests and motivations. Questionnaires were my main research tool at this point.
Below is some of the information i was able to gather about the audience
Millenial Man between Ages 25-40 +. Mostly Single or Partnered.
College/University Educated.
Working professional at varying degrees of his career based on age. Salary $35K - $80K+
Fashion Forward- is interested in the latest trends looks for special pieces that he feels will not be seen everywhere. Is confident and not afraid to take risks with his style.
Values quality and longevity in clothing and invests in pieces apart from buying into fast fashion
Is price conscious and is aware of competitors pricing
Competitive analysis helped me understand how other brands with a similar audience approach their website design. A clean and minimal look was consistent across the board.
.png)
.png)
.png)
.png)
The existing website had several areas that needed improvements that could enhance the shopping experience for the user and improve the navigation of the site in genaral
Left: Homepage, Right: Product page
After taking time to go over both the quantitative and qualitative data we collected, we gathered our insights into key findings.
Homepage needed a clear call to action
The typography needed to be more legible
Procuct information on the needed a cleaner Layout
Collections Page needed the ability to filter and preview more product images
Navigation bar needed to standout from the page content
Ability to create a wishlist
Elevate the look and feel of the brand to build trust
Improve User experience
Increase conversion rates
Increase customer return rate
Reduce bounce rates
Making rough sketches early on helped me visualize the pages in their simplest form with out committing to any specific design decisions.
Wireframes provided a quick way to advance the design process without placing a lot of emphasis on the branding and design. Sketches were converted to wireframes to have a mental picture of the layout and placement of key UI Components within each screen.
Based on the brand personality and the target audience, a moodboard that illustrates a clean and minimal look was used as a compass for the visual direction of the site.
.png)
I used Site Maps to better understand the site navigation and how screens are connected within the site . Information Architecture Diagrams were further developed from the site map.
A snapshot of other High Fidelity prototypes for a few screens. High Fidelity Prototypes brought me as close as I could get to the real life site before starting the development phase.
High Fidelity prototypes were used for User Testing. Feedback from the stakeholders were used to make several Iterations that contributed to the improvement of the designs.
User Acceptance testing was further performed to ensure mobile responsiveness and browser compatibility.
Video available on desktop view
A shopify based online store that clearly reflects the brand personality and improves the shopping experience. One of the main challenges was the limitations of shopify as a platform and the high dependence on plug-ins which impact the performance of the site. It was important for me to focus on the requirements that had an actual impact on the user's experience.
Increase in returning customer rate within the first 3 months
Increase in average order value within the first 3 months
REFLECTIONS
Working within the confines of a platform like shopify taught me how be resourceful and leverage available features and plug-ins to achieve the business goals
NEXT STEPS
Further User Testing, Exploring additional ways to improve conversion rates.