top of page
Osteorelieve
A startup business that required a user-friendly e-commerce website to sell health & wellness products. I created a user-focused design and prototype for the client's web developer.
ROLE
TEAM
CLIENT
DURATION
User Research
UX/UI Design
Wireframing
Mockups
A/B Testing
Prototyping
UX Designer
Osteorelieve
July - December
2021
Challenge
Solution
The client had hired a web developer to design and code a site on Shopify’s CMS. However, the website’s visual aesthetic and functionality were not optimized to offer an enjoyable user experience on both desktop and mobile.
With an emphasis on UX and UI design principles, I crafted a website design that would allow users to seamlessly browse and purchase the client’s products. The design also reflected the business owner’s minimalistic brand vision.
MY PROCESS
Research
Design
Prototype
Results
Research
Research
Phase 1
Understand the problem
STAKEHOLDER INTERVIEWS
I arranged an initial consultation to learn more about the client’s business goals and brand vision. In this meeting, I asked the client a list of pre-set questions to understand their needs in order to propose feasible solutions.
Key Questions:
-
Who are your customers?
-
Who are your competitors?
-
What is your value proposition?
-
What are your short-term and long-term business goals?
-
How are you currently addressing online areas of concern?
WEBSITE AUDIT
I conducted an audit of the client’s initial website, created by the web developer. This audit consisted of a detailed-observation of each page on the website along with a usability test of its functions.
Areas of concern:
-
Brand colour discrepancies - i.e. text, buttons, lines were not aligned with the brand
-
Pixelated logo and images throughout the website
-
Missing personalized brand materials - i.e. general stock images & videos
-
Inconsistent spacing between sections and headings
-
Partial information and grammatical errors
Phase 2
Research potential solutions
TARGET MARKET RESEARCH
In lieu of user data, I decided to research competitors in the industry by examining their website and social media platforms to understand their consumers. I then compared these observations to the client’s brand vision and mission.
COMPETITORS' ANALYSIS
I looked at trends in the industry for inspiration on website design to facilitate user interactions. I first considered direct competitors, namely therabody.com, gravityforce.ca, and xfitonway.ca, all specializing in the sale of massage guns. These brands provided insight on a structured layout of the site with basic elements such as CTAs leading to the product page, an accessible homepage that included contact, social, and payment details.
Then, I expanded my search to indirect competitors which included prowess.qodeinteractive.com, spengle.com, anovaculinary.com, and databox.com. Although these companies are not directly related to the client’s brand, their webpages represented a minimalist appeal sought by the client.
Design
Design
INFORMATION ARCHITECTURE
I began the design process by creating a sitemap to lay the foundation for my wireframes. Because the client intended to have the web developer input custom code into a Shopify template, I focused on designing 4 key webpages.
A/B TESTING
I collaborated with the client to test user interactions with the mockups. Accessibility features were added to all pages of the website, which included an English-French language translation option, live chat box, and a “top of page” button. These were added to facilitate customer service inquiries and offer ease in comprehension and navigation of the site.
WIREFRAMES
I used Figma to design mid to high-fidelity wireframes, by incorporating some features of the Shopify template as a guide. This layout provided an overview of the entire website along with sufficient information for the user to learn about the brand and easily purchase the product.
Results
Results
I learned to be resourceful in shortage of time and resources, while also delivering on the client’s requests. Being a part of this project was a rewarding experience as the client trusted me with bringing their vision to life and provided oversight on the process from start to finish.
bottom of page