C’REER App

Building a proof of concept to raise seed funding for a mobile app built to match students with careers and universities.

Problem Statement

Business Goal: Raise money from early-stage investors.

My role: UX / Developer

My objective: Design wireframes based on previous scientific research from Vireo Labs, build a working prototype using Bootstrap, and work with CTO to integrate the prototype into React for investor demos.

Project timeline: 4 weeks

Project team: UX, CTO, CMO

Client: Vireo Labs, LLC

Assessment Flow Phase 1: Setting up the assessment foundation

The goal here is to prime the algorithm behind the scenes with the student’s high-level interests.

wireframe design for landing page in a mobile app

Landing, or splash, screen shown while the app loads.

wireframe design for a mobile app

First onboarding screen to set the tone for the assessment.

wireframe layout for a mobile app

Choosing a preferred activity was accomplished by dragging and dropping career statements in order of most to least preferred.

Assessment Flow Phase 2: Gathering information for various career tasks.

The goal for this phase is to introduce high-level imagery or tasks that could be based on several career paths.

Second onboarding screen to prepping students for the career-focused questions.

wireframe design for a mobile app

Ranking tasks from most preferred to least preferred.

wireframe design for a mobile app

Ranking how you like or dislike a task based on a single image.

wireframe design for a mobile app

Ranking how you like or dislike a task based on text based on a task.

wireframe design for a mobile app

Assessment Flow Phase 3: Dialing in the careers using more specific tasks related to potential vocations.

The algorithm now has the foundation in place to present student traits, and further, more specific questions are asked to aid in career suggestions.

The third and final onboarding screen guides students through the last stage of the assessment, adding “neutral” answers into the flow.

wireframe design for a mobile app

Neutral questions based on tasks within a potential career for the student.

Once the assessment is complete, the app shows the loading screen while the algorithm calculates personality traits.

wireframe design for a mobile app

Completed assessment screen showing their

wireframe design for a mobile app

Discovery Flow: Viewing the potential careers and suggested universities to learn the skills for that career.

Now we map potential careers and schools based on the student’s personality traits.

A list of careers based on the vocational assessment results. This list can be scrolled through to find potential careers.

wireframe design for a mobile app

Detailed popup of a selected career.

After selecting a potential career from the list, available schools were displayed to support that career goal.

wireframe design for a mobile app

Detailed popup of a selected university.

The Outcome

PLAY: Screen-recording of the application in production after receiving funding from investors.

Final assessment and discovery flows for production were built after funding was received.

After building the proof of concept, we sent private links for testing with a small group of students and the advisory board. We tasked them with completing an assessment, clicking through careers, and finding a school.  

We were curious to learn…

  1. How accurate was the assessment?

  2. How long did it take to complete the assessment?

  3. What were the pain points encountered?

After incorporating testing feedback into the prototype, the Vireo Labs team presented it to potential investors, and it was an overwhelming success!

Based on investor feedback, we added the ability to create an account, save careers and schools, and chat directly with the university via instant messaging for both iOS and Android stores. The app was free for students, so adding the chat functionality provided revenue from the universities.