top of page
iphones mockups with space for text 2.png

careervise

Careervise is designed to help people make informed career decisions by providing tools and resources to connect with industry professionals. With this app, people can explore different career paths, learn about various industries, and network with professionals who can offer valuable insights and advice.

About this project

Making career decisions can be daunting, especially when you're unsure about what you want to do. Like many others, I graduated from high school feeling lost and uncertain about what direction to take. I tried studying and working in fields that didn't resonate with me, which only added to my frustration and confusion.

As I discovered, this was not a unique experience. Many of my friends were also struggling with similar issues, feeling lost and unsure of what direction to take. That's why I was drawn to this project, which addresses the common challenge of making a career change when you don't know where to start. I wanted to help people who, like myself and many others, may be unsure of their interests and passions

Project type: Capstone case study
Timeline: 10 weeks
My role: End to end UX/UI Designer
Tools: Figma, Illustrator, Canva, Otter.ai.

icons8-figma-240.png
icons8-adobe-illustrator-240.png
icons8-canva-240.png
download.png

Design Approach

In my design approach, I chose to utilize the design thinking process because it offers a systematic and human centered approach to problem solving. By conducting thorough research, clearly defining the problem, generating creative ideas, building prototypes, and continuously refining the design based on feedback, I ensured a comprehensive and iterative approach to address the needs of users effectively.​​

RESEARCH

Problem Space

The struggle to identify passions and interests has become a growing concern for millennials in today's workforce. This challenge often leaves them feeling trapped in their current roles, without the ability to pursue a meaningful career change. My goal is to better understand the experiences and needs of Millennials who are struggling with this problem and to identify potential solutions that can support them in their career exploration and decision-making processes.

Secondary Research

In a recent study, it was found that 40% of people who desire to change careers do not do so due to a lack of clarity, which can prevent millennials from making a meaningful career change. Despite having a desire to change careers, many millennials are unable to do so due to uncertainty about their interests and a lack of understanding about what they want to do. 

Assumptions

Lack self awareness

Millennials that don’t know what their passion is, lack self awareness.

The Multi-Passionate Factor

Millennials that want to change careers have multiple interests and they find it difficult to change careers.

Explore Careers

Millennials that want to change careers don’t know how to explore different career paths.

Job Security

Millennials don't explore other opportunities because of job security in their current career.

Mentor or Role Model

Millennials that don't know what they like, have not talked to a mentor or role model.

Hypothesis

I believe that Millennials who are unsure of their passions and interests face challenges when trying to switch careers. I'll know I'm right if at least 2 out of 3 participants of my user interview express a need for help in identifying their passions and interests to facilitate a career change.

Primary Research

I performed interviews as a research tool to provide me with a unique opportunity to gain direct insights into the pain points, motivations, and behaviors of my target users. This approach enabled me to validate or disprove my assumptions and hypotheses, ultimately improving the accuracy and relevance of my research findings.

Participant Criteria

1. Millennial.
2. Being in the workforce for at least 3 years or more.
3. Have issues identifying passions.
4. Have considered making a career change.

 

interview 1.png

Camila, 26

Financial Analyst

“It frustrates me not to know what I want to do and not to have
a plan to follow.”

Pain Points: Lack of clarity and direction in their career or life path.

Motivations: Desire for mentorship and guidance.

Behavior: Actively seeks answers and insights online about their own strengths and abilities

 

Jessica, 28

Logistics Manager


“Have the opportunity to see professionals doing it, and say, "Okay, I can picture myself doing that."

Pain Points: Fear of making a wrong career decision and the associated investment of time and resources.

Motivations: Opportunity to observe professionals in a particular  role and envision themselves in that same position.

Behavior: Proactive explores careers through reading.

Joe, 31

Administrative Assistant

“I don't know what interest I have. I would love to start studying again. But I don't know what.”
 

Pain Points: Feel a desire to understand themselves better, but they struggle to identify their passions, and interests.

