Insynco

Getting you and your body back in sync, naturally.
Insynco mockup featuring the splash image
Program
Springboard UX/UI Design
Role
Designer | Team of 3
Product
Home Page | Redesign
Duration
4 weeks
Key Skills
Research Synthesis

Wireframes

Usability Tests

High Fidelity Mockups

High Fidelity Prototypes

UI Design

Visual Design
Project Overview
The Industry Design Project allowed for Springboard students to gain real-world experience on a UX/UI Design project. We were assigned a team, and then worked together to come up with a solution for a company.

The client assigned to us was Insynco, a naturopathic startup based in Toronto. They sought to redesign their homepage to improve conversion rates and more clearly communicate information to users.
It’s still ambiguous for me how this works. There's a lot I still don't understand about the process.
The Challenge
Insynco, a naturopathic startup, needs to improve their website's homepage to motivate users to book appointments. Conversion rates are currently low because users are unclear about the way Insynco works.
The Goal
We aim to make information easy to understand and to restructure the user interface to improve visual hierarchy — all to encourage users to book appointments and thereby increase conversion rates.
week 1. Research

To begin the Industry Design Project, the team had a project kickoff call with Insynco's co-founder + director of operations. We discussed their business' mission, methodology, users, and goals to gain an understanding of what they do. To understand their problem space, we conducted competitive research on three naturopathic practices. We then took their demographic data to create a persona and map out a user's journey.

KICKOFF CALL — Part of our team's initial meeting with the Insynco co-founder was discussing their company's vision for the homepage redesign. He wants to emphasize their science-based approach and create a visually cohesive website using a similar color palette to the current design. He stated that he wants to avoid using the color green and anything related to foliage in their iconography. Their overarching goal is to motivate users to book appointments.

A discussion about their current demographics was also discussed. This was important information that enabled us to understand who we were designing for as well as what the user needs are. We discovered the following information:

50 to 70% are females between the ages of 25 to 55 years old. They mainly consist of busy professionals in the Toronto area.
COMPETITIVE AUDIT — To better understand the way naturopathic practices conveys information to new users, we looked at three different companies: Parsley Health, One Medical, and Forward. We scrolled through their websites to understand the design strategies used on their homepages and discovered the following strengths: progressive disclosure to prevent users from getting overwhelmed with information, clearly stated services, and price transparency. Some of the weaknesses we encountered were related to UI strategies, such as poor navigation and a lack of Gestalt principles.
PERSONA — Our conversation with Insynco's cofounder revealed their user base. With these demographics in mind, we were able to generate a persona that reflects the shared needs, goals, and concerns of their typical user.

USER JOURNEY MAP — After our primary users were identified and our persona was generated, we were able to create user journey map. This illustrates the steps our target audience take to book an appointment on the Insynco website.

PROBLEM STATEMENT — A problem statement was generated to guide the next phase of the design process.

Sandra is a management consultant who needs to book an appointment with a naturopathic doctor because she wants to treat the root cause of her recent health issues.
WEEK 2. DESIGN

The kickoff meeting allowed for our team to understand Insynco as a company, the users that they cater to, and the market that they're in. In this next phase, the data we synthesized and the problem statement we generated were used to guide the design process.

WIREFRAMES — Understanding our user base and conducting a competitive audit enabled us to design our wireframes. Our design decisions were informed by the goal of motivating users to book an appointment with Insynco.

VISUAL DESIGN — To guide our design for the high-fidelity mockups, we selected fonts that communicate the lively, dynamic character that Insynco's co-founder wanted to convey, generated a color palette that is similar to the existing color scheme, and established motifs that reflect the company's science-based approach.

ACCESSIBILITY — Once our visual design was established, our team experimented with color combinations using our color palette. All of these are compliant with WebAIM AA and AAA standards.

HIGH-FIDELITY MOCKUPSAfter going through our wireframe and visual design concept with our client, our team developed high-fidelity mockups that incorporated the changes he wanted to see.

WEEK 3. TEST

In the previous phase, we created a design keeping Insynco's overarching goals and demographics in mind. We empathized with users and carefully listened to our client needs to develop a design solution. In this next phase, we tested our website to understand what worked and what didn't.

AFFINITY MAP — After conducting A/B testing, we wrote down our observations on virtual sticky notes and turned them into an affinity map by placing them in clusters that corresponded to a theme. By organizing them in this way, our team was able to see what our design strengths and weaknesses were.

USABILITY INSIGHTS — Once the usability test results were synthesized, we compiled the data and organized our findings. These insights will be used to iterate on the design for the homepage.

4 out of 6 users felt that pricing wasn't transparent
We need to change the layout so that users can understand all of their pricing options
&
‍2 out of 6 said that the conceptwas confusing on the original design
We need to remove any overly complicated explanations for this concept
&
1 out of 6 said that they didn't like that there were only call-to-action buttons on the top and bottom of the homepage
We need to add a CTA in the middle of the homepage
&
1 out of 6 users wasn't sure if the icons for medical conditions would lead them to a new page
We need to make this more informative and provide a clear link
WEEK 4. ITERATE

This week was dedicated to iterating on the design based on user insights and creating a high-fidelity prototype of our final design. We took the most commonly experienced issues to come up with design solutions and refine the homepage.

MODIFICATIONS — The A/B test data enabled the team to use these insights and create an updated design for the Insynco homepage. These modifications were made according to user feedback to make a more useful product for customers. To accomplish this, we changed the pricing layout and re-incorporated the collaborative care section with a more descriptive diagram.

REFLECTION — The next step would consist of a further round of usability testing to confirm the efficacy of our design for Insynco's homepage. This would potentially be done using a combination of A/B testing and data analysis.

This project has illustrated to me how important it is to work with a real-world client, design with constraints revolving around business needs, and being part of a team. We aimed to facilitate the process of booking an appointment by clearly conveying the information needed to book an appointment, and strategically placing our call-to-action buttons to motivate users to take action.

Thanks for reading!
Insynco mockup featuring several screens