WorkSource Banner.png — WorkSource app

A design of a WorkSource app aimed at helping low-income job-seekers get the public transit they need to access all the myriad career resources available at WorkSource.

My Role

I was in charge of visual design for this project, and had some project management responsibilities. I helped our researcher gather initial information to work with during the discovery phase of our project, and then worked on branding and creating high-fidelity mockups of our final design. Additionally, I coordinated and refined our group presentation.

RESOURCES AND TOOLS

Sketch, Invision, Google Drawings, Google Suite, Pen and Paper, Sessions College Color Calculator

SPRINT LENGTH

2 weeks

Background Information

Project Scope

For this unsolicited app design project, I looked to design an app that did social good that would be (theoretically) funded by a sponsor of my team’s choice. Alongside a team of three other designers, I chose to address the issue of (low-income) job-seekers that needed assistance with transportation services.

What is WorkSource?

A job-search agency with a large amount of resources and numerous offices in Washington that is officially partnered with Washington State’s Employment Security Department (esd.wa.gov).

The Problem

Unemployed job-seekers, especially those with low-income, have trouble securing transportation to available career resources and job-related appointments.

The Solution

By providing transportation services in the form of subsidized public transit, we can get more people to career resources and job-related appointments. This will increase the rate at which people become employed.

We can determine if we are successful if people are getting employed faster!

RESEARCH

During the discovery phase where as a team of designers, we were trying to figure out how we could best serve low-income job-seekers, I assisted our researcher in gathering interview data. I called the WorkSource Redmond branch, and the main highlights of that specific interview was that we learned that the different WorkSource locations had differing levels of service - the Redmond location catered to a slightly different population of job seekers, mostly those laid off by foreign competition, and therefore was providing resources like large workshops and one-on-one councillors that did not seem as prominently offered by other WorkSource locations. As this data was a bit of an outlier compared to some of the other interviews we conducted, our team ended up crafting our main persona for a different audience, but we considered the potential of integrating some sort of video conference calling to grant wider access to those one-on-one councilors.

Current Branding

Screen Shot 2019-02-11 at 6.42.16 PM.png

While working on developing an app-specific color palette/typography, I closely consulted the official WorkSource branding guide, as well as looked directly at the current WorkSource website to see what colors they were actually using. For the most part, the colors used on the website would only deviate by about 10 or so in any individual color (the yellow on the site is #FDB813 instead of #FDB913, for example), so they were following the branding pretty closely.

With regards to the typography, as our project is scoped to mobile devices, the typography guidelines provided by the WorkSource brand are not as important as we will mostly be adopting San Francisco for iOS and Roboto for Android. That said, the official font of WorkSource is Futura and the WorkSource logo itself is composed of Copperplate Bold (WORK) and Berkeley Oldstyle Italic (SOURCE) and a yellow triangle.

“The two create a harmonious relationship with the arrowmark and are never to be altered.”

- Branding Guide

Proposed Branding

As our proposed app design is mostly a single touch transit pass and then what is effectively a large database of advice and news articles, one of the biggest takeaways is that the the app needs to be readable. High contrast colors would be ideal if they weren’t going to be on the white-black spectrum. The current navy blue (#00446A) that WorkSource uses is a strong shade that invokes a feeling of professionalism and efficiency, which contrasted nicely with the vibrant and optimistic shade of golden yellow (#FDB913) that WorkSource uses. However, the last primary color that the official WorkSource branding uses (#569BBE) is a pastel-steel blue that does not work particularly well as a background color, being much less readable than simple black on white, and is not particularly eye-catching. It is inoffensively dull, but also does not really earn a spot on the limited color palette of a single-service/informative app. What I ended up doing was plugging in the other two colors in a color calculator to obtain the third color needed for a triadic harmony. As the other two colors were shades of blue and yellow, the third color ended up being a shade of dark red which could be used to invoke a sense of determination and alongside the yellow, would be used as highlights to the primary navy blue.

With that in mind, I created the above style guide, also providing standard iOS and Android typographies from their respective design guides. I also designed a potential new app logo keeping in mind the use of the yellow triangle and using the three primary colors in my proposed palette. While I did not use Copperplate Bold, I did use the official WorkSource style guide’s recommendation of using Futura as their official typeface.

Wireframing and Design

I received initial wireframes from our interaction designer, and then annotated them and redlined them, passing immediate feedback about the conventions of the typography spacing and gutter margins, which were adopted and edited in after these annotations were created.

Hi-Fidelity Mockups

The high-fidelity mockups were constructed for Android in parallel with our interaction designer working on the iOS wireframes - differences between the wireframes and high-fidelity mockups are due to that and differing mobile guidelines. I incorporated the color and typography schemes in accordance with the style guide I created beforehand.

Project Manager - Primary Presenter

For our group, we split the tasks of the project manager amongst all the members. I was the primary presenter and was in charge of handling the presentation. I did not formally take any other project manager role, but I did end up creating a Trello for tracking task progress.

With regards to the presentation, I prepared an intro and an outro, and ran two practice sessions to time our presentation, as we were trying to keep it concise and under 15 minutes. On our first practice run, one where somebody was absent due to extremely unfortunate circumstances, we were clocking in at around 17 minutes as well as finding some errors in the slide deck. These practice runs were helpful in getting us a good estimate of how long our presentation was going to be, and by shaving off unimportant bits off of everyone’s sections of the presentation, we were able to mostly fit our entire presentation within the 15-minute allotment. During our actual presentation, we were unfortunately unable to run a video of a run through of our wireframes due to time, but was otherwise able to present everything else in a timely fashion.

Next Steps

For a continuation of this project, the completion of the high-fidelity mockup into a fully clickable prototype would have been great for the purposes of usability testing. One of the first things we would do with another iteration of the design cycle would be to consult with WorkSource to see whether or not we could get some more resources designed specifically for a mobile environment - resume building isn’t the most mobile-friendly task for example. Whereas maybe something like a video conferencing feature that allowed you to connect with a remote 1 on 1 councillor could definitely be a feature that a mobile app enables that the website currently can’t do and is in some demand according to our research.

See my other case studies

Case Study

Case Study