Motivations: Would like to discover strengths, passions, what truly drives them.

Behavior: Conducts job searches, however, sometimes, their mind becomes overwhelmed with thoughts and uncertainties.

Research Insights

​To effectively organize and derive insights from the information I've collected, I utilize an Affinity Map. This method enables me to analyze and synthesize qualitative data by grouping related insights together. The Affinity Map serves as a powerful tool in organizing and making sense of the information, guiding the next steps of the project.

By categorizing and visually mapping the data, I uncovered patterns, themes, and connections that provide valuable insights for decision-making. Through the analysis of the data collected from my interviewees, I identified some themes that emerged:

Career Plan

Having a clear career plan is important for personal growth, but it can also lead to frustration and feelings of failure.

Professionals

Access to professionals and mentors offers valuable insights, allowing Millennials to better understand the realities of the job and make informed career decisions.

Education

Millennials face challenges finding suitable courses or opportunities, however the drive to learn and expand knowledge persists as a powerful motivator.

Self-Awareness

There is a big challenge of self-discovery. But there are strong intentions of finding happiness and purpose in their life.

Uncertainty/Unclear

Millennials struggle to find career passion and direction due to multiple interests and hobbies. This lack of clarity can lead to frustration making it challenging to make a career change.

Tools

There are tools that are being used to identify new interests and passions but there is not a specific tool that has helped decide a new career path

Chosen Theme: Professionals

Interviewees expressed a strong interest in the significance of having access to professionals and mentors in their desired fields. They emphasized the value of receiving valuable insights and guidance, enabling them to gain a deeper understanding of the job's realities and make well-informed decisions regarding their career paths

How might we facilitate access to professionals for millennials, in order to help them identify their true interests and passions, so that they can make informed career decisions?

DEFINE

Persona

By carefully analyzing the interview insights, I created a persona that embodies the key attributes of my target user. This persona serves as a reliable guide to ensure that the design effectively addresses their needs and fulfills their expectations. By incorporating this persona into the design process, I can maintain a user-centric approach and develop a solution that resonates with the target audience.

Meet Emma! an accountant with 4 years of experience at a large corporation. Despite her success, she feels unfulfilled in her current role and wants to explore new career paths. Emma's interest lies in the creative field, yet she struggles to pinpoint her true passions and interests, making it challenging to determine her next career move.

Experience Map

To better understand Emma's journey, pain points, and opportunities for improvement, I created an experience map.

Goal: Identify her true passions and interests so that she can make a meaningful career change.

Frustration: Lack of clarity about her interests and passions which makes it challenging to determinate a career move

Opportunity for Design

With the insights gained from my experience map, I can strategically focus on a specific stage for design intervention. In Emma's case, as she engages in online research and seeks input from other professionals, this stage presents a valuable opportunity to enhance her experience. 

User Stories

To address Emma's needs in seeking opportunities to connect with professionals who can offer her insights into different fields she is curious about before making any significant career change, I have developed a task flow based on the selected epic Connect and Learn from Professionals:

User stories selected:

  • As a Millennial seeking to make a career change, I want to connect with a professional in the field that I’m interested in, so that I can learn from their experience and expertise.

  • As a Millennial seeking to make a career change, I want to be able to see the professional's profile, so that I can determine if I want to schedule a meeting with them.

  • As a Millennial seeking to make a career change, I want to schedule sessions with a professional, so that I can gain insights and guidance before making a career change.

Task Flow

My task flow shows how Emma seeks a professional with expertise in her field of interest, and she will evaluate whether to schedule a personalized session with them based on the professional profile and content:

IDEATE

UI Inspiration Board

I utilized the locations identified in the task flow to gather a variety of visual elements that allowed me to explore different design directions for the app.

Sketches

After creating a UI Inspiration Board, I move on to sketching. I sketch out 3 different variations for each screen, allowing me to generate and explore multiple ideas and concepts. Below are my solution sketches, that I later turned them into wireframes:

