Jump To

01. Overview
02. Analysis
a. Usability Evaluation
b. User Interviews
c. Information Architecture
d. Program Analysis
e. Comparative Analysis
03. Goals
04. Design (IA & Layout)
05. Design (Visual)
06. Reflection
07. What I Learned

Summary

Redesigned the information architecture and layout of a résumé analysis tool. Main points addressed were grouping information into relevant clusters so that it could be layered to make use of the Z-axis. General visuals were also polished up and content would be reduced. Created an easier-to-use mechanism for the “Comparison” feature.

What I Learned

1. Working and making decisions quickly on a deadline.

2. Honed my visual design skills.

Project Specs

Role: research ideation, design, mockups
Project type: individual design challenge
Timeline:  June 2019 (5 days)
Tools: Sketch
Methods: user interviews, wireframes, information architecture

Jobscan is a tool and service that helps job-seekers analyze their résumés and ensure that they are optimized for automated Applicant Tracking Systems, to help increase their chances of getting called for an interview. The main functionality Jobscan offers is a comprehensive report of how an applicant’s résumé compares to the job description of the role they are applying for. I was tasked with redesigning the Results page that is generated after a user uploads their résumé and the job description.

Constraints & Assumptions

Since this was an open-ended challenge, I was not given any particular area to focus on — for example:

• a user task (e.g., finding certain information, making changes to the résumé)

• an aspect of the design (e.g., information hierarchy, visual)

• a metric to improve (e.g., time spent on page, number of topics explored)

With the lack of particular goals to design for, I decided to do a thorough page evaluation and conduct 2 user interviews. The findings from this initial research enabled me to focus on information architecture, layout and some visual design.

A key assumption that I also made during the redesign was that I was working with the existing content and functionality, and not necessarily coming up with new features. I also assumed that while Jobscan.co would have different groups of users, I would be focusing on the users that are new grads, possibly creating a résumé for the first time.

Process

My first step was to take the provided tour through the Results page and then spend sometime exploring the page and its functionality on my own. During this exploration, I documented some usability issues that I noticed. There were a few broad types of usability issues:

1. Flat information hierarchy

2. Consistency of actions (specifically around free/premium features, side nav)

3. Major user tasks or calls-to-action not prominent

4. Page layout and UI

Assumptions

Since I did not have access to any data about Jobscan’s user base, I decided to focus on a subset that I personally had access to — graduate students. This would lead to some assumptions being about Jobscan’s user base, listed below:

1. Early career: this is their first or second time looking for a job

2. Savvy: users are proficient with computers

3. Identify and update: users want to quickly identify problems and make changes to their résumés

Next, I asked 2 grad students at UW to use the page and provide their feedback. Both students had recently gone through the job-seeking process, but neither had used Jobscan before.

Findings

• One out of two participants said they would only use it if it was quick and easy

• One out of two participants said they liked the colour scheme and the visual design

• Both participants were confused by the “Cover Letter” section and whether it differed from the résumé report

• Both participants were not sure what the bar charts in the Overview section were communicating

• One out of two participants noted that having the (?) button in the Overview section rather than when you clicked and scrolled down would be more useful

• One out of two participants expressed interest in generated/template résumés — i.e. more suggestions and actionable insights in the report

• One out of two participants wanted to see specific callouts in their résumé, rather than just text or charts

• Both participants were frustrated by not knowing which features are “Pro” and not knowing the exact function of some features

After analyzing the current information hierarchy of the Results page, I found that the IA was very ‘wide’ and flat, i.e., most of the information was being presented at the same level. This made it hard to quickly scan or parse the major categories of information, before digging deeper into certain categories. The Z-axis was not being utilized effectively.

Another thing I noticed was that the ‘Resume Reads & Resources’ section appeared nested under the results. Since it is not necessarily related to each specific résumé analysis run by a user, it should move up in the hierarchy.

Taking these factors into account, I created a revised IA to use in my designs further along the process. The main objective when revising the IA was to use the Z-axis more wisely, and allow the user to determine which categories of information are available before choosing one to dive deeper into.

Below are the current and the proposed information architectures. (Click to enlarge)

After revising the IA, I looked at how this information was laid out on the page itself. The biggest thing I noticed was fragmentation in terms of how user actions were laid out. Some actions such as naming, sharing, printing were separated at the top, while others like scan options and rescan and edit were placed below the side navigation. There did not appear to be a clear reason for this, and the hierarchy of the actions is not communicated through their placement.

Another thing that stood out was that there were 2 major types of report elements — a checklist and a comparison. In addition, a secondary type was job recommendations. There were multiple sections of each of these types of content, and by flipping the hierarchy, the information could be consolidated into one section per type of content.

I sketched some alternate programs to use as a blueprint when I got to the wireframing stage.

To the left (above on mobile) are the current program and below some alternate program sketches. (Click to enlarge)

