Capo web re-design

Our goal for Capo Industries is to provide a strategy to improve usability, interface and overall interactive user experience on Capo’s website.

View prototype

My role
UX/UI Designer

Tools
Figma
Adobe XD
Invision Studio

Team
Andrea F.
Kate W.

The origin story

Capo Industries has welcomed us into their team with a goal in mind: to modernize their current website. Capo Industries Ltd is in need of a website redesign, in order to modernize the overall feel and improve the site navigation. Capo is looking to highlight their product offerings and brands more effectively, create a more user-centric experience, and provide a clear description of their services; including custom formulation, contract packaging, and toll manufacturing.

The purpose

Our purpose for this opportunity is to present a strategy that will provide Capo Industries with a better digital interactive presence which will simplify, and amplify the efficiency and usability of the users while on the website.

The research

User Survey

Our team conducted a user survey where we reached out and talked to Capo's current clients. These clients represent their primary users — users who they interact with most of the time and that give them most profit.

Personas

Based on the key findings and insights gathered from the user survey, we identified two  personas to represent Capo's current clients. However, we found out that one of their most important clients are not yet being considered: Jacob, the end-user of Capo's products. Jacob is the one that essentially uses the products Capo produces. His satisfaction is extremely important for Capo and their partners.

User Flow

Because Jacob is a new persona, we focused on his user flow to show Capo how they would go about navigating the website.

Although this project is a group effort, Jacob's user flow is my own work.

The design process

Sitemap & Information Architecture

Kicking off the design process, my team finalized the new information architecture for Capo. This essentially organizes the whole content of the website considering user flows.

Content Strategy & Structure

Before we even thought about how we’re going to design the digital platform, we thought about what content are needed to help and inform users what our product is all about. This includes, heading titles, voice and tone of the content.

User Interface Style Guide

Since Capo already has their branding all set up, we worked around their color scheme and implemented the same on our user interface style which you will be able to see on our prototype below. For Capo's privacy, I decided to not show the style guide.

Wireframes

Wireframes, are the blueprints of how a website could be structured based off of results from the user research. It is the design phase of the design thinking methodology wherein the valuable content and important information that the users needs are organized and structure in ways that would make their journey on your website as seamless and as quick as possible without them feeling lost and confused with their navigation.

To give you a preview, the following are the screencaps of the Homepage, Product Page and  the Services Page. In the following wireframes include contents that the personas, both primary and secondary, need to have a successful and valuable journey through the website.

Prototype

To reiterate, although this is group project, I worked on the prototype on my own based off of the user flow I also created. Ideally, this interactive element on the website would help the secondary users diagnose their own pool and spa concerns. This would eliminate calls and emails on Capo's end while still getting sales. This would also allow for stronger primary client relationships because essentially, this interactive element would lead the secondary users to buy products from the secondary users.

To get familiar with the idea of the interactive element, feel free to play around with the prototype below! 

Moving forward

Our main recommendations are derived from the survey we have conducted on Capo Industries current clientele and on their suggestions  of  what would make the website  easier for them to navigate through.Some of our suggestions are to  re-design certain parts of the website that are currently not showcasing Capo's capabilities to it's full extent and which will make Capo's website more enjoyable to users. And also add new features that will make Capo's website a better source of information and navigation for its users.

Key learnings

Capo is my very first Canadian client experience! I've learned how to communicate with local companies, manage client expectations and managing a team.