Job at a Startup👩🏻‍💻

Transforming the InterviewBuddy Website to Mobile App to Drive Sales

Designing the 'InterviewBuddy' native mobile app based on the current desktop website version

Edtech

Full-Time

2023

UX Designer

5 Months

My Contribution

Conducted in-depth research to gather insights

Shaped strategy and problem-solving approaches

Designed wireframes and high-fidelity prototypes

Facilitated and analyzed user testing sessions

Timeline

5 months

Role

UX Designer

Team

Me and 1 other Designer, Lead Design Mentor, Product Manager, Engineering Manager, 2 developers

What is InterviewBuddy?

IB is a platform that allows students to prepare for real-life interviews across multiple professional domains.

IB developed a basic version of the website, known as Version 1.0, which served as our minimum viable product (MVP).

The problem was the overwhelming amount of information without a clear hierarchy, and the product's inability to cater to mobile users.

Understanding the current status of the product

Why did the beta-launch fail?

The product was beta-launched for a brief period using the current desktop version but was not well-received due to two primary reasons.

Limited Mobile Accessibility

The product initially prioritized a desktop version, which did not fully align with the needs of many users, especially students. These users often preferred mobile access due to limited availability of laptops or the convenience of using their phones.

Inefficient User Experience

The product delivered a cluttered and inefficient user experience, with interfaces overloaded with information and lacking a clear content or feature hierarchy. This made navigation and usability challenging, especially when compared to other platforms that offered more streamlined and user-friendly experiences.

We realized it was time to step back and reflect.

Explorative research

Exploration aimed at understanding the pain points.

I conducted and moderated nine interviews with three admins, three B2C candidates, and three interviewers.

Admin

"I wish there were an easier way to manage all this data; the navigation is quite difficult."

Candidate

"As a student, I often don’t have my laptop with me, and I prefer working with a mobile interface."

Interviewer

"The interface contains a lot of information, making it very difficult to grasp data, especially when I'm switching between calls quickly. This should be easier."

Forming Consensus and Strategy

After analyzing the problems being faced by users, we decided to design a new 2.0 version tailored for mobile users, incorporating thorough research and ensuring alignment with existing functionality and features.

Constraints

Constraints we had to keep in mind before approaching the process

Budget

Resources

Time

Feedback

Which gave us the realization that

We may have to use our existing resources and interface to build a product which made us arrive at a concept called.

RETROSPECTIVE RESEARCH

which is evaluating the current state of the product and building off of it.

Retrospective Research

SWOT & UX Analysis

✅ Most competitors have a clean interface with clearly defined flows, and they have already gained user trust.

❎ They do not account for the different levels of interviews for candidates at various stages of their careers.

Heuristic Evaluation

We analyzed the current state of over 100 screens to evaluate their adherence to basic heuristic principles and fundamental UX laws. This analysis provided valuable insights into what is working well and areas for improvement. Additionally, this activity allowed me to gain a comprehensive understanding of the interface and its features. Let’s delve into the results by examining a few specific screens.

After thoroughly documenting areas for improvement and ensuring that repetitive issues are avoided during the transition from web to mobile, we decided to adopt a mobile-first design approach.

Mobile-First Design

We then mapped out to understand how we could approach the redesign in a mobile-first approach by clearly understanding what needs to be corected and the hierarchy

Content Inventory

We created a content inventory with all the information from the current website version.

Prioritizing Content

As we had to work with smaller real estate pixels we had to make sure we prioritized the content we'd be placing. This involved various discussions with stakeholders and within the teams.

Identifying A Visual Hierarchy

Once we have sorted out your content, it was time to craft a visual hierarchy to guide us along your design process

Identifying Navigational Items

We clearly mapped out all the essential points users need to get to and mapped them out to be in our navigation.

Consolidation

Bringing everything together

The initial designs

Rough wireframes to map out layouts

We sketched out rough layouts and information structures to identify emerging design patterns and ensure effective content organization.

Mid-Fidelity designs to be used for testing

We refined the initial wireframes into higher-fidelity designs, focusing on functionality rather than aesthetics, to ensure effective usability testing.