There are several services very similar to Jobscan. In the interest of time, I decided to focus on one that seemed like a strong competitor: Resume Worded. If given more time, I would do more comparisons, and also choose the competitors based on metrics, rather than arbitrarily. The comparative analysis further reinforced the idea that I needed to focus on IA and layout before starting to redesign the visual elements.

I analyzed Resume Worded’s results page (screenshot and notes below).

Architecture & navigation

• Top bar has clear calls-to-action

• Strong side navigation bar that takes you to different parts of the report

• There is no mixing of functions in the side and top bars

• Report sections are paginated, as opposed to vertical scrolling, making the IA less flat

Visual audit

• Sentences are short and clear, and use a more action-oriented tone

  • “Add more numbers and metrics” (Resume Worded)
    vs.
    “There are five or more mentions of measurable results in your resume. Keep it up - employers like to see the impact and results that you had on the job.“ (Jobscan)

• Pro features are clearly marked, but not intrusive to the experience

• Use of shadows, contrast and text hierarchy to clearly mark sections

• Lots of whitespace allows easy scanning

Design and usability notes

• Number of visual styles (H1, H2, links, buttons) are limited and used with intention

• Most buttons are easy to identify as buttons

• Use hovering tooltips rather than modals

After exploring the Results page and doing some research, I outlined some goals that I wanted my redesign to accomplish. I used these as guiding principles when making decisions.

1. Make it easier/quicker for users to understand what each part of the report does

2. Chunk out information to make it less overwhelming by utilizing Z-axis more

3. Update visual design to accomplish goals 1 and 2

   1. [Stretch goal] Update visual design aesthetic to be more modern

4. [Stretch goal] Make content more digestible and action-oriented

a. Page Structure

Using the proposed program sketches from earlier, I began to create a few layouts in Sketch. I ended up using a few parts from different sketches to create a suitable page structure. The page frame would remain the same, while the content in the middle would change, corresponding to different parts of the report. I decided to go with this structure since many sections in the report had a similar information structure and that was a natural way to group the sections of the report.

b. Header & Actions

After settling on a general page structure, I started fleshing out the parts, starting from the least-dynamic to the most-dynamic content. The only major change in the header was to add a prominent call-to-action for upgrading to a Pro account.

Below the header is where I included all report-related actions such as saving, sharing, naming, editing and re-scanning. These buttons are grouped to the left of the action-/task-bar, while the tour and help buttons are grouped to the right. These are fairly standard positions for such tasks.

c. Cover Letter

A note about the cover letter section of the current report Results: from what I gather, it’s current purpose is to serve as an advertisement for the Pro version of Jobscan. However, in my interviews, both participants reported being confused by the ‘sample’ cover letter section. Since the cover letter comparison is done with job description and not with the résumé, I decided to put a call-to-action button in the action bar, rather than including it in the main content section. In its current position within the résumé report, it is confusing how the report generated insights for a cover letter that the user had not uploaded; or whether it had generated a cover letter for the user.

d. Overview Section

The overview section currently is at the top of the report and takes up most of the screen above the fold. This information is highly useful, however information density is very low. For this reason, I reduced the screen area taken up by this section, mostly by converting the pie chart into a bar chart. Since this section contains a quick synopsis of all the other information in the report, I decided to keep it in the left sidebar, with the option to hide the sidebar and make the main report bigger. You can also jump to different sections of the report from the left sidebar.

e. Articles Section

Since the content in Articles section did not change with each new scan, there was no need to have it in the main report content section. I moved this to the left sidebar, along with the Overview section, where it could be hidden if needed.

f. Main Content Section

Since there were 3 broad types of content in the report (checklist, comparison, job recommendations), I designed a custom layout for each type of content, which can be switched between using a tabbed navigation bar at the top of the frame.

Findings Section

In the current Findings section, the information is fragmented and the definitions are not clear for every metric. In the proposed design, each metric will expand and include an explanation for the metric as well as the results of that metric. In addition, with the extra space, I suggest adding a copy of the user’s résumé where the metrics can be highlighted and examples given.

Comparison Section

In the current Skills section, 3 categories of skills are broken out and each one has a very similar display that shows users the keyword match rate between their résumé and the job description. It also has a second tab (“Highlighted Skills”) that allows users to examine each keyword in more detail. The “Skills Comparison” tab that is shown by default contains a subset of the information shown in the “Highlighted Skills” tab, but does not make good use of the space it takes up.

I combined the two tabs into one view. at the top bar, the user can scroll through the various keywords (which are color coded by type of skill). This bar also shows a mini-chart comparing how many times the keyword/skill is in the résumé and the job description. This information was previously only shown on the “Skills Comparison” tab, but now users can view it in combination with the side-by-side view from the “Highlighted Skills” tab.

Additionally, users can also select multiple keywords to compare at once, in case there are clusters of related skills.

Job Recommendations Section

