Adapt Website Redesign Case Study

Overview

Adapt is a physical therapy clinic that wanted a redesign of their existing website. I worked with Adapt a couple of years ago to create their first website design, but now their business has expanded, and they wanted a newly designed website to help reach more users.

My Role

  • Product Designer
  • User Research
  • Interaction
  • Visual Design
  • Developer

Timeline

November 2019 - January 2020

The Challenge

Objective

The goal of this project was to redesign Adapt's existing website to help with their ever-expanding business. Adapt wanted to expand more on the services that they offered, and wanted to change the scheduling service that was costing them much money.

Our High Level Goals:
  1. Understand users needs - I wanted to learn what the users wanted in a redesign.
  2. Design for responsive - Ensure the website was responsive because most users now book a session from their smartphones.
  3. Dominate SEO - Increase their SEO tags and meta tags to help them rise in the search rankings.

Users and Audience

Our primary users were the patients who were coming to Adapt to receive treatment for their ailments. The majority of the clients are athletes and younger patients, so getting their feedback was crucial to help me update the website to help fit their needs. The clients use their cell phones to book a session, so responsiveness was primary when designing and developing Adapt's new website.

My Role

My role for this project consisted of research to understand where the pain points and opportunities from the old site could benefit the redesign. I also designed and developed the website as well as enhanced SEO.

Scope of Work

I had two months to research, design, iterate, develop, and deploy the redesigned website.

Progress in the old design (left) and updated new design (right)
The Process

Trust the Process

For this side project, I used the double diamond process that incorporates the critical phases of Discovery, Define, Develop, and Deploy.


image-placeholder
In this project we used:

Discovery - Behavior-led design research

Define - Creative workshops and idea generation

Develop - Review ideas through culture thinking and design

Deploy - Prototyping selection and mentoring

Discovery

Understand who the users are

We found user's problems and needs that helped us determine how we would research and develop this website.

Discovery Deliverables:
  • Existing Product Analysis
  • Competitive Analysis

Existing Product Analysis

The first thing I did for this project was to understand how the existing product was doing in a quantitative measure. I was able to log into the site analytics to understand more qualitative data such as new users, bounce rate, and time spent on the site. I also understood what devices clients used to navigate the website.

Competitive Analysis

I wanted to create a competitive analysis to understand the physical therapy landscape in the Atlanta area. I searched all the top 10 sites for physical therapy in Atlanta. What I found is that most sites were responsive, but their content was so overwhelming that it became difficult to navigate their services.

image-placeholder
image-placeholder
image-placeholder
image-placeholder
image-placeholder
image-placeholder
Define

Generating ideas from research

I researched to help me organize and understand the user's issues with the current website and ensure we created all use cases before design and development.

Research Deliverables:
  • Sitemap
  • Use Cases and Task Flows

Sitemap

The sitemap that I created helped me organize the content that needed to live on the newly redesigned website. The sitemap also helped to show that we can still scale the site if the client ever wanted to add more content.

Use Cases and User/Task Flows

I wrote out a few use cases to help me understand the main issues users would encounter on the redesigned website. I also created task flows to help simplify the steps to see where I could iterate and improve the experience for this redesign.

Develop

Lets make something cool, but useable

After completing my initial research, I was able to identify significant problem areas and opportunities for this website redesign. I felt lucky, excited, and eager to design something simple but very eye-catching.

Research Deliverables:
  • Whiteboard Sketches
  • Low-Fidelity Wireframes

Whiteboard Sketches

Whiteboard sketches were used with the client to help breakdown the research and show how each page would be structured. We went through a few iterations until the clients and I were satisfied with the plan.

image-placeholder
Worked with client to whiteboard our design session to understand what they wanted the redesign to be.

Low-Fidelity Wireframes

After the whiteboard sketch session, I began to take those sketches and create Lo-fidelity wireframes in Adobe XD. I would send different iterations of the wireframes to the clients for feedback and approval. This process took about two weeks.

image-placeholder
image-placeholder
I went through many iterations with the client to capture what they wanted.
Develope

Let's Build It

Design and development were underway for the redesign of the website. My main goal was to create hi-fidelity wireframes and get approval before starting development work. I wanted to have defined designs created so there was no interruption in my development work.


Research Deliverables:
  • High-Fidelity Wireframes
  • Development
  • Delivery/SEO
High-Fidelity Wireframes

I created hi-fidelity wireframes in Adobe XD and would share designs with the clients every week to ensure we were on track with the redesign. I also made sure to design in different viewports to help the clients get a sense of how the design would fit in these different devices.

image-placeholder
image-placeholder
Development

Once the final designs were approved, I began with the development work. The development work took about three weeks, with iterations being sent through video to the clients for approval. I like to code in Visual Studio Code because of the speed and user experience it delivers. Once all development was complete, I had one final feedback and approval session before the launch of the redesigned website.

These are the recording I would take to share progress with the Clients
Delivery/SEO

The final code and images were uploaded to the client's AWS server and launched successfully in January of this year. I ran a few tests to check on the SEO tags and the performance of the site. I also modified a few elements that the clients requested.

image-placeholder
Really saw a huge jump of new users after the redesign.
image-placeholder

Outcome

The redesign was a success by the date of delivery. I was able to understand the client's needs and wants and to follow my process to deliver the website that I promised. The site did see a considerable surge of new users and a reduction in bounce rate and session duration. The added SEO tags are also helping the site climb the search engine rankings.

Key Takeaways

  • Transparency with Client - Being upfront with the clients created a great cadence that helped the redesign run smoothly.
  • Following a process - Following the double diamond process in my work helped me prepare my discovery and research before diving into the design work.
  • Delivering on SEO - I wasn't familiar with all the SEO tags that could help, but I educated myself to deliver a top-notch design with well-defined SEO tags.