PROTOTYPE

Grayscale Wireframes

After creating my sketches and gathering UI inspiration, I transformed them into grayscale wireframes. These wireframes served as the foundation for the first round of user testing, allowing me to gather valuable insights and feedback.

TEST

Usability Testing

To enhance the application's usability, I conducted usability tests with a sample of 10 individuals in 2 different rounds who met the criteria of being millennials and uncertain about their career path. I began by introducing them to the app and then assigned them various tasks to complete.

First Round

Major Issue #1: During user testing, some users expressed confusion with the task #3 about the purpose of the heart icon. The 2 individuals being tested mistakenly identified the heart icon as a means to "like" the post rather than as an option to save the professional profile.

Major Issue #2: When asked to book a session with the professional in task #4, one user wanted to go to the calendar icon instead of the "Book Session" button.

To effectively prioritize the design features or elements that require improvement, I have utilized the design prioritization matrix. Based on the matrix, I have prioritized the issues that need to be addressed:

V1 Matrix

  1. Add the number of years it took for the professional to reach their current level in the experience level bar

  2. Change the horizontal scroll on top matches.

  3. Make sure all the images have the same size.

  4. Have a little message indicating that the profile was successfully added to the favorites list.

  5. Add a calendar icon in the “book session” button.

  6. Have the CTA’s background color darker.

  7. Have the option to tap outside the module to go back.

  8. Remove the heart icon from the post screen.

  9. On the profile screen, the nav bar needs to indicate the user is in the homepage.

  10. Add personalized elements to the app.

Wireframes Version 2

Second Round

Major Issue #1: During user testing on task #1. One user couldn’t complete the tasks as she tried to use the search bar to look for the professional.

Major Issue #2: The other tasks where completed successfully, thanks to the changes made after the user testing round #1.

To effectively prioritize the design features or elements that require improvement, I also have used the design prioritization matrix after this 2nd round of user testings:

  1. Add an option on the home screen to update preferences.

  2. Add an intro to the home page that explains the purpose of each section.

  3. Present the top matches in a list format.

  4. Add years of experience in the top matches section.

  5. Provide an option to discover nearby workshops and events that can be attended in person.

  6. Change the label “Blogs” to "Learn with me"

  7. Include the video duration.

  8. Add a label on the post lists that indicates whether the post is a video, podcast, article or other content type.

  9. Add a tittle on the post screen that clarifies the purpose of related posts.

  10. Have an option to save only the posts.

  11. Change the heart icon.

  12. Highlight the available times in bold.

  13. Change “Local timezone” for “Your local timezone”.

  14. Have an error message when the user taps on a date where the professional is not available.

  15. Add option to see if the professional is available to meet online or in person.

  16. Add an explanatory text to the “Add a question” section.

  17. Include a checklist with predefined options that users can select instead of typing a question.

  18. Add booking to Google calendar or Apple calendar.

  19. Incorporate a less distracting card that can differentiate the categories from the posts.

Wireframes Version 3
 

BRAND & UI DEVELOPMENT

Branding

It's time to focus on brand development. Once the wireframes were ready in grayscale, the next step was to carefully consider important brand elements such as the color palette, typography, and wordmark.

Mood Board

To establish the overall look and feel of the brand I have created a mood board to evoke the desired emotional response and convey the brand's personality and values. By creating a mood board, I can gather inspiration and ideas, establish a cohesive visual direction, and ensure that all design decisions align with the brand's intended tone and message.

First, I created a list of keywords and adjectives that will define the brand's visual identity. I then chose the adjectives and keywords that best capture the essence of the app and the emotional experiences that I want users to have while using it. And finally, to emphasize the significance of my chosen keywords, I organized them into a "More A than B" list:

To create the Mood board, I began by selecting visual elements that embody my selected keywords:

  • Curiosity

  • Inspiration

  • Connectivity

  • New Beginnings

  • Optimism.

