Project Overview
Kayla is hosting her website on Shopify, which will have some design limitations. However, Kayla still wants her website to be unique in style to accurately translate her brand and lifestyle concepts. Kayla is looking to have an experimental and clean website that introduces her clothing line as the first time she is presenting her label in the e-commerce space. The website as the storefront needs to be distinct from other brands while also accounting for future growth of the business. A logo has already been designed, but other branding elements have not been built out yet. As my first time working with a client on a brief, it was very valuable to receive real-time feedback throughout the design process. I also had to work agilely to integrate goals of the business owner with research insights gathered. Higher level goals of the project were to:
TIMELINE
6 weeks in Winter 2021
120 hours
PROCESS
User Interviews
Competitive Analysis
Problem Definition
User Personas
Site Map and User Flows
Branding Development
Wireframes and Prototype
Testing and Iteration
COMPETITIVE RESEARCH
Being already familiar with Kayla Bullen's design work was very helpful in starting competitive research analysis. I sought out to identify features of independent clothing labels in the e-commerce space that cater to a similar niche of aesthetically conscious and alternative fashion consumers. I also asked her for brands and websites she is inspired by to further hone in on the interface styles and patterns she is drawn to. After analyzing both small and large businesses in that consumer niche, I concluded that:
USER RESEARCH
After gaining a greater understanding of the varying characteristics of fashion brands in Kaybul's niche, I conducted in-depth user interviews to identify user motivations, needs and frustrations. The main goals of the interviews were to:
After six interviews with users aged 18-35 years old, there were several key insights gathered summarized below:
Insight #1: Shopping Small Business
Users shop at small businesses and independent creators because they feel like they are making a direct contribution and impact to the person behind the brand. Users appreciate personal touches, notes and reminders that they are making a personal connection through the purchase. All users want to learn more about the story and making process to gain better context to the clothes they buy and wear.
Insight #2: Needs and Frustrations
Users prioritize price and quality the most when shopping for clothing online. They understand that paying for the quality from a small independent business may require a higher price point. Fit and shipping are the two major frustrations for users. Measurements and photos can be inaccurate when addressing how a fabric feels or fits while shipping fees are an unexpected and unwelcome barrier when shopping small brands.
Insight #3: Customers of Kaybul
All customers highlighted the quality of professional finishing in the products. They would like to see that level of quality be translated for an online audience. Customers characterize the brand as: versatile, tailored, quality and custom.
USER PERSONAS
Built upon research findings, these two personas were developed to articulate a more holistic view of the main user group. Crystal values the functionality of workwear and quality clothes that are durable and made to last. While Eric is passionate about supporting emerging designers and exploring experimental and subversive fashion. Both user personas are based in Toronto, Canada, to consolidate Kayla's business model as a local designer. Currently, Kaybul carries both mens and womenswear, although in the future Kayla, would like to expand into more genderfluid designs.
SITE MAP
With the research gathered and insights defined, I delved into creating a framework for the site, establishing the structure and navigation for the user experience. As a clothing E-commerce store, I followed common patterns and layouts to create a familiar and seamless experience. However, knowing that the website will be kept minimal and simple to use, I did not include some features intentionally due to the small business model and scale of operation. I omitted an account tab as well as wishlist function that can be found on larger sites. This is because as capsule collections, inventory will be kept very limited. Which also increases incentive for customers to purchase sooner rather than later. Shopify includes their own shipment tracking so an account to track orders would be unnecessary.
.png)
USER AND TASK FLOWS
The user flow includes multiple points of entry onto the website. And by keeping the site minimal, the priority pages are incorporated into the main purchase task flow.
.png)
The purchase flow includes the following pages: homepage, capsule collection, product details page, and checkout pages. I have also decided to include an about page since for a small business, it is critical that customers can learn more about the brand story to build intimacy, connection and trust.
.png)
CAPTURING THE LOOK AND FEEL
As the logo was already designed by the client, Kayla, I focused on defining the overall atmosphere and aesthetic of the website including developing visual branding elements.
After gathering visual references, I decided to keep the colors monochromatic, the lines and layout minimal for the dynamic content and photography to truly stand out. The nav bar, footer and buttons are kept simple and minimal to convey a sense of quality and polish. I designed a horizontal scrolling banner as a repeated branding component to be a stylized reminder of the handmade and unique qualities of the clothing. It also adds to the curated and experimental nature of the site.
WIREFRAMES
This ideation was designed with multiple components that remind users of the unique and handmade nature of the clothing while also showcasing the making process. It is a core function of the website to give a behind the scenes view to highlight the maker behind the brand—Kayla Bullen. This would not only help to differentiate the small business from larger clothing retailers, but also from other independent brands.
The homepage wireframe was arrived at through several ideations, especially as I balanced Kayla's wish for experimental design with best practices for an accessible and easy to use e-commerce site. We decided on a full bleed image for maximum impact and a more unconventional collage element under, to showcase process as well as campaign imagery or video.
HIGH FIDELITY: HOMEPAGE
The unconventional and experimental layout of collaged images on the homepage are linkes to collections and products. High-quality imagery will be the main focus of the homepage, forgoing large texts and traditional buttons to convey a sense of quality and refinement. After getting feedback from the client, I made two modifications: including a currency selection on the nav bar for when she expands her business internationally and adding CTA buttons on the bottom of the homepage to increase engagement.
HIGH FIDELITY: ABOUT PAGE
An about page was essential in order to tell the brand story and give a behind the scenes look at the making process. By prioritizing Kayla's story, it is putting a personable face to the brand, building trust and connection with customers, an important aspect they value when shopping small businesses. Moreover, users in the interviews conveyed great interest in better understanding the creation process. Here, images or videos of Kayla working would be crucial along with the stylized banner to remind customers that everything is handmade, one of a kind and crafted locally.
HIGH FIDELITY: PRODUCT PAGE
The product page was designed to serve two main functions: to provide accurate information about the product itself, and to showcase the making process of that item. Based on user research, I recommended Kayla to include the shipping costs in the displayed price, so that customers would not face the barrier of additional shipping fees during checkout. Another user frustration was in the fit of clothes; I intentionally categorized size + fit as a section on their own. This gives room for more detailed descriptions, measurements and graphics as needed, making fit and sizing information a priority rather than an afterthought.
For each product page, there will be a set of images that details the creation process of that specific item from design to production. By showcasing the different methods for different products, it highlights the uniqueness of each item and gives credit to the makers of the clothes (especially if Kaybul scales up to include production partners). This was also a great reminder for Kayla to document her processes more intentionally.
USABILITY TESTING
All users successfully completed the task of purchasing a jacket and checking out. Through testing, users validated feature branding elements as well as the overall aesthetic and feeling of quality within a curated space. They especially appreciated the experimental layout of the homepage and branding components throughout the website highlighting the making process. Valuable feedback was also given on the overall user experience to improve navigation, engagement and checkout. Test observations and responses were recorded then organized to determine priority revisions.
.jpg)
Priority changes include:
HIGH-FIDELITY PROTOTYPE
Key pages designed in high-fidelity include homepage, about, shop all, product details, and the Shopify checkout flow.
View Prototype
NEXT STEPS & LEARNING OUTCOMES
"I am very excited by how Aimee brought my brand to life and translated it in such a meaningful, intentional, and polished way. I really look forwards to expanding the reach of my business with a strong digital presence."
— Kayla Bullen
It was so rewarding to get to work with a brand I was familiar with, already support and would love to see grow. In this way, I sought to design with growth in mind, to give Kayla a clearer vision of what could help her business now as well as into the future. Working on this brief was a very valuable experience for me to understand the goals of a client and design within a realistic set of parameters. Although the Shopify website will require some custom code, Kayla is now equipped with a strong visual and branding system as well as in-depth user research that brought to light many valuable insights and recommendations. I hope to continue the work with Kaybul as the site becomes live to further refine and iterate on user feedback.
