top of page

Thrivity Website

Help high-schoolers to explore and get prepared for careers that don't need college degree.

cover.png

Overview

As the sole product designer, I oversaw the creation of Thrivity's official website. My responsibilities included conducting research, generating ideas, prototyping, testing, and ultimately launching the site with the assistance of the company's two founders. The website successfully launched on May 1st, 2021.

Role

Product designer

Duration

Jan - May 2021

Team

Together with 2 founders and 1 engineer

Background

Reality check with college

Many people are questioning whether a college degree is truly valuable. With this topic becoming more prevalent in discussions and the media, Thvirity conducted an investigation and the results were surprising.

​

  • 30% is the first-year college dropout rate in the U.S.

  • $32,731 is the average student loan debt in the U.S.

Decision on Thrivity

Recently, we've had informal discussions with working professionals who don't possess a college degree but have promising careers. As a result, we have decided to create a website to showcase their success.

  • Educate people about non-degree careers

  • Provide information and guidance for career success

Market Research

In the career services market, there are numerous providers. We took the initiative to compile a list of these providers and grouped them into four distinct categories. By examining their websites and other available information, we evaluated their business models and website designs. Although each provider has a unique focus, none of them are considered our direct competition.

market research.png

Customer Research

One major challenge for Thrivity is our lack of experience with high-school students. We are curious about their daily lives, including who influences their career choices and what factors are most important to them when considering future careers. To address these questions, we are conducting customer research.

Questionnaire

We have distributed over 100 questionnaires to high school students across the country. The survey consists of 14 questions and should take approximately 10 minutes to complete. The questions cover topics such as their personal information, their thoughts on obtaining a college degree, where they obtain career information, and their expectations for their future careers.

Interview

We conducted interviews with eight individuals who fall into the categories of potential users. Our aim was to gain insight into their expectations for future careers and their impressions of non-degree careers.:​

  • High-schoolers

  • Career practitioners

Customer profile

We have conducted interviews with high school students from various backgrounds and have come to the realization that not all of them fit our business model. After careful consideration, we have decided to focus on only one type of customer in this stage. To better understand this particular customer, we have created a customer profile.

User Persona1.png

Finding 1: big impression gap

After the interview, we found there is a big impression gap between high schoolers and those practitioners. 

questionaire.png

Finding 2: No clear goal for future career

Based on customer research, we discovered that many of our potential users are uncertain about their future goals. However, when asked targeted questions, they are able to provide clear responses. 

goal.png

Finding 3: Clear expectations for career

After conducting the interview, it became clear that there is a significant difference in perception between high school students and professionals in the field.

chart (1).png

Information Architect

Goals

After analyzing the research findings and aligning them with our business objectives, we have established the website's goals.

Educate

Tackle with impression gap

 

Educate people on the promising future of non-degree careers

Explore

Tackle with career confusion

 

Provide people with tools to explore their interests and careers

Prepare

Get ready for future

​

Provide resources and information to help people get ready

Main structure

Once we established the goals for our website, we formed a preliminary notion of the primary sections for it.

Education

Explore

Prepare

Big section.png

Career profile section

During our interview, we discovered that there is a significant gap in understanding between high school students and professionals in this field. It is important for us to bridge this gap and provide accurate and engaging career profiles to help students make informed decisions about their future careers. To ensure the accuracy of our information, we rely on trusted sources such as The Occupational Outlook Handbook and O*NET OnLine, which are both owned by the government.. 

Career profile.png

Information to break misconception

Information related to self-interests

Insights section

After our interview, we discovered that there is a significant difference in perception between high school students and professionals in the field. It's crucial to address this impression gap and find ways to bridge it for better communication and understanding.

Insights.png

Match section

Regarding the Match Section, we have some suggestions for what it could entail:

  • Personality Test

  • Job Quality Test

  •  Career Assessment

Complete sitemap

After discussing which content should be included in each section, we have now assigned individual sections. To provide our users with a seamless educational, explorative, and preparatory journey, we require a simple interactive map to integrate into our website.

