Design Prep
Role: Team Leader & Prototype Designer
Skills: UX Design, UX Research, Storyboarding, Wireframing, Branding, Prototyping
Timeline: March 2022 - June 2022
Team: Tina Yu, Yu Jin, Juan Castaneda, Michelle Liu, Jonathan Ly, Nicholas Boll
Design Prep
Job interviews are something that everyone, especially young adults, have to go through and sometimes for the first time. Finding a job can be stressful enough but actually going in and doing an interview is another story. From many viewpoints, we learned the fact that there are a number of variables when it comes to participating in an interview, there are difficult questions, unforgiving time constraints, employers, and even just preparing for an interview is accounted for. For first-time job seekers, this can seem like a daunting task, however, it doesn't have to be. There are so many resources online that can help people get better at job interviews, but sometimes it can be overwhelming. Streamlining the process of getting help and practicing for job interviews is something that we notice would benefit all of our stakeholders. We decided to focus on UI/UX job hunting preparation in particular as that is something we all had felt a particularly close connection to as designers. The number of variables in UI/UX interviews can be highly stressful and confusing, causing low levels of confidence and ambiguity in how to prepare for one.
​
The Challenge:
What are ways we are able to increase these feelings of confidence and preparedness to set interviewees up for success? How can we help people better prepare for all aspects of a job interview starting from their first impression, to speech literacy, to the technical behavioral aspects of the interview?
​
​
Problem Statement
How might we help UI/UX students better prepare for interviews so that they can increase their feelings of confidence and reduce feelings of anxiety and imposter syndrome?
User Research
We decided on performing a hybrid of remote and in-person interviews with 11 college students from every grade level or recent graduates. From those interviews, we came together and created an Affinity Diagram.
“I want senior-level professional guidance.”
With our new Affinity Diagram, it became a lot easier to see at a high level what the internal and external struggles our stakeholders had. To truly develop the persona of our stakeholders, we used the Affinity Diagram to create two design models.
Day in the Life Model
Although we did not personally go and interview recruiters, our secondary research on recruiters helped us build the model. We thought that by seeing their side of the job search process, it can give us additional context into what recruiters look for in an ideal job candidate. We’ve already seen time and time again through secondary research and interviews we personally conducted, many different perspectives of someone who is job hunting, building a Day in the Life model for a recruiter brings in a new perspective that we had not considered earlier in our project.
Sequence Model
Listing each step helps us understand the job search process. Also, we include the intents for each type of action to clearly understand why users care about doing each step and could be supported with a target set of functions. In the Job Search Sequence Model, we created 6 main steps to help us identify specific tasks that are done for the job search process. In the end, we can know what the user needs from mock interviews which can help users to feel more prepared for interviews.
Personas
Persona 1: The UXer
Persona 2: Busy Recruiter
Concept Generation
To conceptualize possible solutions, we drew several storyboards, received feedback from stakeholders, and created UI sketches.
Storyboard
UI Sketches
To bring the storyboards to life, I created some quick sketches of what I envisioned when storyboarding.
Trial and Error
To bring our idea to life, we worked together to create two early prototype iterations, starting with low-fidelity, performing user testing, mid-fidelity, and more user testing.
Low-Fidelity Prototype
This prototype has 4 main features: Community, Mentor, Flashcards, and Monthly Challenge.
Feedback:
We performed user testing on our interactive lo-fi prototype.
-
My stakeholder was able to accomplish all of the tasks but throughout the process, I could see that there were some needed improvements. One area of concern was that there are buttons and widgets that may allude to other functions. While my stakeholder did the tasks, at first, they did get confused about other things.
-
Another user expressed concerns that the platform did not feel as much like an interview prep application. It seemed to be more of a UI/UX Design community socializing application.
-
Another user thought the functions we had were useful; however, there was some confusion with the way things were displayed as well as some confusion about how some functions will work that need to be further iterated on.
Mid-Fidelity Prototype
We began our mid-fidelity by going over each feedback we received from our initial user testing one at a time together and making comments on the Figma file directly of things we should keep in mind. By doing so, we eliminated two features, Flashcards, and Monthly Challenge, in order to focus more on our initial goal which is providing users a space to prepare for UI/UX Design job interviews. Furthermore, we realized that we had omitted possibly the most important feature of our platform which are mock interviews! As you will see in the following discussions, our key features are Mock Interviews, Community, and Mentor. This week, we successfully completed our fully interactive mid-fidelity prototype.
Feedback:
We performed user testing on our interactive lo-fi prototype.
-
One of our stakeholders mentioned that they felt that the home page has become too empty and could be utilized more.
-
Some users found it confusing to navigate the mock interview features in the beginning but after exploring the prototype a little more, it became more intuitive.
-
Another user mentioned that the community tab also became difficult to navigate because it contained too much information on a single screen.
-
Users preferred that mentors were given likes rather than ratings. And overall, our stakeholders seemed satisfied with our design and mainly pointed to visual inconsistencies. They stated that the features have become more intentional and useful.
-
Several users pointed out the lack of a login and registration screen.
Style Guide
To begin our final high-fidelity prototype, we created a moodboard using the keywords: confidence, success, job hunt, anxiety, secure, empower, and mentor. With this moodboard, we developed our color theme to create our style guide.
We chose the font SF Pro Rounded for our typography because SF Pro is Apple’s font line which many of our stakeholders are familiar with. The style Rounded helps our platform look friendly and modern. As noted in the previous slide, we settled on our primary and secondary colors based on the colors from the images in our moodboard
Final Prototype
We created the final prototype of Go-Book on Figma. Go-Book has five main user flows:​
-
Log in: log in to Design Prep as either a learner or a mentor
-
Home: access any major feature of the app including upcoming events, popular community posts, and mentor/mentee profiles
-
Mock Interview: Schedule one on one mock interviews with peers or mentors, practice alone, view helpful articles and resources, and look at old mock interview recordings
-
Community: critique and get critiqued on resumes and portfolios, discuss all things UI/UX
-
Mentor: get specialized help from professionals in the field by selecting a mentor and setting up appointments to meet with them regularly
Design Evaluation
We conducted an evaluation test on 6 stakeholders to gauge the efficacy of our design. This is the feedback we got:​
Reflection:
The quarter system timeline is very quick paced so we gathered as much data as we could in the time limit we had. Being able to work hours on end on building Affinity Diagrams and different design models really served its purpose as it helped create what we have now as Design Prep. Ultimately, the goal is to get even better validation testing results and that can be done by spending more time diving back into user research and conducting more iterations of the prototype.