Captivate

content_iterations.jpg

This is a tool that allows users to organize, structure, and prepare for all kinds of interview scenarios.

Initial Project Goals: 

  1. To learn about what steps recent grads take to launch their careers

  2. To create a tool to make the job search less stressful

  3. To consolidate job hunting tasks into one organized, strategic ecosystem

  4. To provide clarity for job seekers about potential job opportunities

Overall UX project goals: 

  1. To understand how each phase of the design process affects the others

  2. To experience the iterative process through multiple rounds of testing

  3. To create solutions that reflect user problems

Type: Brainstation part-time bootcamp case study

Role: User researcher, UX and UI designer

Deliverables: Trends observations, user personas, ideation sketches, information architecture, user flows, mockups, wireframes, style guide

Team: Ailee Taggart and I

Tools: Invision, POP app, Sketch

Timeline: 10 weeks (part-time)


 

Discovery: user interviews: what makes recent grads tick?

  • We conducted 2 rounds of interviews with recent grads comprised of 3 men, and 3 women, ages 21-24, with varying employment statuses

  • First, we asked general questions about their current job, how they found it, and what processes they use to find job opportunities. 

  • We realized the questions were not specific enough, and did not provide any insights that we could draw conclusions from so we adjusted the questions for the 2nd round.

Sample questions

  • What resources or tools do you use in your job search? 

  • What is your most positive/negative job searching experience? Why?

  • How did you prep for interviews?

  • What motivates you about your career?

    I learned that it can be tempting to ask leading questions while conducting interviews. As I asked more questions, I got better at presenting them in a more objective way.


 

Discovery: Analysis of user interviews: Finding trends

After writing down quotes from the interviews on sticky notes, we observed 6 themes: Process, tools, goals & success, pain points, desires, and motivation.

Separating quotes from interviews into 6 different categories

Separating quotes from interviews into 6 different categories

Responses that fell under the “pain points” category

Responses that fell under the “pain points” category

“Tools” quotes

  • “I use google docs to organize any materials with my job search” 

  • “I use school career services”

  • “I attended job fairs at school”

  • “I attended a required college career course”

“Process” Quotes

  • “I try to go direct to employers emails instead of applying”

  • “I try to get face to face interviews, they better than phone interviews”

  • “I prepare for interviews by using the STAR method”

I learned that it’s important to have more specific questions in the interview. We found that many of the trends were vague and difficult to deduce insights from.


Problem statement:

Recent college graduates are motivated about starting their careers, but don’t know the best way to prepare.


 

User personas: Putting a face to the data

Say hello to Danielle and Trevon! After analyzing the data from our user interviews we created these personas to represent our target audience. Both are recent graduates figuring out what career step to take next. They are motivated and excited about building their careers, but get stressed out easily thinking about all the steps.

Screen Shot 2019-10-01 at 11.56.00 PM.png
Screen Shot 2019-10-01 at 11.55.48 PM.png

I learned that at first, it can be hard to create one person to represent a group of people because everyone has unique traits. But the more I referenced the research and trends, I was able to see that people had more in common than I thought.


 

Crazy 8 ideation: The good, the bad, and the ugly

We brainstormed several possible functionality for our app. At first, we wanted the app to be all encompassing for the career journey. For these Crazy 8 iterations, I created ideas about interviewing in particular. I drew different options to present questions in flashcard, lists, and block options.

Brainstorming sprint for an app functionality that helps the user prepare for an interview

Brainstorming how the page layout for displaying company profiles would be to show company profiles

Potential workflow for one of the sprint ideas for an interviewing functionality

I learned about the significance of this step in the UX process so you can see the gamut of possibilities.


 

First iteration of the informational architecture that included 5 stages of the job application process

Information architecture: Laying out the components

Drawing out the page hierarchies allowed us to see how pages would connect and exist in the app. We mapped out all the options including all stages of the application journey like research, networking, applying, interviewing, and negotiating the offer.

I learned that you won’t know the depth of the hierarchy until you draw it all out. It helped us see holes in our functionality.


 

User flows: Step by step

We drew out potential user flows including creating a profile for a new job entry, and setting up the app. My partner and I split up user flows creation so we could make more possibilities.

User flow for setting up the app for the first time

User flow for adding a new job post entry into the app

I learned that there are many small steps that can be easily forgotten unless explicitly written out in a user flow. It makes me think about what steps I’ve taken as a user that are second nature or are in my head as an expectation for all my products.


 

Sketches

Putting our layouts into low-fi sketches allowed us to visualize how the content would interact with each other. For the first round of user testing, my partner drew lo-fi workflows to show a user scheduling an appointment to network with someone within their desired company.

1st round of low-fi sketches showing user flow of scheduling a networking appointment

After feedback from user testing, my partner drew lo-fi workflows to show a user scheduling an appointment to network with someone within their desired company. We decided to change the informational architecture to focus solely on interview preparation.

Round 2 of lo-fi sketches which incorporated feedback from the first round of testing

