Re-designing mobile Cover letter builder

Improving navigation & interaction design




Summary

👉Background: MyPerfect’s cover letter creation tool helps millions of job seekers quickly create a cover letter for a job by answering a few questions about their career situation and desired job. Job seekers come from an array of background like entry level, mid -level and senior across various industries.

⁉Problem: MyPerfect’s cover letter creation tool on mobile had an outdated mobile experience. Users reported it hard to navigate and use the cover letter builder tool on mobile. We also found that the conversion rate was much lower for mobile users.

💡Solution: Re-designed the mobile experience with improved navigation, interactions and letter editor experiences.

📈Impact: Increased registration by 12% and conversion rate by 7% as well as bringing in $350k+ increased revenue in the first year.




My Role

UX/UI designer I was responsible for:

  • Defining the project including identifying usability issues, prioritizing and scoping them with the product manager.
  • Defining solutions through design research, designing prototypes and evaluation.
  • Designing the final designs for dev handoff as per the technical and product constraints.


Process

1.Discovery Research
2.Define Problem
3.Design Exploration
4.Prototyping
5.Evaluation
6.Mockup design

Discovery Research

Analyzed existing research about user feedback on the mobile experience. Conducted heuristic evaluation of the end to end mobile experience along with the product manager.

Key Evaluation Heuristics

  • Visibility of system status
  • User control and freedom
  • Error prevention
  • Flexibility and efficiency of use

Define Problem

Defined the user problems and the design problems across the end to end cover letter creation experience.

Key Problem Areas

  • Product navigation not consistent and complex for smaller mobile viewports
  • Key content and actions lacks hierarchy and often requires scrolling
  • No feedback to user in the stepwise builder process
  • General & vague UX copy and messaging

Design exploration

Giving Feedback to user

On average user spend 3 days and more than 2 web session to complete the cover letter creation process. And one of major products issues was lack of progress feedback to the user.

Users failed to understand where they were in the multistep cover letter creation process.

I explored 3 design concepts to show user's progress and remaining steps in order to guide and motivate them.

Concept 1: Textual indicator.
Explicit textual progress shown however higher cognitive load from reading
Concept 2: Visual-Textual indicator.
Simple and shows progress visually however next steps not known
Concept 3: Detailed indicator.
Shows progress visually with detailed steps information available on progressive disclosure however complex and details not as relevant to user's task completion

Improving interactions for mobile user

Many interactions were clunky and not designed for mobile making it tough for the user to stay focused on the task.

Finding the primary button, irregular font sizes and excessive scrolling were major global issues across the cover letter builder.

Showing selected design changes for skills and login/registration experiences.


Existing Skills UX showing long scroll and limited scanning and comparision for users.
new Skills UX
Sticky primary CTA to add skills appears as user selects skills.
Existing Login & Registration UX showing confusing actions and buttons.
new Login & Registration UX
Concise and clear page & buttons copy as well as updated interactions for sign up, forgot password and registration


Cover letter editor experience on mobile
The feature rich letter editor page was found to be cluttered. One of the biggest issue for a first time user which comprised of the majority of our product users was feature discovery and intutiveness. We found that one of the main reasons was the hierarchy of actions and content on this page.

Existing experience shows multiple areas to initiate an action through different buttons within the hamburger menu, page header, sticky footer.

Explored concepts for simplifying navigation available to user, regrouping similar actions, introducing gestures and re-designing header.

Existing cover letter editor experience


Prototyping

Designed interactive prototypes for different problem areas to evaluate the problem-solution fit. The letter editor experience prototype was used to evaluate the new content and function hierarchy. The stepwise builder experience prototype was used to evaluate the new builder navigation and interactions.

Key Activities

  • Interaction Design
  • Wireframing
  • Interactive prototyping
Letter editor experience prototype
Stepwise builder experience prototype


Evaluation

Conducted stakelholder design reviews to uncover contraints, make design tradeoffs and iterate designs.

We found the generic continue CTA to be less clear in stepwise builder process. Based on the feedback, we updated the copy for CTAs, for eg, Skills page CTA was updated to "Add skills (1, 2, or 3)", previous experience page CTA was updated to " Add experience".

Key Activities

  • Design reviews
  • Cognitive walkthrough


Mockup Designs

Advocating for the user, I help scope the design work for sprint with the Product manager. Worked with the engineers during development by communicating and discussing the UX and UI designs, decisions and design trade-offs.

Key Activities

  • Design Specs
  • Design tradeoffs


How proposed solution solved the problem


1. Progress bar indication & consistent navigation reduced dropoff

  • Simplified the multistep process for the user. Motivated the users to complete the steps more often and quickly by showing completion.
  • Eased navigation by consistently showing the action and skip buttons for each step in the builder with contextual UX copy.
  • We reduced dropoff across many pages which was caused by navigation issues. And saw a 39.3% reduction in time to complete the cover letter builder process.

2. Mobile specific interactions, IA and UI increased completion rates

  • Simplified the experience by re-designing pages to reduce information shown to the user and thereby reducing cognitive load.
  • Introduced responsive UI and buttons on the page that appear based on user actions.
  • Optimized the assests, fonts and information to reduce deep scrolling on various mobile devices.


3. Re-designing content and action hierarchy increased task efficiency

Simplify the experienced within the builder and on the final editor pages and allowed user to focus user on the task at hand. Key design changes were grouping similar actions, hide/show actions based on current priority (primary vs secondary vs tertiary) , re-designing header to show primary actions. We saw an increase in average number of responses and reduction in time spent on each step.


Challenges faced

Tighter timeline

We were working under time constraint to quickly roll out an improved, and industry standard mobile experience.

So ?

  • Planned the process and resource needs upfront.
  • Conducted design and industry research to learn from existing successful patterns.
  • Collaborated quickly with stakelholders on design feedback and tradeoffs.



Userquote from testing saying that Setting up account is enough work ! I don't want to do more than required

Managing scope

Since our goal was to re-design the complete cover letter builder experience, there were many opportunities for improvements based on different points of views.

So ?

  • Took a data driven approach to rigorously prioritize the issues backed by product analytics
  • Worked with product leadership to identify key UX heuritics for mobile experience


Lack of user testing

Due to the tight timeline and resource constraint were unable to user test our solutions and designs.

So ?

  • Defined an AB testing strategy and UX metrics to observe
  • Learned from AB testing and product analytics
.

Userquote from testing saying that I prefer self-guided information but dismissible whereI have the option of clicking and learning or exiting


Positive Results: Direct Impact on Conversion

  • Registration rate increased by 12.2%

  • Conversion increased by 6.6%

  • Overall dropoff in builder funnel and reduced time to convert from 3days to 2 days

  • Increased brand value



What I learned


I was challenged to design the best possible solution within limited time and constraint. I found using a 💻 prototype - evaluate approach to get quick stakeholder feedback useful in absence of user testing.

  1. Mobile design - less is more paradigm

    Although we may be tempted to create a very robust experience for a mobile user, its useful to step back and understand the customer journey of a mobile user, their behaviors on other mobile experiences and additional constraints for mobile devices. I ve found that simplifying mobile design using various design techniques creates a better experience.

  2. Design explorations led to better designs

    On looking at a problem, we are often able to come to a solution however its important to not get stuck to the first idea and explore options. Often thinking broadly about design solutions, combining and iterating them leads to a better solution.

  3. AB testing strategy and UX metrics

    Synthesizing the design solutions into AB testing experiments. Defining metrics and data points to understand user behavior and usability.


TOP