Savviest
AI-augmented career platform
.png)
​Introduction
​Savviest is a career wrangling and document building platform which helps users find, apply and secure their dream job through various tools consolidated into the Savviest tool kit. Specifically, this project will focus on improving the resume and cover letter building and editing tools.
My Role
I was most involved in primary research, ideation, wire framing, usability testing, and reiteration
​
Duration
5 weeks
​
Tools
Figma
Zoom
Miro
​
The Team
Team of 4 designers working with 2 developers and 1 lead designer.
​
​
​Problem
With the Savviest AI delivering great results, the Savviest team turned their attention to the resume and cover letter building processes. They sought to improve the experience job seekers, so they could harness the power of Savviest’s AI more smoothly in their job-hunting journey.
This makes for a rather broad scope at first glance, giving us one of our main challenges: defining the main issue(s) we were going to solve. The answers lie within the data obtained in our primary research interviews.
​Project goal
Improve and optimize Savviest’s resume and cover letter building process by tuning them to users’ specific needs and goals through research
​Project Scope and Timeline
Design Process
​​
Competitors
Analysis
User Interview
​
​
​
HMW
Brainstorm Solutions​
User Flows
​
​
​
First UI design
Prototype
​
​
​
Usability Test
Redesign
​
​
Competitive Analysis
To kickstart my research, I analyzed three competitor sites to gain a better understanding of building and editing resumes and cover letters, and to determine what existing websites do well (and not so well). After that I created a feature comparison list to have a clearer look.
Strengths
-
Provide more resources to prompt users' writing content
-
Has more personalization for the design aesthetic of cover letter
-
​Allow users to preview before download or send
Weaknesses
Adam Caar
-
​No share button to let users get feedback by them own
-
Provide AI and a variety of career coaching services to improve resume/cover letters
Strengths
-
Provide phrase suggestions for users as a prompt
-
Has a questionnaire to determine the tone, mission and goals of cover letter and resume as a start
Weaknesses
-
Fully write cover letter for the user will cause problems such as a stiff letter or plagiarism
-
lack the resources to improve their writing and career search.
Strengths
-
Easy to fill out forms and produces a variety of letters to choose from with various tonalities.
-
Entire service is free​
Weaknesses
-
More like a building block.
-
Lacks the ability to teach users how to better their cover letters
-
Editing format is hard to use, users must complete the flow in order to see the preview of the letter or resume.
Feature comparison list
Red: features that all two or more of the competitors have worth exploring further.
Key Insights
1.
All three competitors utilize some form of phrase suggesting to help prompt the user’s writing.
2.
Guides and examples could be useful for struggling writers.
3.
Savviest is special for its aid with the entire job search process: finding, tracking, apply and so on.
User Interview
With an understanding of the competitive landscape and Savviest’s position in it, it was time to do some primary research with potential users. I interviewed 5 current job seekers to gain a better understanding of the tools they use to create and improve resumes and cover letters, ask for and receive feedback, and I asked them to go through existing product to determine actionable items regarding the editing capabilities of Savviest. Uncovering additional features, outside of editing, that Savviest’s users might want or need to achieve their goals was a secondary goal.
​
​
Key Insights
To synthesize the qualitative data gathered from user interview, I created an affinity map to identify users' frustrations, needs, and goals.
1
All participants cited their most important tool or resource in the building process are the people who help by providing feedback and actionable steps.
2
4 of 5 participants mentioned that they informed their resumes/cover letters by looking at samples for structure, inspiration and direction.
3
All participants discussed that they specifically improved their documents from feedback relating to power or key words and phrases tweaked to the job description they were applying for.
4
All participants described formatting and editing as components they struggled with or need to work out in creating their resumes and cover letter
Define Problems
Based on the insights we discovered from pilot interview and mini usability test, we crafted four main pain points and come up with four How Might We statements to inspire solutions. Once we established these problems, each of us was assigned one to tackle and brainstorm solutions. I decided to take care of the first HMW problem.
-
How might we motive users to seek feedback so that they can improve their resumes and cover letters?
​
-
How might we improve the visibility of Savviest's various features so that users can effectively build their resumes?
​
-
How might we inspire users to write effectively in their resume and cover letters?
​
-
How might we standardize the editing experience to meet users' needs and expectations?
​User Flows
Solution sketch in hand, my teammates and I collaborated on a user flow to help guide our designs and first wireframes.
Fig.1- The resume builder user flow created by my colleague Fernando and me.
​Crazy 8's Sketches
It's time for brain storming solutions! In this round, I quickly sketch possible solutions to my HMW question, I focused on what the research participants mentioned in their interviews, as well as encouraging users to share their resumes for feedback; in addition, I redesigned the “professional review” feature to be more attractive to prospective users.
As a team, we had different ideas about the position of the navigation bar, and we went through a round of 4-minute sketches before we decided to keep the navigation bar on the left side and add editing tools at the top (last sketch below).
​First UI Design
Our user flows and sketches in hand, we set out to build our wireframes and go all the way to a testable prototype. With time in short supply, we had no more than a week to do so, and decided to each design our own screens in Figma, then pick the strongest design to move on to the next step.
Fig.1- The main dashboard of resume builder, users can edit their document with the help of Savviest score component. User also are able to share their document and ask for feedback.
As for the resume builder/cover letter page, we decided to collaborate together as a team to come up with a cohesive layout:
Fig.1- The resume builder, including the best components taken from each of our individual designs. Although it may seems busy, we chose to keep everything in the prototype to observe users' reactions during the usability tests.
​Prototype
After our tight turnaround on the mid-fi wireframes, we were able to swiftly turn them into a clickable prototype.
​Usability Test
After we finished our mid-fi wireframes and prototype, we created usability test script, and we recruited 10 people to participate in virtual testing using our mid-fi prototype. Our main goal for these usability tests was to uncover any usability issues in regards to our re-designs, as well as discover which features users responded positively to.
90%
of participants expressed confusion with one or more elements of a task process.
After usability test, my colleague Jamie created a full usability test report. Once we identified the most critical issues to fix, each of us was assigned a different issue to tackle. I was responsible for improving Savviest 'share', 'feedback' and 'professional review' these three avenues.
​Redesign
Users were unable to distinguish these three avenues of sharing, receiving feedback and professional review.
01
Savviest original
first draft
final design
Issue:
Most users struggled to describe the difference between our ‘Get Feedback’ and ‘Professional Review’ labeled call to action buttons. Additionally, the ‘Share’ button was explored only from curiosity during our interviews when users explored the other two options when prompted to improve their resume, as the first task.
​
Solution:
-
Consolidate the ‘Get Feedback’ and ‘Share’ function together.
-
Reconsider the professional review call to action button to include an image of a reviewer.
02
Professional review feature is not motivated enough to use.
Savviest original
first draft
final design
Issue:
Many users were hesitant to click on CTAs including the words "Pro" or "Professional", as they understand these to be paid features. This was mainly because there was not enough affordance before the CTA to let them know that the paid features would include, and therefore help them decide whether or not to spring for a pro account.
​
Solution:
​Change professional review into a pop up with name card. Show reviewers' name, title, work company and attach LinkedIn link as references.
03
The commenting/suggesting section is unclear, especially when the side navigation is not collapsed.
Savviest original
first draft
final design
Issue: Users were unsure how to read reviews and collapsed side navigation is not obviously enough.
Solution: ​Consider integrating the existing commenting/suggesting layout that Savviest already employs directly on the builder screen.
04
The checklist in the Savviest score box confuses users.
Savviest original
final design
Issue:
1. Users weren't sure whether the items on the checklist were desired accomplishments or their own accomplishments they need to add
2. Users unsure about how this score was calculated and how it would effect their cover letter.
Solution: ​
1. Replace the checklist with more straightforward suggestions. This meant including spelling, grammar, and word choice in the component box, to more clearly communicate to the user what actions they can take to improve their resume/cover letter score. We also reconsidered the name “Savviest Scanner”, which implied that it had nothing or little to do with the Savviest Score.
2. While our initial user flows focused on “ideal” cases in which users would take advantage of each feature of the job application process in a particular order, our usability tests proved that many users wanted more freedom to jump to different steps along the way. This is why coming up with an empty state (especially one that beckoned users to use the feature,) was important. In turn, this decision was well-received by Devin as something to keep in mind for the developers to work on.
05
There are an abundance of modals and decisions forced upon the user.
Savviest original
first draft
final design
Issue:
One overall complaint from users was the number of modals or overlay windows involved in certain tasks - particularly when downloading a copy of their resume or cover letter. My colleague Kimberly decided to expedite this process by turning this action from a multi-modal process into a simple dropdown menu
Solution:
-
Cover letter team condensed the download process down to a single drop-down menu, rather than the multi-modal journey we had ideated earlier.
-
Once users have downloaded their resume or cover letter, we decided to include the same check mark animation that appears on the website's sign in page on the Download button. And on the right what users will see when they have downloaded their free PDF and Plain Text resume/cover letter per month.
Reflection
From this 2-month internship with Savviest, I gained experience in collaborating with other designers, engineers, and product managers. The biggest takeaway for me is that, when differences in opinion arise in the team, the final decision should be guided by hard data, user needs, and business goals.
​
If I had more time, I would
-
Add a very short introduction video about every reviewer from Savviest's professional review team to give explanations and examples of how the service is a valuable resource to users.
-
Do one more round of usability test and finish high-fidelity prototype based on the final design.