I learned that until you can see the anticipated layout, you won’t fully understand what buttons you’ll need.


 

User testing with the POP app

For our first round of user testing with the low-fi version, we gave testers the task of setting a reminder to network with someone at a prospective company. 

Feedback from testers: 

  1. The language we used was misleading and confusing to new users.

  2. The flow felt clunky - especially the back, next buttons, and how the design worked as an overlay.

  3. This was the first realization that the app was quite complex, and had a lot of extra steps, ultimately not making the users life easier. 

We still had a tricky time with leading questions. This stage was crucial for the app creation and learning about the UX process because we were able to directly see where our holes in the app were.


 

Embracing the iterative process

We had gone through several rounds of iterations and testing and something was missing from the concept. We had many ideas but they weren't meshing together and the users were continuously failing the tests.

When in doubt, go back to initial research. We reanalyzed our trends and interviews from the beginning of the process to see what we had missed. We realized we had overcomplicated the concept and decided to go back a few steps and think about how our idea connected to the goal of preparing graduates through the job process.


 

Wireframes

We took feedback from the POP testing and created a higher fidelity wireframe in Invision and iterated twice. Consistent feedback from users was that the copy was confusing or misleading, and buttons needed to be enlarged.

Wireframes on Invision

Wireframes on Invision

I learned about how valuable any type of tester feedback was, no matter how short it was. Since we had been working closely with the concept it was easy to overlook certain functionality flaws in the workflow. This step allowed me to step back and observe most objectively at the product.


 

Higher fidelity wire frames

Combining the splash of color and UI design to the functionality allowed us to see the app come to life, and better visualize how components fit together.

Hi-fidelity mockups with UI considerations

Hi-fidelity mockups with UI considerations


 

UI Design ideation

We wanted a clean, modern look for the app since our target audience were comprised of young adults, who are very tech savvy. We kept the layout to consistently have a title, subtitle (when necessary), and only 3 buttons as main functionality options. I made these UI options:

Homescreen UI options

Homescreen UI options

I learned that the UI design can change the overall feeling of the experience because it influences how different content on the screen interacts with each other.


 

Final design and style guide

The final design has a intersections, which serves as a metaphor for the crossroads that recent graduates will experience after graduation during the job process. The layers add texture without crowding the content on the screen.

Finalized UI design for CAPTIVATE

Finalized UI design for CAPTIVATE

The dark green/teal palette symbolizes growth and rejuvenation, which directly reflects the transitional period of our target users. 

The font is sans serif to contribute to the modern feel, and is also easy to read. While the high contrast between white and dark teal, and black text allow for high accessibility for all audiences. 

Screen Shot 2019-10-01 at 10.45.34 PM.png

The logo reflects the intersection of two different phases of life and growth.

The name CAPTIVATE was chosen to echo the motivations of the app. Interviews fixate on storytelling, while candidates aim to “captivate” their audience. We wanted to empower our users to share their stories and make connections with other professionals.

It was important to learn the significance of different colors and how it can influence the product.


 

UI translation across devices

We recognized that no product lives solely on a phone. In order to accommodate different situations and users, we prepared mockups for the app to live in new places including a smart watch and an iPad.

iPhone mockup

iPhone mockup

iPad mockup

iPad mockup


 

Final testing

Our final product combined insight from previous iterations and feedback, the new UI design, and focused on the interview process of the career journey. Check out the final Invision prototype here.

Job+interview.jpg

Finalized information architecture of the app


 

Final features: What can CAPTIVATE do?

CAPTIVATE will help users prepare for 3 kinds of interviews: Job, networking, and informational.

It will generate specific questions tailored to every job someone is applying to.

We offer 4 ways a user can import their job description:

  • From Linkedin

  • Direct link

  • PDF, word docx

  • Paste description

Captivate allows users to prepare for 3 kinds of interview situations

Users can view interview practice questions in a list format, or as flash cards.

They can take record their answers to practice, transcribe, and annotate their responses.

CAPTIVATE allows users to write notes about each question. They could brainstorm ideas or write feedback about their answers.


 

Key takeaways 

  1. Simple functionalities must be created before expanding the app to cover more tasks.

  2. No matter how late in the development stage, it’s important to refer back to initial data and research.

  3. It will take several iterations in order to get a simple function working properly.

  4. Given more time and access to recent grads, we would have conducted deeper interviews to expand our insights.


 

Moving forward: Potential features

  • Post-interview options, so users can indicate which questions they were asked to help other users prepare for certain companies

  • Suggested answers or answer structure for specific questions

  • Feedback system so users can improve their answers

  • Mock interview settings

  • Video recording functionality, so users can see their body language

  • Grow the apps capability to help people prepare for all career goal mapping and long term career steps - not just interview prep

next steps: Development

  • Further user testing and iterating to improve the prototype

  • Continue interviews to learn more about what kinds of questions people are the most interested in or struggle with

  • Find ways to integrate with Linkedin

  • Create ad campaign and brand plan to get it to the market