Considering my chosen keywords and the intended purpose of the app, I opted for a design that balanced muted and calming elements with a touch of vibrancy to add visual interest.

Color Extraction

Now comes the fun part - adding some colors! Based on my mood board, I extracted several color options and organized them into different tones and vibes to create a few distinct color palettes. By grouping the colors together in this way, I was able to experiment with different combinations and find the right balance of hues that reflect the mood and personality of the app.

I decided to choose the dynamic and expressive color group from my moodboard, I was able to create a color palette that strikes the perfect balance between professional and playful. I think this combination of colors will make the app appealing and inviting to users, while also conveying a sense of reliability and trustworthiness.

For my 60-30-10, I decided to have 1 pop color and 2 neutrals. Since it's a social media app, I want the content to be the focus of attention.

Typography

I decided to choose Manrope, since is a sans serif typography that can convey a sense of simplicity and modernity. It has a cleaner and more minimalistic look.

WordMark & Icon development

To begin the wordmark creation process, I utilized Procreate on my iPad to sketch out various design ideas. As the process continued, I ultimately decided on creating both a wordmark and an icon, each distinct from one another, to represent the app.

Next, I transitioned to Illustrator to further refine my wordmark and icon designs:

  • For the wordmarks, I experimented with various sans-serif fonts and made minor modifications to each letter to achieve the desired look, I also focused on the letter V as I wanted to ensure that it stood out and was visually compelling.

  • As for the icons, I explored options that incorporated the letters C and V, as well as an arrow symbolizing progress and improvement.

Chosen WorkMark

I opted for the ITC Avant Garde Gothic Pro font for the wordmark, as it best captured the modern look and feel I was aiming for. To further refine the design, I rounded the corners of the letters to create a smoother appearance.

To draw attention to the letter "V," I made the decision to use all lowercase letters. This allows the "V" to stand out and become the focal point of the design.

To capture the idea of progress in the icon, I played around with the design of the letter "V" and made one of its lines slightly larger than the other. This small modification adds a dynamic and forward-looking element to the design.

Rounded corners to achieve a smoother and more polished appearance for the wordmark.

Chosen Icon

In order to create a more cohesive and meaningful design, I made the decision to connect the letters "C" and "V" in the icon. This not only creates a visually pleasing composition, but it also ties into the idea of a "curriculum vitae," or a professional resume, which aligns with the purpose of the app.

I incorporated an arrow into the icon design because it can add a sense of direction and movement, reinforcing the idea that the app is a tool for growth and development.

Only added the letter C and V to connect the 2 words, "Careers" and "adVise"

To ensure the versatility and adaptability of the wordmark for various applications, I incorporated both white and black versions of the design. This allows the logo to be used effectively across a variety of backgrounds and mediums, including print and web.

Mobile App Icon

After finalizing the logo and brand colors, I moved on to creating the app icon that would represent the brand in the app store. I explored several options and I chose the one with only the brandmark on a solid background in the primary color of the brand. After reviewing other apps on the app store, I noticed that minimalistic designs are popular and decided to go for a similar approach with the icon.

Color Injection

To inject colors into the design, I experimented with different combinations of my color palette and applied them to various screens to determine the most suitable option. 

I decided to go with a white background and cards with grayscale colors. To add some visual interest, I incorporated my primary color (30%) into the CTAs and some of the icons. Additionally, I made sure to maintain consistency across all screens to ensure a seamless user experience. 

High Fidelity Prototype

UI LIBRARY

Intro to UI library

To help maintain consistency throughout the designs, I established a set of predefined styles and elements that can be easily reused across different screens and projects.

A UI library can save time and effort by providing ready-made components and styles that can easily drop into the designs without having to recreate them from scratch each time.

 

One of the purposes of the UI library is that it can be shared with other designers and developers in the team, ensuring that everyone is on the same page when it comes to design elements and styles. This can also help improve collaboration and reduce errors or inconsistencies in the final product.

Foundation

