.png)
Career Journey: organizing the study information
The efficient system of tracking progress by using the timeline that helps students
to get innovative planning way.
DEC 2022 | PRODUCT MANAGER | UX/UI
The key problem was to create a solution for students' career path visualization. As a result, I developed an app that allows anyone to fill out their career path and career profile and track progress using a designed timeline.
In the process of developing and creating this product, I implemented such types of projects as user research, research reports, sketches, wireframes, user flows, wireflows, user stories, prototypes, user-testing, and the final product.
As a tool, I used Figma at all stages of product development.
Introduction
The modern learning space is oversaturated with a continuous flow of information, therefore, students experience difficulties in organizing study knowledge.
We wanted to solve this problem because it will contribute to the level of increasing information literacy and clear navigation in the flow of information, as well as will help open a stream of revenue for my app in the future.
We set out to create a brand-new app to ensure an efficient system of organizing the study information that helps people to study for their dream job to get it then.
My Role
I led the project and worked on all aspects of the new app, including its visual, UX, and motion design. I also iterated the UX of key pages while my developer husband helped to improve my designs by critiquing them and suggesting better solutions.
Research
Secondary Research
Based on data from the Secondary Research we know that the need to summarize leads students to deeper interactions with information. So, gathering information from many different sources can be a constructive learning exercise. But as with physical exercise, information gathering must be performed properly to achieve the desired effect. Furthermore, the information collected should be presented as clearly as possible.
Therefore, key points in the problem of interaction of students with information are:
-
The learning space is oversaturated with information, so the student may experience great difficulty in finding and organizing information.
-
In order for the students to navigate the continuous flow of information, it must be organized and systematized in the best possible way.
-
Based on the research, the best way to systematize information is to visualize it (infographic, diagram, flowchart, etc.).
Primary Research
User Research
In order to study the needs of potential users, I determined their main criteria and conducted a Design Screening Survey to find our target audience to participate in a User Research Survey, Interview, and Testing.
Main Criteria of Target Audience:
-
age between 18 and 45
-
student currently
-
spend in the Internet more than 4 hours per day
-
education is area that connected to the use of the Internet on a daily basis
After we found our target audiences for user research, we started to design questionnaires to understand the following questions:
-
How do students organize the learning information they need?
-
What stages include the process of organizing needed learning information by a student?
-
What apps do students use to organize information and why?
-
What are the strengths and weaknesses of the favorite applications depending on the preferred way of organizing information?
Empathy Mapping & Personas
The information I received from user interviews allowed me to create 4 Empathy Maps, which in turn helped me to highlight 2 main areas that are important for student users who work with a lot of information.
So, these areas are…
-
Setting Own Unique Space
-
Technical functions
.png)
Then, based on common traits and key problems in the empathy maps, I defined 2 personas: Johann Meyer who is a working student, and Anna Zaec who is a student.
> Johann's key problem was that he struggled to visualize his career path in sufficient detail, based on the purpose of mastering the set of skills needed for his future career.
> Anna's key problem was that she doesn't know which career path to choose. Thus, she wanted to make the right choice of a career path that fits for her in the best way.
.png)
At this stage of research, I found 2 things:
1. Most students want to have visualized information about their path toward the desired career to realize and evaluate at what stage they are now and what specific steps they still have to take to a certain career goal.
2. Apps that help to organize study information and show progress must provide these features:
-
Communication Function
-
Control Function
-
Own Unique Space
-
Saving Time
Updated Persona
Competitive Analysis
The next step for me was to explore essential app features in organizing information. Important features were the design of the visual timeline, as it allows the user to visually track their progress, progress tracker, user profile, and custom settings.
At the same time, I paid attention to heuristics such as friendliness and attractiveness of the interface, clear navigation, since emotional involvement and an exciting experience play a huge role in achieving the user's goals.
Another aspect directly related to the problem of research was:
Users who want to build their career path and get their dream job have a really serious goal. Achieving this goal can be difficult for various reasons, so it is important that the brand personality and attributes provide the solution that contributes to a sense of adventurous spirit, the joy in the process.
Thus, the choice of colors, images, and UI solutions should be immediately connected with the feelings that people experience while working with the app. It was important for us that the character of the brand inspires users to open new horizons and help them to be confident and concentrated on achievements.
So based on the areas that users demand, I compared the functionality of 3 other well-established competitor`s apps that provide creating of tasks path with a timeline. Out of three competitors, Asana scored the highest.
Competitive Analysis
So the next question for me as a researcher was…
… How might we help students to visualize a career path?
Ideation
MVP & User Stories
Using Brainstorming, Affinity mapping, and the User's hat to make a main solution, I wrote the main user stories that served as the basis for the development of the MVP.
.png)
User Stories
The MVP was defined as the following:
-
Signing Up
-
Creating Career Path
-
Creating Career Profile
Sitemapping
Based on MVP provided, I was thinking about the naming of the menu tabs. Keeping the focus on the main tasks of the app, the menu tabs were named Homepage, My Path, Notifications, and Profile.
Once the key app naming was defined, I started to create a detailed Sitemap to serve as guidance to design User flows.
Now the User flows were already obvious:
User flow 1: Signing Up
Scenario 1: first time user wants to register
Scenario 2: existing user wants to sign in
User flow 2: Creating Career Path
Scenario 1: user wants to create a career path and save it
User flow 3: Creating Career Profile
Scenario 1: user wants to complete their career profile and save it
.jpg)
Sketches
So we came to the moment when it became possible to try to connect all the presented data in sketches and see how the solution would look for the user.
Sketching every screen, I was learning a lot of different UI solutions, each time asking myself: “Will this solve or help solve the main task in the current user flow?”
​
Then, when I asked my users to go through tasks in Guerilla Usability Test, they were very interested in the solution. They had a lot of questions about how this or that feature would work. Despite some difficulties in the process (it was not clear to them what a Milestone was; the popping-up notification bothered them filling out a Career Path), all users completed the tasks quite successfully. The main result of this research was that I decided to add onboarding and reassign the values of some fields.
%20(1).png)
Wireframes
Once there was no issue with the sketches, I moved on to the next step - creating wireframes in Figma.
Where possible, I used UI kits to develop high-fidelity wireframes quickly. It was a little complicated for me to develop a form-filling hierarchy, so far as the information hierarchy plays a very important role in creating a career path by user. This problem was solved at the first stage of testing, I will return to it a little later.
Creating brand platform
And now I was faced with an important task: to breathe life into the nascent app and present the brand that is ready to change the lives of people and inspire them to career achievements.
Another goal of creating a brand platform was to articulate the mission of the brand, to formulate its attributes that greatly influenced the color solutions of the app.
Based on the research results, the brand mission was formulated as follows:
“Many people don't work at their dream job. We present a tool that will allow people to walk an exciting path toward the job they have always dreamed of”.
… And the brand attributes were defined!...:
Efficient, trustworthy, familiar, adventurous
Because:
When a product is adventurous, even difficult stages seem exciting and amusing. When a product provides all the necessary features for its effective use, people are convinced that with its help they will be able to achieve the main goal. A sense of trustworthiness and familiarity allows people to use the product regularly and change their lives.
.png)
Colors
.png)
Typography
High Fidelity & Prototyping
Designing Timeline
This part was the most challenging for me because a timeline was the main feature of the app.
​
Designing high-fidelity mock-ups, I've spent quite a bit of time reviewing the design solution of timelines in every resource and app I could find. I tried to define all the important elements of them that could help the goals of my app.
​
-
At first, I made detailed sketches of my timeline and then started to create it in Figma. I was glad when the consistency of the elements was achieved! :)
-
After, I spent quite a bit of time choosing the colors that were most appropriate for the app's color palette, yet neutral enough to be the default here.
-
And then, I made the elements on the timeline clickable so that the user can easily view their content and navigate between all the important task sections.
.png)
Completed Timeline
Product Demo
Testing
I invited students, some of whom I worked at the stage of user research.
Almost all testing sessions were done remotely, however, users shared their screens so I could see their interaction with the app and facial expressions.
Some moments in user research showed me that the user's emotional connection with the app was not always established. So, I was wondering. But the answer was found:
-
This app is meant to be deep using, so in order to experience this dive, users would need to fill out the entire career path from start to finish and be ready to start learning a new career.
-
If this were the case, users would want to review all the information they entered into the app, as an emotional connection began to exist between them and the app.
This was a very interesting discovery for me since only real deep user interaction will allow me to understand the nuances of working with the app and the psychological characteristics of a user.
Some examples of redesigned UI cards:
Theme Card Iterations
Task Card Iterations
Reflection
This project was a challenge for me because the entire development cycle lay with me, and I had to delve into all the details of the development and implementation of it.
One of the difficult tasks was to identify the main user problem. However, when I was working on the Research Synthesis, I was able to highlight some of the most important insights that helped to discover the biggest problem.
Looking back, I am glad that I could learn how to get the most concentrated information important for the project from research methods.
I am infinitely happy that I led this project to the end! Undoubtedly, I plan its further development. See the next subsection for information on the next steps.
To see the final prototype click here
Next Steps
Further development of the app will be designed in accordance with the needs of users and will be largely oriented toward business goals.
It is planned that the app will allow users:
-
Fill out different career paths/career profiles, sections of which can be used to generate a CV
-
Users will be able to apply custom settings, as this will allow us to implement the user's need for the Own Unique Space Function which was one of the important findings.
-
Moreover, we plan to connect the professional community and messaging. This is also the implementation of one of the user`s needs in the Communication Function!
And then we want to create the community to find and get a job…
But that's another story :)
.png)