Interaction design.png

Prototyping

Once the basic infrastructure was established, I created a low-fidelity prototype to gain a better understanding of the design of each section and how they relate to one another.

Frame 1.png

Testing

In order to ensure that our website fulfills the expectations of our users and to receive feedback, we conducted a test with 15 high school students. I led the test while my two colleagues documented the process.

​

  • Time frame: 45 mins to 1 hour

  • Format

    • Give the prototype to users to freely explore through Google Meet

    • Ask users to speak their mind

    • Ask users certain questions

    • Ask users to rate each page

    • Suggestions and recommendations

​

  • Focused sections

    • Content-wise

      • Career browsing: The filters

      • Insight: Useful information for local careers

      • Career profile: Understandability of income potential, job growth, and education cost parts

    • Function

      • Location: Importance of local career information

      • Compare function: Usefulness and frequency of use

      • Guide: Acceptance of a guide be delivered to E-mail

Test result

We have compiled a summary of the sections that are frequently referenced during the testing process.. 

Test result.png

Reiterating low-fi prototype V2

Based on the analysis, I have created a second version of a low-fidelity prototype to tackle those issues. Some major changes:

  • Guide: Delete the Guide for this version

  • Compare: Make compare a floating icon across the whole site

  • Location: Add location requests across the site

  • Career browsing filters: Add income potential and job growth into filters

Reality Check and Edge Cases

Reality check

It's important to keep in mind that our design is based on an ideal scenario where we have access to all the necessary data. However, since we're sourcing some of our data from government career resources portals such as OOH and ONET, there may be cases where certain data is unavailable to us. To ensure that our design is accurately supported by the available data, we'll need to verify its accuracy through a reality check.. 

Reality check.png

Reiterating low-fi prototype V3

Following a reality check, I made revisions to my design and created a low-fidelity prototype of version 3. This iteration accurately reflects Thrivity's business requirements and incorporates feedback from users. Additionally, all available data supports the changes made in this version..

Branding and UI

Color palette

I use the colors from our logo for the website's color palette to ensure that they complement each other.er..

Color Palette.png

High-fi prototype

In order to try out various color options, I created some sample pages for testing purposes. Ultimately, we settled on using the color green as it is a lively hue that captures the essence of high schoolers, while also being sophisticated enough to represent Thrivity's business.s. 

Frame 2.png

Launch

Development

I gave the engineer the high-fidelity prototype and held multiple development meetings to create the site. During development, I made some adjustments as the original design was either not time-efficient or not technically feasible. Through collaboration, we completed the site development in just one month.. 

Launch

Our MVP version was launched on May 1st, 2021 after a few months of development cycle.

The design: Explore careers

Level 1: Free explore

Home page.png

Provide free exploration experience by inviting customers to search for careers.

Provide one layer of guidance for people to better free explore.

Level 2: Guided explore

career browsing.png

Career browsing:

 

Add important filters to potential customers to provide a more guided exploration experience.

Compare.png

Compare:

​

Allow users to add a few careers to compare their main attributes.

Level 3: Active explore

match questions-1.png
match result.png

Match section:

​

Let users go through 10 test questions. And recommend three careers to users.

The design: Educate careers

Education about different careers

ezgif-1-8bf169337d35.gif

Career profile:

​

Provided detailed information about each career: basic information, career future, pathway, etc. 

Education about local insights

insights.gif

Insights page:

​

Provide primary career data regarding different states, like median income, annual job opening, income growth, popular industry, etc. 

The design: Prepare for careers

Information of career pathway

ezgif-1-8bf169337d35.gif

Career profile:

 

Provide information about related schools, associations, certificates, educational costs, etc. 

Next step: community

Unfortunately, we were unable to incorporate a community function at this time due to time and workload limitations. However, it is crucial to have a community to better equip our potential customers for non-college careers. Here are some community concepts that we have brainstormed: 

​

  • Invite those who are working in the field to be mentors for potential customers. 

  • Have a community of the same career interests.

  • Have a social media section to let customers share their career updates.

bottom of page