OneSource Redesign
Improving the landing page of a school district's HR website
cursiveHead(1)
cursiveHead1-1
cursiveHead1-1
cursiveHead1-2
cursiveHead1-2
cursiveHead1-2
Frame-11
cursiveHead1-4

OneSource is the employee portal for the Houston Independent School District (HISD), one of the nation’s largest. 

The website handles employee HR needs and serves as a one-stop shop for everything from finding payroll information to signing up for and completing professional development trainings.

cursiveHead1
cursiveHead1-4
CursiveHeader

PROBLEM STATEMENT

Although HISD employees need to use OneSource to complete their HR and professional development needs, they are having difficulty with navigating through the site and completing tasks.  How can OneSource be redesigned so as to provide users with a smoother navigation and registration system?


ROLE     User Research, Wireframes, Prototypes, Interactive Design

TEAM     Solo Project

TOOLS    Figma, Principle, Whimsical  


SCOPE OF PROJECT

The scope of the project was to optimize the OneSource home page.

 

GOALS: 

Primary (User) - Optimize the users’ experience with improved site navigation and layout
Secondary (Business) - Increase employee productivity and increase employee confidence in the HR platform

Deliverables: Wireframes, User Map, Hi-Fi prototype for desktop and mobile


SUCCESS METRICS:

Growth in perentage of users who are able to complete tasks successfully.


BACKGROUND

Accomplishing tasks on the site are especially difficult because of the current interface.

 

Employees of the Houston Independent School District (HISD) land on the HR website, OneSource, to accomplish tasks that range anywhere from being able to download a copy of last year’s W-2 to taking a professional development course on cyberbullying in high schools.  


Getting through such a range of tasks is especially difficult because of the current interface design.  Considering the age range of employees was anywhere from new teachers fresh out of college to long time employees in their early 60s, I felt the platform’s experience could be refined to better serve all these groups.

currentOnesource

Employees are struggling to complete the tasks they need to because of the poor navigation system.   My solution aims to improve the main site navigation and layout to make it easier to locate and search for their desired task upon arriving on the home page and increase their success rate at task completion.

WIREFRAMES

Translating the users' needs and goals from a design perspective

 

Here's what a redesign of the home page would look like for desktop


1.  A top-level navigation bar

2.  A quick-start card

3.  Access to immediate tasks inside the card

4.  Overall redesign

Frame-12

1. Top-level navigation bar

 

mobileNav


New Mobile Navigation

The existing OneSource features options in list-views.  While this may lay out all the various links users might be browsings for, I wanted a more systematic layout that would better cater to accomplishing task objects.  The new navigation bar serves as the site’s central hub and eases website navigation across its many pages.

I turned to five current HISD employees to survey to get a better understanding of what tasks and searches they most frequently performed on the website.  I used that information to then perform a card-sorting exercise in order to create a better organizational flow for a new navigation.  The participants really linked the quick links, but there were really a few items on that list that they used frequently: finding their payroll information and requesting time off.  Secondary to those, being able to register for professional development courses. 

View of New Desktop Navigation

Frame-13

2. A centralized quick-start for skimmable and actionable most-used tasks.

 

Frame-14-1

This improves the visibility of the most used items and allows direct access to important actions the users must take.  I wanted a usability heuristic that surfaces to the user the fact that not only are these items of high priority, but they can also be gotten to speedily, further reducing the amount of time they would have otherwise spent on the website.

3. Complete tasks within the quick-start.

 

checkOne

For example, during tax season, the user can directly opt into how they would like to receive their tax information.


4. Interface redesign to adopt well-established conventions.

 

Once I had hashed out the framework of the quick-start, I added the layer of visual design to help emphasize those details of speedy task completion.  I wanted to appropriately represent the brand as a all, it being focused on the financial and long-term future of its employees.  Updating all aspects of the UI increases user confidence and eases overall areas of friction that have stemmed from its current layout.

framesONe(1)
framesONe(1)
framesONe(1)
expandedHome

Mobile Home Screens

mobileAll

MY TAKEAWAYS

What I would do differently

Due to this being a sprint, I went into this project with the understanding that a proper redesign would require much more user research and interviews to gain insight into other user needs.  Additionally, the home page is just the tip of the iceberg with the Onesource site, and there are opportunities to implement further changes, such as with the registration process for professional development classes.  Alas, it wasn't within the scope of the exercise I was working on.


Reflection

I really enjoy redesigns because they require working within a scope.  I also really enjoy designs that keep in mind the needs of enterprise.  How does a company encourage productivity while keeping its employees satisfied?  The answers to that question can, on one level, certainly be addressed through design solutions that benefit the user while reinforcing a positive view of the company.


Selected Works

CommonLitUsability Case Study

CursiveA desktop learning hub for young students

Anki RedesignUpdating flashcard creation on the memorization app