AppTracker Case Study

Since completing this project, I’ve continued learning and sharpening my skills. At this point in my career, there are definite changes I would make to this app, including:

  1. Replacing the color highlighting on the follow-up calendar with symbols or other visual cues (potentially an x over the currently red dates, a single slash through yellow dates, and green dates are just open).

  2. Changing the “add an image” links for cover letter and portfolio to notes fields.

  3. Adding an “Application Info” link to return to that filled-out section below the “Yes” button

  4. Adding a filter to the jobs page to quickly jump view items for each of the three sections.

  5. Reviewing all colors to make sure appropriate contrast is used in all places.



Project Overview

AppTracker tracks the details of your job applications from interest in the job to a company decision, reminds you of the deadlines in the process, and provides helpful tips and tricks to assist you.

Primary tasks include:

  • Create an entry for each job you’re interested in applying for, adding the

    • Job title

    • Company name

    • Company contact and contact information

    • Salary information

  • Update the entry for each job as you complete steps in the process, including

    • Submitting the application and cover letter

    • Sending in a portfolio of work

    • Scheduling an interview

    • Following up on your application submission or after an interview

  • Receive notifications for scheduled items, such as when to follow up on an application

  • Receive helpful tips and tricks to assist you in your job search


User Research

Over the span of two days, interviews were conducted with four different users. In addition, online research was conducted for that perspective on information for this app. During each interview, users were asked questions to learn about the processes they’ve used previously, what their conceptual model is, and what they would expect this app to look like. The online research was conducted to find out what experts recommended as well as what other potential users would need.

Interview Questions

  1. What kind of process have you used to track job applications?

  2. How effective was that process for you?

  3. Are there any aspects of that you’d change?

  4. Imagine using an app to track job applications – what information would you want to track?

  5. Are there any other features you’d want? If so, what?

  6. How could you see yourself using such an app?

  7. What would you expect an app like this to look like?


Findings and Implications

Key Findings

  • Users have used very different (or no) systems, but agree that an application such as AppTracker would be helpful

  • Consensus on tracking the following data points: Company, date and time sent, date heard back, last contacted company, city, position summary, notes section, built-in reminders/to- do list, career helper section (tips!), status

  • Users stressed that keeping this organized is key. They said that this much data needs to be organized well for it to be usable.

Implications

  • While the appearance of this app will be important to appeal to users, the information needs to be organized sensibly so that this makes the process easier instead of harder

  • In addition to tracking data, users are interested in having tips and samples for the process: either in a separate section or that pops up when the app recognizes you’re working on a particular part of the process

  • Research different apps that contain a lot of data points that users input, such as budgeting apps. Suggested apps to look into: Goodbudget, Mvelope, EveryDollar.


Task Flow Diagram

Before I moved on to wireframing, I laid out a task flow diagram for the major tasks users can complete in the app: viewing helpful tips and adding or editing a job entry.


Thumbnail Sketches

Now that I knew what the users needed out of the site, I moved on to the wireframing process. Instead of creating actual-size digital wireframes, I started with thumbnail sketches on paper to quickly experiment with different layouts.


Low-Fi Wireframes

My next step in the wireframing process was to create full-size, low fidelity wireframes. I sketched these out on paper and added text and color to prepare for my user test.


Wireframe User Test

I then put the wireframes through a round of user testing. I developed a protocol to prompt users to complete key tasks using my redesigned interface. During each of the five user tests, I traded out the pages or added layovers to simulate the changes based on the users’ interaction.

Results

  • The interface clearly communicated to the users for the basic process of adding a job and viewing tips

  • Colors used in the follow-up reminder calendar didn’t clearly communicate their purpose to users [#1]

  • Users were confused by apparently having to save job info twice when returning from the “have you applied” screen – once on that screen, then once on job info screen [#2]

  • Users paused when trying to decide how to remove jobs from their list. They eventually tried swiping across the job or doing a hard tap but only after pausing and thinking for several seconds. [#1]

  • One user expressed concerns about keeping multiple job applications with the same title straight [#3]

Planned Revisions

  • Add labels to the calendar page to clarify colors (tabled in favor of other other projects, so this does not appear in final designs)

  • Add introductory tutorial on first opening the app to introduce users to the various gestures used across the app (outside the scope of this project, so this was not designed at that time)

  • Add company name below the job title on the jobs page


High-Fi Wireframes

From the wireframe user test data, I planned some new revisions to my interface for the website. I then created high-fidelity wireframes, again using actual content that would be in the site and simulating the hierarchy of elements. I didn’t incorporate any graphics or color yet in the wireframes, but instead created style tiles.


App Persona & Styles

Before I created full design comps, I next developed my app persona, including the style tile. The app persona includes the brand name and overview, image, brand traits, personalilty map, voice, copy examples, visual lexicon, and engagement methods. My style tile is based off of the persona I’ve defined.

 

Brand Name: AppTracker

Overview

AppTracker is your trusted mentor coming alongside you to help as you’re looking for a job. It’s goal is to help you reach your goals and will ask along you every step of the way.

Image

Emma Watson. She’s taken on a professional and mentoring role with her work for the UN, HeforShe, and her book club. Emma knows when it’s time to get down to work but also has fun while doing it.

Brand Traits

Helpful, but not smothering. Fun, but not ridiculous. Witty, but not snarky. Authoritative, but not domineering. Professional, but not stodgy. Robust, but not complicated.

Personality Map

Voice

AppTracker’s voice is friendly and trusted. Its voice is casual throughout most situations, but if you’re getting yourself into trouble, AppTracker will add a warning edge to its voice. AppTracker will always explain things in layman’s terms, avoiding jargon, but will use contractions.

Copy Examples

Success – Yes! Your job’s been saved!

Error – Oops. Double-check that job title, please!

Failure – This feature is currently not available. Our engineers are on the job and will have it back up in a jiffy. Thanks for your patience.

General copy – Resumes seem daunting to write. But they don’t have to be! Let’s go through the process of how to write a killer resume step-by-step together.

Visual Lexicon

Engagement Methods

Anticipation: AppTracker will rotate through various different entertaining success and error messages. These won’t take away from the message delivered but will just add to the fun.


Initial Design Comps

Now that I had high-fidelity wireframes and a defined style direction, I applied the styles to my wireframe and started incorporating images and graphics into the app. After I finished creating the design comp, I uploaded all of my screens to InVision and prototyped the various changes that would occur as a user navigated through the app.


Final Design

After completing my initial comps, I reviewed them and evaluated whether I wanted to make any changes. I was happy with how I applied my app persona in the design, so I reviewed my prototype setup in InVision to finish out this project.