Fareway UX Project

This was a UX project where I worked with two talented graphic designers, Kayla Brown and Meriesa Elliott, to design and test a Human Resource Management System (HRIS) for Fareway Inc., a retail grocery store chain in the Midwest. The goal of the project was to design the user experience for the new HRIS, following an iterative user-centered approach to gathering requirements, designing and evaluating the new user interface and user interaction. The new HRIS intended to be an online website that can be accessed by all users with various roles. Throughout the project we closely worked with various stakeholders, including the project team and end users with various roles.

Gathering requirements
When we began the project, all of Fareway’s human resource processes were paper-based. To better understand the existing processes, we administered a survey to Fareway employees with different roles and collected data about their day-to-day tasks and how they performed those tasks in the paper-based system, as well as their satisfaction with the paper-based system and what they would like to see in the new HRIS to be designed and developed. We also conducted one-on-one interviews with users representing various roles within Fareway to have a thorough understanding of their needs and expectations. In addition, we also analyzed internal needs analysis documents prepared by the project team within Fareway for this project. Combining all these various sources of information, the outcome of this phase was an analysis report detailing the needs and expectations of the users, the requirements for the new HRIS, a list of personas representing users with different roles and a low-fidelity prototype of the website architecture.

Wire frames and navigation
We then began developing the wire frames for the basic layout of each page, using the site architecture to determine which pages would contain the different resources that users and administrators would need to access. The first part we laid out was the navigation bar. Developing an early version of what should be on the main navigation allowed us to have some loose semblance of the site hierarchy, which kept things organized and consistent. From there, we divided the branches of the hierarchy so we could each focus on individual portions of the site. Then we each developed dozens of sketches of each page.

We gathered all of the sketches together and discussed what we liked and didn’t like. This was a long process of refining, rethinking and working out a fluid, functioning layout and hierarchy for the main pages. Once we had that sorted, we started the process of bringing it all into a digital format. It was at this stage that we started deciding what color palette the HRIS should have. We discussed colors with Fareway, and they wanted to make sure the color choice worked well for people with color blindness.

Only after all of this did we begin the design and prototyping phase using Illustrator to create all the icons and page mockups. From there we used the prototyping software Axure to build designed prototypes which were used to conduct user testing. User testing was continued throughout the design process all the way to the end of the project.

User testing
Through prototyping and user testing, we not only found design problems that required fixing on our end, but Fareway also discovered parts of their own processes that could be done better when moving to a virtual system. It was nice to have a functional prototype throughout the process because it allowed the Fareway employees to actually experience the product during its development, to be able to click on links and understand how the HRIS would look and feel. We closely worked with end users in every step throughout the project.

Style guide
After the final design was accepted, the last product was a style guide to ensure that during the development and implementation, the Fareway IT team would know exactly what to put where. For each page the style guide explains the color code, pixel distances between each element and the basic branding of the product so that if anything is added in the future, it will be clear what style to follow for new pages and additions.