Career Chat:
A career coaching app
The project:
The purpose of the Career Chat responsive web app is to allow professionals to connect with career coaches so that they can receive guidance in making a career transition or in developing their current career path. The app was inspired by observations I’ve made about people in my own life (myself included!) who are trying to figure out what the next steps in their careers are and how to go about achieving their goals.
​
Scroll down to check out the final prototype or click here to view it.
​
My role:
Product Designer
Professionals need guidance!
People who are unhappy or unsatisfied in their current work need a way to access advice on how to transfer their skills and experience to a new career. Speaking with a career coach would provide the guidance these people need to reach their goals.
Check out the Career Chat demo
To take a look at the features of the final Career Chat product, check out the demo video below!
Checking out the competition
When I conducted a competitive analysis, I found that some career coaching websites, like BetterUp, worked mainly with businesses to aid in upward mobility within the company. Other sites, like The Muse, offered career coaching alongside job postings and company reviews.
Both sites served as inspiration for Career Chat, but to differentiate, I wanted Career Chat to focus on helping professionals transitioning careers who needed guidance in their new field.
​
Check out the below Strengths, Weaknesses, Opportunities, & Threats (SWOT) Profiles I compiled during the competitive analysis.
SWOT Profile of BetterUp
SWOT Profile of The Muse
User surveys & interviews
I conducted 12 user surveys through CrowdSignal and 4 user interviews over the phone. I found the process very insightful and learned that many of the participants thought of career coaching as like therapy. The participants wanted coaches to help them find jobs and help keeping a positive mindset when job searching.
Participants wanted coaches that had industry insights and connections that couldn't be found elsewhere (if the job searcher could find the answer on Google, why would they need a coach?). Many participants said they wanted a coach who had suggestions of non-traditional ways to find a job.
Also, participants wanted honest feedback from their coach, but were torn on whether they wanted "tough love" or a more supportive coach. Personality and a feeling of connection were important factors to the participants when trying to find the right career coach.
Affinity Map of user interview responses
How will Leo and Diana use Career Chat?
To decide on the important features of the Career Chat app, I created 3 user flows , 2 for Leo and 1 for Diana. Since Leo is new to career coaching, his flows focused on signing up, learning about the app, and searching for a career coach. Diana has met with a coach before, so her user flow takes her through the process of booking another appointment with her coach.
01
Signing up
As someone new to the Career Chat web app, Leo wants to learn about the app and create a profile so that he doesn’t have to re-enter his information every time he returns to the site.
Leo needs to be able to view onboarding and create a profile so that his information would be saved and easily accessible when he returned to the website.
02
Searching for a coach
As someone new to career coaching, Leo wants to find out what career coaches are available so that he can find a coach who will help him.
​
Leo needs to search for career coaches and save them to his favorites list. Leo needs a way to search for coaches according to his preferences for industry, specialty, experience, etc. so that he can choose the coach that suits him best. He wants to save the coach to his favorites so he won’t have to re-do his search every time he visits the app.
03
Booking an appointment
As someone who has used a career coach previously, Diana wants to schedule another video call with the coach that she spoke with before so that she can figure out her next career steps.
So Diana doesn't encounter any friction when trying to book an appointment with her coach, she needs to be able to easily view her past appointments, click on her previous coach, view their schedule, and book a call.
Early wireframes
After developing the user flows, I began sketching the wireframes. Once I had a design I liked, I created grayscale wireframes in Figma and turned them into a clickable prototype.
Low-fidelity hand sketched wireframes
High-fidelity grey scale wireframes created in Figma
Trying out Career Chat
With the clickable prototype designed in Figma, I created my test script and recruited 6 participants for moderated usability testing of the Career Chat app using Zoom.
Is it usable?
The goal of the usability test was to see whether users like Leo, someone new to career coaching, and Diana, who had worked with a career coach before, can successfully use the Career Chat app to search for and meet with career coaches. Some questions I wanted to answer were:
-
Would participants go through the onboarding pages or skip them?
-
How easy do participants find the profile creation process? Is anything missing from the create a profile page?
-
Can participants easily find the coaches page? Does the coaches page meet expectations? Is anything missing?
-
How do participants go about booking an appointment? Do participants find the process easy? What do participants think about the layout of the appointments page?
Affinity Map of usability testing results
Some aha moments
The usability test gave me a lot of feedback and many ideas for improvements! Below are some of my key findings:
​
-
2 participants felt that there were inconsistencies with the language of the app. For example, the top of the sign up page said “Create an Account” and all of the buttons said “Sign Up.”
-
For example, many participants expressed hesitation at signing up for an app without having more information earlier on. Also, most didn’t want to add a payment method.
-
2 participants did not like that they did not see coaches on their dashboard page.
-
Also, most participants found the $$$ on the coach’s page to be confusing or off-putting.
New and improved screens
Based on the usability testing participants' feedback, I chose to make the following changes:
-
Revised the wording of the onboarding pages
-
Changed create a profile into a four-step process on separate pages
-
Added a search for coaches section on the dashboard
01
Intro & onboarding pages
Some of the participants found the wording of the intro and onboarding pages to be inconsistent or confusing.
Because many participants said that they usually hesitated to sign up for an app, I revised the intro and onboarding to be more impactful with a stronger call to action. Also, I revised the language to be more consistent.
Original intro & onboarding pages
Revised intro & onboarding pages with revised content
02
Create a profile
In the usability tests, there was some confusion about the Create a Profile page. One participant wanted to know if the work experience level referred to her current or her previous career.
Another thought the questions should be more goal-centric and even suggested that the process for creating a profile should be broken down into steps.
I liked the idea of breaking the profile down into steps because it would allow for more questions without seeming overwhelming to users. I made the create a profile page into four steps on four separate pages.
Original create a profile page
Revised create a profile to a 4-page process
03
Dashboard
A couple of participants were confused as to why coaches weren’t the first thing they saw on their Dashboard. Since, career coaching is the main point of the app, I agreed with this call-out.
​
I added a carousel of a few coaches with the option to go to “Search all Coaches” at the top of the Dashboard.
Original
dashboard
Revised dashboard with
search for career coaches
at the top of the page
Developing the visual aesthetic of Career Chat
After making revisions based on usability testing and checking the onboarding language updates through a preference test, I began working on the visual design of the app.
I updated my the app to reflect design principles and the standards of Material Design. I made further iterations on the user interface after a peer review and checking the design against the Web Content Accessibility Guidelines (WCAG).
An example of the revisions made to the app would be the iterations of the calendar page.
After referencing Material Design, I updated the icons, added the heading to the title bar and added color.
To make the page more accessible, the gradient was darkened to have more contrast with the words and icons, the colors in the calendar were given more contrast, and the size of the dates and times was increased for better visibility.
3 iterations of the calendar page: the original wireframe, the Material Design update, and the WCAG revision
The final screens
After usability testing, iterating based on Material Design, accessibility guidelines, and peer reviews were complete, I arrived at the following designs:
Key features
The following are some of the key features of the Career Chat app.
01
Intro & onboarding pages
Users get a quick explanation of the app and its benefits before signing up.
Having more information at the start will encourage users to sign up for the app!
Final iteration of the intro & onboarding pages
02
Create a profile
A quick 4-step process has users fill out background information, their goals for career coaching, and their payment method for appointments.
Thinking about goals will help users clarify their intentions for coaching!
Final iteration of create a profile pages
03
Search for coaches
Users can find coaches on their dashboard page or check out the coaches page. On the coach's detail page, the user can learn more about the coach's services and specializations.
Users will be able to find a coach right away when they use Career Chat!
Final iteration of search for coaches flow
04
Book an appointment
Users can view their past appointments and book a new one starting on the appointment page, by going to the coach's detail page, and ending on the coach's calendar page.
​
Making booking an appointment easy will aid users on their career path and will help Career Chat build its business!
Final iteration of book an appointment flow
The clickable Figma prototype
After all of the research, the testing, the feedback, the learning, and the many iterations, I arrived at the below prototype for the Career Chat responsive web app! Or click here to open it in another screen.
Clickable prototype of the Career Chat app
Final thoughts on working on the Career Chat app
What I enjoyed about this project was that it was personal for me! I am switching careers from fashion to UX design and I have friends who are also making career transitions. Coming up with a solution to make that process feel easier or less intimidating for others was very rewarding!
​
UX is similar to fashion design in that there are research stages, sketching, prototypes, and, in a way, testing. Fashion design does not always keep the end user in mind, though. Removing pockets to bring down the cost of a garment is not my idea of useful!
​
A challenge I had with this project was that I underestimated how long the human aspects of the project would take. The interview and the usability testing phases, definitely took longer than I expected. I found it difficult to coordinate times with the participants. I liked conducting the actual interviews and tests, but I did not enjoy arranging the schedules!
​
What I enjoy about UX design is that there could have been a number of solutions to solve the problem of needing career advice, but, with research and testing, I was able to narrow down the options to what I believed was the best choice. And, with further testing and iterations, the design can continue to evolve to be even more user-friendly!
​
Thank you for checking out Career Chat!