The current Job Recommendations section has minimal visual hierarchy among the different types of content. This makes it difficult to scan requiring mental effort from the user to parse. There are also no images used, which can be helpful in guiding the user’s eye and creating structure.

Since the main content frame had a lot of space, I was able to add features to the Recommended Jobs section. First, I added a Job Detail section, where users can view the job description from within the report, rather than being redirected to Indeed.com. Within the job detail section, I added the ability to rescan your résumé with the description of that particular job. Users can also now click a link that will take them to the job application, and skills are highlighted in the job description, similar to the skills comparison section.

I also updated the filtering feature for jobs. In the current report, it is not prominent, even though it is a very useful feature. In the proposed design, it appears prominently below the navigation bar.

Wireframes are a great way to get a sense of the basic layout and functionality, but once you start adding in colour and other aspects of visual design, a lot of important design decisions are made. Some are discussed below the banner.

a. Colour Palette

I took a light approach to redesigning the visual elements. Since I did not have any information about the current branding and colour palette (and how relevant it was), I decided to stick with their original color scheme of blue, with orange, green and yellow accents. I added tints and shades of the blue, however, to use as secondary colours in the UI, that were not directly related to the branding. This was because the lighter blue and darker blue evoke more of a professional feeling than the bright blue of the Jobscan logo, and is less jarring to the eye.

b. Contrast

The tints and shades of blue also made it easier to create contrast between different elements on the page. For example, in the current Jobscan Results page, each report section has a white background. And these sections are all placed in a container that has only a slightly-darker-than-white background, which made it difficult for the eye to quickly identify blocks of similar information. I used a darker shade of blue for the container’s background, which added contrast in two dimensions — hue and lightness.

I also use shadows around elements to add depth and again to differentiate between elements. Shadows are more subtle and less distracting than lines or borders that are used in the current design to differentiate between elements.

c. Hierarchy & Consistency

The current design of the Results page uses a large amount of different character styles for different types of text or content. They all vary along many dimensions, such as size, weight, capitalization. More importantly, there is no clear logic or order to how these dimensions are varied to create a character style for a certain type of content. I reduced the number of font weights and relied on font size to differentiate between headings and body text. I ensured that the difference in size was large enough to provide enough contrast. I also eliminated the use of all caps as that reduces readability.

a. Next Steps

Prototyping & testing: Ideally I would have built a clickable prototype at the wireframe/mid-fi stage and tested that, before creating the higher-fidelity mockups. Due to time constraints, I had to skip that. My next step, if I were to continue this project, would be to build a prototype for testing and also work out the functionality of the Comparison section in either an animated prototype or a primitive coded prototype.

b. Research

Internal insights: During the research phase, I found myself asking a lot of questions that the company itself would have the answers to. In the user-centered design process, we often look to the user to gather data, but we can’t forget the stakeholders, either. Especially when redesigning, it is important to understand why certain decisions were made earlier, so as to avoid repeating mistakes or doing double work. This also would have helped me to avoid some assumptions, like what is Jobscan’s main/target user base or why the current colour scheme was chosen.

Quantitative data: For a website like Jobscan, quantitative data would also be a huge asset during the research phase as it would give insights about which parts of the experience to focus on. For example, we could use web traffic data or clickstream data to figure out if and where users are dropping off, and then focus on that part of the flow. Alternatively, if the company was focused on a certain metric (say, time spent on page), quantitative data could help us first identify where users are spending the least or most time.

Rigor: Due to time constraints, the interviews were informal and a lot of questions were not touched upon. If given more time, I would have liked to interview more users and prepared a more structure interview script with tasks to walkthrough.

c. User Flows

Something that is not included in the scope of the redesign of a single/standalone page, but should be, is the larger flow through the website that the page is a part of. The elements and design of the page are affected by what the user was doing before and will be doing after this page. Where the user was before would inform what kind of information to prioritize and show first to the user. The user’s next task or goal, would help inform decisions about which calls-to-action should be made more prominent.

d. Content

One of my stretch goals was to redesign the content to make it more digestible and action-oriented. UX writing is often forgotten, and I think Jobscan would benefit greatly from a content overhaul.

1. Working and making decisions quickly on a deadline. Due the highly condensed timeline of this challenge, I was forced to prioritize which methods I thought would be the most insightful during the research phase. I also did not have a lot of time to try out many radically different designs. This constraint forced me to make decisions quickly and one thing that helped me do that the most was having my design goals or design guidelines set before designing, because this was the rubric I used when facing a dilemma.

2. Honed my visual design skills. Not having a graphic design background, I am sometimes intimidated when it comes to creating higher-fidelity mockups that look “shiny” or “flashy.” With this project, I was able to put my knowledge of typography, hierarchy, contrast, and gestalt to use and it made me realize that instead of being intimidated and avoiding visual design, practicing and doing more of it will help me become better at it.