Career Switch App
An educational application that provides a way to help adults transition into a new career through personalized search results based on a user’s education, skills or results from Career Switch’s career quiz.
Product Designer
Role:
Individual
Team:
3 weeks (Oct 2023)
Timeline:
Figma
Tools:
Google’s UX Design Certificate Program Personal Project 3.
SquarePlanet’s UI in Mobile Design: Course 1 - The Complete Guide.
SquarePlanet’s UI in Mobile Design: Course 2 - Going High Fidelity.
Project For:
Project Overview
•
This was my third and final project for the Google UX Design Certificate Program. The topic for this project was creating something for “social good,” and the prompt I received for this project was "Design a way to help adults learn about careers for transitioning into a new career." I researched my prompt and set my goal based on what I discovered.
Since the Google program focused mainly on UX design, I also took this opportunity to combine this project with SquarePlanet’s UI Design Video Courses (UI in Mobile Design: Course 1 - The Complete Guide & Course 2 - Going High Fidelity). These courses had projects that involved designing a mobile app following the best UI design practices. So I combined these courses to utilize both good UX and UI practices when creating this project.
My goal was to design a dedicated mobile application that would help users transition to a new career by providing career recommendations based on a user’s education and skills as well as providing information and resources on those careers. A user would be able to save and keep track of any career and also take a “career quiz” if they wanted to explore careers outside of their education and current skills.
Understanding the User
•
An opportunity was revealed
According to GoRemotely, 70% of the workforce in the United States actively looked for a career change in 2022. While researching this topic, I discovered that (at the time of this project) most applications that provide dedicated career information services only have websites (desktop and mobile) and most lack a dedicated mobile app.
When searching on the Apple App Store, I was only able to find one career information-based app.
Career information services:
CareerExplorer
Has both desktop and mobile websites but no mobile app.
CareerOneStop
Has both desktop and mobile websites but no mobile app.
CareerInfo
Mobile app only.
So what’s the problem?
According to eMarketer, “smartphone users spent about 4 hours on the internet per day in 2020. While 88% of that time is spent using apps, vs [mobile] websites.”
Image via LinkedIn • Source eMarketer
Data.ai also reports similar findings, where the “US has reached a new high of 4.2 hours” for mobile app usage.
Image and Source via Data.ai
My thoughts
Due to this increase in smartphone use, how people are actively looking to change careers, and the lack of a dedicated mobile app for career information services there is a great opportunity to provide users with a more convenient way to search for different careers.
But why make a native mobile app?
There are 3 main reasons why a native mobile app would be beneficial for this project:
1. Convenience
Users would be able to use the app on the go. They wouldn’t have to remember a website’s URL address, and they can have all their saved information and saved careers on the app to quickly and easily resume researching careers.
2. Better UX
Mobile websites can be clunky at times, and a service that offers search functionality where a user can go from search result to search result could have its experience harmed by that clunkiness.
3. More features
Using a native mobile app would allow users to have notifications to remind them about things such as sign-up deadlines. It will enable them to use other features more conveniently, like a save feature. Users could quickly open the app, click a button on the navigation bar, and see all their saved careers.
Users could run into that clunkiness with a mobile website and might find themselves logged out, making the whole process more frustrating and time-consuming.
Time for some user research
Most of my user research involved interviewing potential users about features they would like in an app that helps with career transitioning, along with performing a competitive analysis to see if any competitors had features that the users I interviewed wanted and how well they implemented said features.
Interviews
I interviewed users to get an idea of if and how they would look for career information, what features they would like to have in this type of app, and what the app should focus on more, allowing users to search for careers based on education and skill, with a career quiz or a balanced blend of both. I ended up interviewing six people* and each interview lasted less than 15 minutes.
*Admittedly, due to this being a personal project and not having many resources, there are ways I could have improved this method, but it worked for what I needed. See more about this in the Takeaways section.
The questions I asked were:
Have you recently looked into transitioning into a new career?
If so, how would you go about finding information on different careers?
Did you use any career information services while searching?
If they did use a service - What features did you like about that service?
What type of features would you want in a mobile app that helped people transition into new careers?
What should an app like this focus on, helping users find careers related to their education and skills or through a quiz that allows them to find careers based on the answers?
Interview findings
Convenience and having good search functionality were the main factors found.
Every interviewee expressed how if they were to use a mobile app to find careers, they would want it to have features related to convenience as the main priority for the app. Having a save feature for both career search results and the user’s information, as well as being able to receive notifications, were features mentioned by all interviewees. Also noted was how the app’s search functionality should have a good balance of searching using a user’s education, skills, or quiz results.
Competitive Analysis
I performed a competitive analysis of the services that I mentioned earlier to see what features they implemented, how well they implemented them and how those features compared to the interview findings.
I categorized these findings into three categories: focus, convenience and features.
CareerExplorer
No native mobile app.
Saves user info only obtained from career test (i.e. you have to take the test for full functionality).
Save feature.
Has a career search that can be based on degree and more.
“Career Test” focused.
CareerOneStop
No native mobile app.
Doesn’t have any actual guidance to help users (making it easy to get lost and overwhelmed).
Interests and skill assessment and job search focused.
Save feature.
Has a career search but search functionality and filtering is limited.
Save feature.
Has a career search but can’t search based on degrees or skills.
Not personalized.
Has a general filter system.
CareerInfo
Manual search focused with filters.
Competitive analysis findings
Most personalization was from the results of tests and assessments. The more feature-complete services didn’t offer native mobile apps.
The more feature-complete services are very focused on users taking their tests or assessments for the user to use the full functionality of their service. One service allowed users to search based on degree without having to take their test but wouldn’t save those search filters. All the services had search-saving features. The services that allowed saving and were more personalized didn't have native mobile apps, and their mobile websites weren't as easy to use as their desktop websites.
The pain points have been discovered
Through my research, I discovered two main pain points users could experience while looking for career information to transition into a new career.
Convenience
1
Not having a dedicated native mobile app removes convenience from users by having the clunkiness of mobile websites, being unable to pull their profile up along with their saved content on the go as easily, having to log in more often, and not having push notifications.
Personalization options
2
Most career information websites require some sort of test or assessment to have personalized search results saved to refer back to in the future instead of allowing users to search by entering and saving their education and skills
Who am I designing for?
With the user research done and pain points discovered, I created two personas to provide a clear visualization of the users and always remind me who I was designing for.
Persona 1: Lily Adams is a user who would benefit from a mobile app that provides personalization and convenience features to research on the go.
Persona 2: Jeffrey Clint is a user who needs the convenience features in the mobile app to stay more organized and on top of things.
Tip: Click on images for a full-screen view.
Starting the Design
•
Starting with some paper wireframes
With all the initial user research complete, I performed some ideation exercises to spark ideas for how the app's user flow could work out. I did a "crazy eight" exercise to quickly create an essential foundation for the user flow. I like this exercise because it forces me not to spend too much time making the "perfect" user flow right from the start, which can be a huge waste of time.
Afterward, I created paper wireframes for each part of the user flow created during the "crazy eight" exercise. I ensured I included the features related to personalization and convenience that would be most useful to users.
Now let’s make them digital
Once settling on the refined paper wireframes, I converted them into digital wireframes.
For the homepage’s design, I focused on search, saving, and reminding features. Since this is a mobile app for users to use on the go, I created the feed so users could see everything from reminders, saved careers, and “continue reading” prompts for users to resume research quickly. I also ensured the search button was right at the top of the frame for quick and easy access.
For the search page’s design, I created options for users to either search manually for careers or search using their education, skills, or results from the career test.
Tip: Click on images for a full-screen view.
Homepage
Search Page
Now for the rest of the user flow
For the rest of the user flow, I focused on the app’s personalization for how a user would put in their information, how the quiz would be taken and the results given as well as what type of information about the careers would be provided to the users.
For the convenience aspects, I focused on the overall flow of the app and how the user could easily and quickly navigate through the app.
Tip: Click on images for a full-screen view.
Receiving feedback through user testing
I created a low-fidelity prototype that included the sign-up process and the flow that allowed users to search for careers and take the career quiz.
To better understand how the app flowed and how the features functioned, I asked 4 participants to navigate through the prototype without any guidance, only giving them simple prompts such as “sign up for an account and take the career quiz.”
After performing the usability test, I asked the participants the following:
Was the app’s navigation intuitive?
Were there any features or information not included that they would have found useful?
Did any of the features not function as expected?
How was the experience overall?
The Feedback
What worked
The features were received well.
Participants felt the overall process and idea worked well.
What needed improvement
Participants wanted more detailed information on the quiz results and careers. Participants wanted to learn why the quiz results led to the matches they received and have more details on the careers, such as degrees needed and salaries.
The information displayed seemed cluttered. Element’s spacing and button sizes were also an issue.
Some participants noted the need to improve the wording in some spots. Participants thought the word “deadlines” felt confusing and a bit too aggressive."
Refining the Design
•
Let’s give it some style
Before refining the wireframes into mockups based on user feedback, I settled on a branding style for the app.
For the colors, I wanted to use a few different colors but in a subtle way. With educational software or applications, having a bit more color than usual can be helpful to make a product seem more friendly and playful to help with not boring users as they learn.
Creating mockups based on feedback
More Information:
Based on feedback from user testing, I learned that users wanted more detailed information regarding the quiz results and careers.
To address this, I added the quiz results and explained each one. For the careers, I expanded on the information already presented and added salary and degree information sections.
Here is a before and after comparison:
Tip: Click on images for a full-screen view.
Cleaning up the clutter:
Some users felt sections of the app, such as the feed, were too cluttered with elements. Having features like reminders, continued reading, and career recommendations all in one list causes everything to blend and be overwhelming.
To remedy this, I gave everything its own section that is horizontally scrolled so users can review each section on its own to reduce the clutter and feeling overwhelmed.
Here is a before and after comparison:
Let’s change the name:
There was some confusion with using the word "deadline" as a reference to remind users to sign up for an online course. A few users also found the word a bit aggressive.
I changed "deadline" to "reminders" because it's not that aggressive of a word, and this section is also here to remind users, so it makes more sense to call it "Reminders" instead.
Here is a before and after comparison:
Testing the changes with users
As I’ve shown, I refined the app’s design based on the user feedback from the usability testing. While I’ve shown examples of the before and after changes made as a direct response to feedback, I also took that feedback and applied it to every part of the app, especially the clutter and more information complaints. I did this to create a very consistent look and flow throughout the app.
Because of this, I wanted to ensure this new design worked well with users, so I performed another usability test with the participants I tested before. I executed the test the same way as the original test but with the new designs, and participants were asked questions similar to the last test afterward.
Final Feedback
What worked
Participants found the new design more appealing and easier to navigate through.
Participants felt more informed than they did in the previous design.
What needed improvement
Participants found some buttons too small on their mobile devices.
Interacting with the high-fidelity prototype
With the final testing completed, I addressed the feedback regarding the button sizes and finalized my design. I created a prototype for the different processes of the user flow. These include:
Creating an account (including entering information on education and skills).
Searching for a career based on education and saving it (the process for searching based on skills is the same, just a different button).
Taking a Career Quiz.
Creating an Account
The account creation process allows users to enter not only their basic info but also their information related to their education quickly and easily.
Searching for a Career
Users can search for careers manually or search using education, skills, or quiz results filters.
Taking the Career Quiz
Suppose users want to find careers based on something other than their education or skills. In that case, they can take a career quiz that asks different questions about their interests and personality and find careers based on the results.
Interact with the full prototype
Developer handoff
In the SquarePlanet courses, I learned how to present my designs to developers. While this work is a personal project, I want to get more experience presenting my designs to developers like it was an actual project because my designs are optically aligned and not aligned by bounding boxes. Here is an example of how I would present the homepage.
Responsive Design
•
An official desktop website
Throughout this case study, I've talked about the mobile app market and how this project will fill a gap in the market by having a dedicated mobile app. That being said, there should still also be a desktop website for users to use if they would like to search for careers on their computers.
Here is an example of the responsive design mockups for both the homepage and search page:
Takeaways & Refections
•
Impact
Since this is a personal project, I couldn't show any real-life metrics regarding the design's impact. However, if this were an actual project, my designs' most significant impact would be filling a gap in the mobile app market since there are only a few dedicated mobile apps for this type of career transitioning/informational idea.
With my courses, I received 100% on all of the deliverables that I had to submit for the Google UX Design Certificate Program.
What I learned
"This project continued to increase my research and design skills. While the concept of the app is familiar, through research, I found an opportunity by learning there weren't any mobile apps dedicated to career transitioning, thus solving this issue. That's why this project was beneficial to me as a UX designer. Instead of just making another website with this concept and calling it a day, I learned to step back and see what issues I could find.
Since I combined three courses for the project, I could also apply what I have learned regarding UI design, further improving my design skills by utilizing design styles, the red box method, designing for developers, etc.
What could use improving
Because this is a personal project, I didn’t have as many resources for this project. Ultimately, I would have liked to improve my research, more specifically, the types of participants I interviewed. I feel I would have benefited from having a more diverse group of participants going through an actual career transition at different stages of transition. While I got good research and appreciated the friends and family I interviewed, having an even more diverse group would provide more insight on this topic.
Some other things I would have liked to improve on would be the career quiz. If I had access to a database of career-related questions about finding a career, I could have enhanced the career quiz (maybe even made it a proper test) by fleshing it out more with more questions and a more detailed results page.
Some images & stickers used throughout the app’s designs are copyright-free elements from Flaticon. Credit and a big thank you to the creators:
- PhatPlus
- Kerismaker
Thank You!
See More