To start building my design system, I focused on establishing the foundational elements, which include grids, typography, and color. These elements serve as the backbone of my design and help ensure consistency and cohesiveness throughout the app.

Grid

For horizontal spacing, I have chosen to use columns with a 16pt margin. This helps to create consistent spacing and layout throughout the app. Additionally, I use a soft grid of 8pt for vertical spacing, which also helps to ensure consistency in the overall design. I make sure to adhere to the design standards to create a professional and cohesive look for the app.

The app is optimized for the iOS operating system, specifically for the iPhone 14 Pro.

Typography

Choosing the right typography is crucial to ensure that it aligns with the brand identity and resonates with the target audience. After careful consideration, I opted for the Manrope font family, a modern sans-serif typeface. It strikes an optimal balance between form and function, with contemporary typographic features that deliver simplicity, sophistication, and exceptional legibility

Colors

Accessibility

To ensure accessibility for all users, I made sure to meet the requirements established by the Web Content Accessibility Guidelines (WCAG) standards. WCAG guidelines ensure that users with disabilities can access and use digital content with ease, including those with visual, auditory, physical, and cognitive disabilities. By following these guidelines, I aimed to make the app more inclusive and user-friendly for all.

Atomic Design Methodology

The next step in creating the UI Library is to define the atomic design. The atomic design methodology is based on the idea that a design system can be thought of as a hierarchy of building blocks, starting with the smallest and most fundamental elements, or atoms, and progressing up through increasingly complex components, such as molecules, organisms, templates, and pages.

 

Using atomic design methodology helps ensure that each component is consistent in appearance and behavior throughout the app. This, in turn, creates a more cohesive and polished user experience.

Atoms

Atoms are the basic building blocks of a design system. They are the smallest and simplest UI components that can't be broken down into smaller components. My UI library include basic design elements such as buttons, icons, and images.

 

To explore the complete Organisms section of the UI library, please click below:

Molecules

Molecules are important in UI design because they are combinations of atoms that work together to create more complex and functional component and they are also useful for creating a visual hierarchy in the design, by grouping related atoms together into a more meaningful and functional component.

 

To explore the complete Molecules section of the UI library, please click on the button below:

Organisms

After establishing the Atoms and Molecules in the UI Library, I moved on to defining Organisms. Organisms are groups of molecules that form a distinct section or feature of the user interface. By building Organisms, I can create reusable and modular components that can be easily incorporated into different pages or screens of the app.

 

To explore the complete Organisms section of the UI library, please click on the button below:

Templates

One of the final steps in my atomic design process was to establish the templates. Templates are high-level representations of the final pages of the app, which are made up of various organisms and organisms groups

 

To explore the complete Template section of the UI library, please click on the button below:

Pages

Finally, I would like to showcase all the screens that were updated using the UI library to ensure consistency throughout the app. By implementing the established design system, the screens have a cohesive look and feel.

Home Screen

Profile Screen

Learn with me Screen

List of Post Screen

Post 1 Screen

Post 2 Screen

Calendar Screen

Confirm Booking Screen

Session Confirmed Screen

MARKETING WEBSITE

Intro to Marketing 

A marketing website can help me reach a wider audience and attract new users to CareerVise. A well-structured marketing site can effectively amplify app downloads through:

  • Enhanced visibility

  • Prominent display of app features

  • Established trust and credibility

  • Stimulated user engagement.

My goal with the marketing website is to promote CareerVise and encourage potential customers to download it by showcasing its benefits, features, and user testimonials to help users make an informed decision.

Since my user persona is a millennial, the primary demographic to target on the Careervise marketing website are millennials.

UI Inspiration Board

Before diving into the sketching process, I created a UI inspiration board for the marketing website and the mobile version by gathering a variety of visual elements that allowed me to explore different design directions for the website.

Mood Board

When I started creating a mood board specific for the website, I wanted a different mood with dark colors as background, with a more fun, mysterious and expressive tones, however, while I was injecting some colors in the wireframes I did not like the result, that's why I created a 2nd mood board with sophisticated, clean and welcoming tones.

