Redesign to increase customers and prioritize accessibility
Responsive Website β¦ UX/UI β¦ Redesign
Summary - Client Project
I conducted a website redesign project for Carevocacy, an age tech startup that connects senior citizens with online tech tutors to enhance their technological skills and maintain connections. The project aimed to identify user pain points and improve website accessibility. The startupβs website focused on two key services: one-on-one technology tutoring and hosting in-person classes for seniors.
Tools
Figma, Figjam
Role
UX/UI Designer
Timeline
Jan - Feb 2023
(4 weeks)
Designing for Seniors and Caregivers
Problem
Connecting seniors that need tech help with online tutors
With this project, I was faced with a difficult, but intriguing problem: how might we design a website for seniors that struggle with using technology? Carevocacyβs current website needed a redesign to accommodate these seniorsβ unique needs.
Solution
Accessibility for seniors is key! β§ο½₯οΎ
I redesigned the website to focus on accessibility for senior citizens and their caregivers, a user-friendly booking process, and easy-to-use navigation. I also created a business page for B2B interactions as the business owner wants to transition his focus to this service in the future.
β§ Home Redesign
Font size and images are considerably larger now and the navigation is prominent as the user scrolls.
Users are always able to see a Book Now option.
β§ Business Page
Utilized commissioned illustrations to invoke an inviting and friendly feeling, while also promoting the Carevocacy brand.
The βBrochureβ button would provide additional information.
Photos and reviews to invoke reliability and trust in users.
β§ Questionnaire Redesign
'Book Now' button leads users to a simple and quick questionnaire.
Users can provide personal details and specify if they're booking for someone else or a business looking to work with the company.
π Discover
Research
Conducting a Design Audit to Find Current Issues
I was brought onto this project by the CEO of Carevocacy. While navigating the current website, the first issue I noticed was there was little information about the business, only what the user can do to buy the service. I asked the business owner what his goal was with the redesign:
Using Microsoft Clarity to gain insight on the websiteβs current analytics, I discovered the website was not drawing in new customers. The current siteβs layout was not bringing in new customers efficiently.
Research Objectives + Questions
B2C: Determine what seniors need to know before booking.
B2B: Find out what businesses need to see to trust Carevocacy.
Determine how to make the information presented easier to understand.
What is our userβs goal when they first reach the site?
How will users stay in touch with the company?
What are our userβs current frustrations with the site?
Competitive Analysis
Gaining Inspiration from Competition
View In-Depth Competitive Analysis
I analyzed direct and in-direct competitors to see what features we could include for Carevocacy:
Taking inspiration from sites like Conviva, which Carevocacy partners with, I wanted to make the font size larger than it usually is on a desktop. (Conviva, Senior Planet)
The site needed a phone number/easily accessible contact (Gooroo).
I was inspired by a questionnaire that leads the user throughout the process and to the end goal (booking a consultation call appointment). (BetterHelp)
User Interviews
Users were overall confused about the purpose of the website.
Due to time constraints, only 5 participants of the target audience were interviewed to access the websiteβs usability:
2 seniors from the targeted age group (65+)
2 caregivers
1 business owner
The goal was to understand the users' familiarity with internet usage and their perceptions of the website's purpose. Insights from the business owner provided valuable input on what businesses would seek when visiting the site.
βI feel like there isnβt enough informationβ¦ what does this website do? How would I contact them?β
-Caregiver
βUsers have mistaken the website as being tech support, or have mistaken that I am the only one that works in my business.β
-CEO of Carevocacy
The Current Website
Main Insights
π‘ Users need a clearer understanding of what Carevocacy does to trust them.
By providing more in-depth information about Carevocacy and what they offer, we will make it more clear to users what the website is about and what it can provide for the user. It will also make the business appear more reputable to potential collaborating businesses.
π‘ In practice, the main audience would be the caregiver of the seniors.
We keep accessibility in mind in the case that the senior is alongside the caregiver, or if the senior is independent and more tech-savvy than average.
How might we give our users confidence that they can access the information and services they need?
π Define
Feature Prioritization
Focusing on clarifying the websiteβs purpose
I wanted to prioritize features that the website absolutely needed, such as testimonials to boost credibility and a noticeable CTA button to prompt users to take the questionnaire and get in touch with a human. I sorted features inspired by direct and indirect competitors.
User Personas
Who are we redesigning for?
I created three main personas based on the interviews: the senior looking to learn technology, the caregiver who wants to book a call, and the business looking to collaborate with Carevocacy.
Storyboard
Visualizing Our New Solution
In this storyboard, we follow the caregiver and the senior working together to book a consultation call. The caregiver has no time in their day to help the senior learn all the questions they have. Once they look up tech help options, they find the site. They are then able to easily and successfully book a personalized call.
Task Flows + Site Map
Information Architecture
These 2 task flows follow our users to their successful goals when they're on the website. In the first flow, the user is able to easily find the Book Now CTA and fill out a questionnaire to create an appointment. In the second flow, the business owner user is able to quickly find information about Carevocacy and contact them.
I also created a comprehensive site map to ensure a clear understanding of the overall site's organization.
Task Flows
Site Map
π¨ Design
Low Fidelity Wireframes
Staying on brand
The main goal at hand was to redesign the home page. Due to time constraints, I prioritized a questionnaire and creating a business page over designing individual tech tutoring and tech class pages.
Following the companyβs brand guidelines, I created a new home page, business page, and questionnaire. After rough sketching on paper, I hopped onto Figma to create the new designs.
UI Kit
UI Reference and Accessibility
To maintain consistency in the redesign, I utilized the companyβs established branding, which includes the color palette and font choices. The color palette now includes white and off-black for readability and a secondary purple for variety within the same color range. Although I considered making the purple darker to increase legibility, we decided to keep the original brand color for consistency. I still made sure all color combinations met at least AA accessibility standards.
High-Fidelity Wireframes
Desktop Screens
Mobile Screens
π Deliver
Usability Testing
Testing Our New Design
After creating a working prototype, I conducted in-person and remote usability testing. Users were asked to think aloud as they went through the site. I prioritized the feedback of the caregivers as these would be the primary users of the site.
Task Completion
100%
User Satisfaction
92%
Tasks
Completing the Questionnaire
Navigating Home page
Navigating Business page
βI really like that we're going to use real photos and as well as the interface of a video call to emphasize that it's an online session.β
A majority of the iterations were mostly making sure that all the UI is pixel-perfect and changing up the wording of certain text. I made sure to update those changes effectively.
π Reflection
What I Learned
I developed the skill of thorough client questioning to understand individual website redesign needs and adapt to diverse communication styles. Recognizing time constraints, I prioritized essential pages, fostering continuous enhancement through iterative design.
Next Steps
We intend to validate the redesign's effectiveness through testing with potential customers, using their interactions and feedback to inform ongoing improvements. We will further polish the website's copy and pages for consistency and clarity. Looking ahead, I am excited to contribute by designing a user-friendly business questionnaire!
Congrats on reaching the end of my UX case study! π
Thanks for investing your time and attention in understanding my work and design process, I truly appreciate it. Interested in another case study? Check out my other work!