UW Employment Program Website Redesign
About UWEP
The University of Washington Employment Program (UWEP) is a national leader in vocational rehabilitation dedicated to helping individuals with disabilities find and maintain employment within their community. While UWEP is an innovator in vocational rehabilitation, their website did not reflect their innovative nature. UWEP leadership knew its existing website did not reflect its innovative nature, mission, or long-term client acquisition goals.
The Challenge
As part of the UW HCDE Summer Passion Project, I recruited a team of four other designers to redesign the UWEPs website from the ground up.
The Nitty Gritty
My Role: UX Researcher, Designer & Team Lead
Timeline: 12 Weeks
Practices: User interviews, stakeholder interviews, project management, usability testing, wireframing, website design, WordPress development
The Process
DISCOVERY
We started our project by gathering internal insights from stakeholders, cataloging content, and listening to u
Stakeholder Interviews
To better understand the purpose of the redesign, establish the project scope, and define the project goals we conducted four stakeholder interviews with the Director and Associate Director of UWEP, UWEPs Technology Director, and the Brand Marketing & Strategy Manager at UW. I was responsible for creating the interview questions and leading all three interviews.
Purpose
Update aesthetics of website to align with UW branding and elevate web presence.
Update outdated content and improve storytelling to better support current & prospective clients.
Recruit new clients and better support current clients with up-to-date information.
Scope
Update the website's look and feel to align with updated UW branding and modernize the form and function.
Increase the CMS ease of use by shifting from Drupal to WordPress.
Update, simplify, and synthesize content across the website by updating the information architecture, rewriting content, and adding visual elements.
Goals
Maintain the website accessibility
Make website client-focused through thoughtful UX, updated content, and adding clear CTAs.
Update overall aesthetics and align with the current UW Be Boundless visual system.
User Interviews
Next, we conducted five user interviews via Zoom to understand users' challenges, motivation, and current interactions with the website. I was responsible for developing the interview questions and conducted three of the five interviews.
At a high level, we found:
Users did not like the web site's overall look and felt untrustworthy.
The design does not align with the current UW Be Boundless branding.
Users felt the website lacked visual elements and wanted pictures of providers, clients, and testimonials like other supported employment agencies have on their websites.
Content Audit
Next, we sought to understand the website's current content. With my team member, Sil, we conducted an abbreviated content audit.
Here are some of our high-level findings:
A significant amount of content was outdated, and critical information was hidden too deep in the website.
Missing calls to action and visual elements, especially compared to other agencies.
Redundant content across the website
Competitive Analysis
The last step in discovery was understanding the competitors in the supported employment space. To do this, my team members conducted a competitive analysis of five other employment agencies in the Seattle/ King Country. They collected information on information architecture, navigation, page layout, calls to action, tone, and visual elements.
The complete report is an extensive spreadsheet that's not very interesting to look at, but here are a few of our favorite insights.
Northwest Center
• The content presented is engaging and focused on creating a sense of trust.
• Informative, engaging, easy to scan; however might be too text-heavy.
• Clear call to action paired with engaging images.
Provail
• Easily digestible, personable information with clear UX writing.
• Calls to action on almost every page and easy to navigate.
• Client focused and engaging
• Images are high quality and support the content on the page.
Valdis
• The home page is clear and compelling; however, secondary pages are text-heavy and hard to navigate.
• Lack engaging images; have hero images that don't support content.
• Clear call to action.
DISTILL
Personas
Using the information collected during our discovery phase, I developed a persona that we used to represent our primary users' needs, goals, and pain points. Based on our stakeholder interviews, UWEP management felt updating the website was most important for recruiting prospective clients.
Information Architecture
Before moving into designing, we focused our attention on the current information architecture. My team members worked diligently, organizing card sorts and working sessions to ensure the content was exactly where it needed to be. Here’s a subsection of the final site map the team created. For the full version, you can look here!
DESIGN
Moodboards
To kick off the design process, our team spent one working session designing mood boards. We used these mood boards to inspire our design process and as a group bonding activity. As the project manager, I felt it was important for us to have fun, creative activities that showed each of our unique styles. Here are a few of them!
UX Copy
One of the primary goals of this website redesign was to make the website more user-friendly through storytelling. From our content audit, we found that the current website had outdated content scattered throughout,m missing content, and content that just needed a bit of wordsmithing. As a subject matter expert, as I was a previous employee of UWEP, I was responsible for writing all of the updated content on the website. Here are two examples of my favorite work.
View: Current UWEP Landing Page | About UWEP Blurb
View: Updated UWEP Landing Page | About UWEP Blurb
View: Current Solutions for Job Seekers Landing Page | Overview
View: Updated Solutions for Job Seekers Landing Page | Overview
Visual Langauge
With the content created, it was time to start designing. We began by creating a visual language. My team member, Erika, developed the final version using Figam. The visual language ensured our team had a cohesive and consistent style while designing and acted as an artifact for the UWEP administration to use to maintain their website after we released the website back to them.
Wireframing
Using Figma for its collaborative ability, we began wireframing the website. We focused on designing a solution that addressed our stakeholder and user insights obtained during the discovery phase. Here’s a segment of the wireframe for the landing page I created and how the design implements the user and stakeholder needs, goals, and desires compared to the current landing page.
View: Updated UWEP Landing Page
Add visuals, align with UW Be Boundless Brand, develop trust, and create calls to action.
Be Boundless: Created a header identical to the UW Be Boundless theme. Using this theme creates continuity between UWEP and UW as a whole.
Hero Image: Adding a hero image aligns with the UW Be Boundless theme and modernizes the feel of the website.
Hierarchy: The current hierarchy on the UWEP website was not ideal. I created more hierarchy for the user the scan the pages and identify relevant content.
VIausl Elements: Added placeholders to add visual elements to give the website an updated feel and show the unique clients of UWEP.
Call to Action: Added call to action on the landing page to quickly guide users through the website.
WordPress Development
As a new designer, I am still learning the ins and outs of website design. Our client was transitioning their CSM from Drupal to WordPress, so we were able to develop the site from the ground up. Collaboratively, our team divided the responsibilities for developing specific pages and I was responsible for reviewing the final solutions. I was responsible for the development of the Home page, landing pages for “Solutions for Job Seekers and Solutions of Employers”.
Since you’ve seen bits of the Home page and Solutions for Job Seekers pages, here’s a snippet of what the final version of the “Solutions for Employers” looks like.
TEST
We asked five users to “think out loud” while testing the first version of our WordPress site. Here are some of the high-level findings.
Inconsistencies between elements including tiles, buttons, and font size.
Clear navigation and information architecture across the site; love the clear, bold theme
Add navigation instructions on the contact us page
REFINE AND DELIVER
We spent time implementing all of the user testing feedback and stakeholder insights and completed the development of the website in WordPress. While the website is complete, it has yet to launch due to UWEP IT staffing complications. To show you the final solution, I’ve put together a video. Enjoy!