Mood Board 1

Mood Board 2

Sketches

Once I've created a UI Inspiration Board and Mood board, I move onto the sketching stage where I generate three different variations for desktop and mobile, allowing me to experiment with different approaches and refine the design in the process.

Low Fidelity Wireframes

The next step in my design process is to create wireframes based on the solution sketches I've generated for both desktop and mobile.

Desktop

Mobile

Content Flow Diagram

To ensure that my website is responsive on different devices, I used the content flow diagram to plan the layout for both desktop and mobile designs.

Desktop

Mobile

High Fidelity Wireframes

After finishing my mid-fi wireframes, I proceeded to add colors to the design. As mentioned earlier, I relied on my second mood board to guide me through the process because I wanted to achieve a clean and simple tone.

 

I also adopted the same color palette and typography used in my app. To enhance the credibility of the design, I incorporated multiple images with profile pictures, and I focused my attention on the app's features, that's why, I decided to use white mockups with images from the app.

Desktop

Mobile

Peer Critique

Once I had completed my high fidelity wireframes, I shared my prototype with my peers to gather feedback and enhance the quality of my designs.

To effectively identify and prioritize design features or elements that need improvement, I've employed the design prioritization matrix.

  1. Add icons or numbers to each feature.

  2. Delete "Why Careervise?" since is redundant

  3. Change cards on "Testimonials"

  4. Change tittle on "Testimonials".

  5. Add Truspilot on the testimonials section.

  6. Change colors on social media icons.

  7. For mobile version, change images on hero section.

  8. For the mobile version, relocate the text to appear below the images.

  9. Include the number of people that the app has helped.

  10. Add "As feature in" section.

  11. Have the mockups images straight and aligned.

Final High Fidelity Prototype

DESIGNING FOR MULTI PLATFORM

Desktop Version

To have a consistent user experience across different devices and platforms, I have designed the profile page for the desktop version. Since different users prefer different devices and platforms. By designing for desktop platform, I can reach a wider audience and provide access to CareerVise regardless of the device they are using.

Future Thinking

When envisioning the future trajectory of my app, it is crucial to carefully examine the potential consequences that may arise. In an imaginative exploration of this scenario, I have used the "tarot cards of tech" and I have asked myself the following intriguing question:

If my product was used entirely opposite of how it’s intended, what does that look like? People may be using it as a personal social media app instead of a professional one, resulting in the uploading of content that is not related to their professional expertise or industry.

To prevent this from happening, it is important to establish and consistently communicate a clear purpose, highlighting the professional nature of the application.

Key Learnings

This project has taught me some valuable lessons:

  • I have realized the significance of user testing in the development of any project. It is crucial to understand how users interact with the product and to get their feedback in order to make the necessary improvements.

  • I have learned not to get bogged down in perfectionism and overthinking. It is essential to recognize that learning is a process, and not everything needs to be perfect. 

  • I have come to appreciate the importance of storytelling and the reasoning behind all design decisions. Communicating the 'why' behind a design is crucial to ensure that everyone involved in the project understands the thought process behind each decision. This can be challenging, especially for someone like me who finds it difficult to express myself. However, I have realized that with practice and patience, it is possible to improve this skill.

  • I have learned that all ideas are worth considering. Sometimes, the best ideas emerge from a combination of discarded ideas or even mistakes. Therefore, it is important not to dismiss any idea outright, but rather to explore them all and see where they can lead.

Next Steps

  • Enrich the user experience by creating additional task flows for our app. By expanding the range of tasks and workflows available, I can empower users with more options and enhance their overall satisfaction.

  • Create a AI-Driven Career Assessment feature to match individual personalities and interests with the most suitable career paths.

  • Create a product requirement documentation to be able to present and share with a software engineer.

Designing User-Centric Solutions
Let's Connect and Make an Impact

  • LinkedIn
  • LinkedIn
bottom of page