Student Services
Duration
March 28 -
June 13, 2022
Tools
Adobe XD
WordPress
Role
User Research
Wireframe
Low & High Fidelity
Location
Remote
01
Overview
Student Services at Roseville provides home maintenance services, mainly ladder jobs for those who cannot physically or timely perform those tasks. The main goal for this project was to redesign the website in order to welcome visitors and leave the impression that Student Services at Roseville is a reliable company to ask to do house maintenance tasks.
“You deserve to spend more time enjoying your home than working on it”
— Student Services at Roseville
The Problem
The main problem was how the website was displaying the company's services and benefits.
Some of the issues were:
1. Overwhelming pages – there were too many words per page
2. Unclear CTA
3. Extremely long landing page
- all information was written in one page along with repetitive & unnecessary information
4. Benefits of the company was not pinpointed through use of hierarchy and color
Landing Page
FAQ
The Solution
1. Use red for important buttons like the main CTAs
2. Shorten page content by distributing contents throughout different pages of the website
3. Clarify hierarchy and display important information close to the hero image
--> Display what the company is offering as soon as the audience lands into the website
02
Target Audience
There are two target audience:
1) age 70+ who cannot physically complete ladder related tasks
2) age 27-40 who does not have time to take care of house maintenance tasks
Grandma Gertrude
Mom Mary
03
Wireframe
Logo
Call Now
Claim a Free Quote
Main CTA
"Services"
"About Us"
"Before and After the Service"
"Reviews"
"FAQ" (max 5)
The wireframe focuses on differentiating each sections with a clear pattern throughout the website. This would allow users to more easily navigate throughout the website
Key Points:
-
Less words & clear Call To Action
-
Titled sections
-
Shorter FAQs
-
from 40+ to 5
-
-
Shorter contents overall & 'learn more' button for more information
04
Low Fidelity
Hero image is important when it comes to representing the company and its' values. The original hero image was a bird's-eye-view of a small neighbor. However, using a more positive image that shows happiness of a family would convey the company's values more.
Key Points:
-
'Services' is right below the hero image for easier access to services
-
Sticky CTA at the top for constant exposure to the users
-
Images displaying before and after the service
05
High Fidelity
As the designs were transferred from Adobe XD to WordPress, there had to be adjustments due to what was allowed on the WordPress platform.
-
'Services' section was kept as how it originally was, and there were minor changes to fonts and button styles
-
The client wanted to keep both the history and about section together, so we agreed to keep both sections and keep them both short
06
Takeaways
After completing this project over the course of approximately 3 months, I learned a lot of things that is required outside of just designing alone.
-
Designing on different platforms like WordPress requires appropriate accommodation depending on what is possible on that specific platform
-
Having two target audience requires extra attention on wording and content emphasis
- Teamwork greatly improves work productivity and results acheived
07
Link
