SA Company, Responsive E-commerce Website Template – Research, Content Strategy, UX/UI Design

SA Company is an outdoor apparel company that empowers outdoor enthusiasts to go on microadventures and explore the outdoors. The request was to redesign their e-commerce website template so that it is user-centric, intuitive, visually impactful and appealing. The website template would also need to be supportive of their marketing goals of increasing engagement and purchases.

A flexible, modular and customizable website template was designed to allow SA Company to make regular updates and adjustments on their own based on their business needs. Placeholder content and images were used in the template. Once the template was approved and delivered to the client, they customized it accordingly and populated it with real content and images. Because of the template's flexible and modular nature, the order of the sections could be rearranged. There were also some components with multiple variations as options.

The website template was designed with a strong information scent that supported discoverability, findability, product browsing, task completion and purchasing.

2021 Gold Winner: Best User Experience, w3 Awards
Designed while working at Diff Agency

The scope of my involvement in this project included:

  • Client Discovery Workshop

  • Heuristic Evaluation

  • Competitive & Comparative Analysis

  • Review of e-commerce usability test findings from Baymard Institute

  • Marketing Strategy

  • Content Strategy

  • Component Library

  • Wireframes

  • Visual Designs

  • Design QA

In the Discovery Workshop, I met with the client stakeholders to gather information and to gain a solid understanding about the business, products, target audience and goals. Once I synthesized the information from the Discovery Workshop, market research and user research, I conceptualized the Marketing Strategy, Content Strategy and the UX Design.

I created wireframes to convey the structure, information hierarchies, functionality and interactions. Below are some annotations on the Homepage and Product Detail Page (PDP) conveying the rationale behind the Marketing Strategy, Content Strategy and UX Design.

 
 

Below are some examples of the mobile designs for the Homepage with annotations of the UX Design rationale.

 

In the UI Design phase, visual design mock-ups were created. The enthusiastic vibe of the brand personality was carried across the website. The use of brand elements, colour, scale, custom photography and visual treatments unify to create high visual impact.