Graphic Design MFA student
Left to right: Caglar Yildirim, Meriesa Elliott and Kayla Brown. Photo by Debrah Trout.
Hi, my name is Meriesa Elliott and I am a graduate student pursuing a Master of Fine Arts degree in graphic design at the Iowa State University College of Design. Over the summer and into this fall (2015), I had the opportunity to work with two other Iowa State graduate students on a project for Fareway Stores, Inc., a Midwest grocery company with more than 100 stores.
Based on the success of a prior project my graphic design classmates and I completed for Fareway in a fall 2014 studio taught by Department Chair Bernard Canniffe, the company had contacted Canniffe with a proposal for another project. Because the project didn't fit well within the objectives of current academic courses, Professor Canniffe provided Fareway with my name as a possible resource. The company hired me to design a new human resource information system (HRIS).
I recognized this would be a significant undertaking and put together a team with Kayla Brown, who is pursuing a Master of Fine Arts in graphic design and a certificate in human computer interaction, and Caglar Yildirim, who is pursuing a PhD in human computer interaction with an emphasis in psychology.
Organizing the site architecture.
When we began the project, all of Fareway’s human resource processes were paper based. To better understand the existing processes, we created the site architecture to group the different needs of users together for efficient access. We did this by writing all of the needs on sticky notes and organizing them based on similarities, which enabled us to generate a preliminary layout of the HRIS.
Once we understood the process and developed the preliminary architecture, we developed personas to guide us through designing the layout. Understanding what a typical user would need to access helped us decide where things would be located.
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.
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.
Throughout the project we continually conducted surveys and interviews. We surveyed the employees regarding their feelings about the current paper-based system before any other work was done; from the roughly 150 initial responses and additional feedback during the project, we were able to determine what the hot-button issues were with the current system, so that we could design the new system with those things in mind—to create a product that would allow for fluid, non-stressful interaction.
After the final design was accepted, we created 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.