UX Case Study

Ikigai Data

Career guidance and reflection app for Gen-Z students.

Product Design

UX

UI

User Research

  1. Introduction

Crafting the future of Student Networking with Ikigai

Ikigai Data is an EduTech platform with the goal of transforming the career decision making experience for individuals aged 18 to 26. My role as a UX designer centred on crafting an end-to-end user experience for the user profile area, the USP of the app, leveraging the Double Diamond Design process.

  1. Discover

Unveiling User Needs and Service Safari

Personas

The first stage of the Double Diamond process involved in-depth user research, identifying two key personas:

  • Jane: An entrepreneurial first-year university student who was out to make connections and meet like minded people.

  • Tom: A more private individual navigating university applications, who wanted a platform to reflect on their career progress.

From this we identified the desire for flexibility and privacy as key drivers for the redesign.

We also interviewed current student users on the shortcomings and pain points of the existing app. We worked closely with them to build out the user profile section and also asked what other apps they used for career guidance and simply in their every day life.

Competitor Analysis

Based upon the results of our interview we did a service safari on the following platforms:

  • LinkedIn: Research indicated that our students felt intimidated by the humble bragging that proliferated on LinkedIn. So we extracted the essence of networking while avoiding the culture of insincere self-promotion.

  • Polywork: Users loved the innovative Badges idea and embraced the concept of a one-stop-shop for displaying achievements and work, inspiring elements for Ikigai's customisability goals.

  • Otta: Examined for its approach to evaluating skills and career path suitability, contributing to the integration of skill-oriented components in Ikigai's user profile.

  • Snapchat, BeReal, Instagram: Investigated as platforms catering to the Gen-Z audience, shaping the user interface and features to align with the preferences of this demographic.

One of the initial component sketches showing how we were thinking of laying out the components in the profile section, as well as a list of possible components.

  1. Define

Articulating the Challenge

Defined the problem, focusing on creating a unique space for genuine self-expression, networking, and career exploration.

We explored a component system where students could choose profile components allowing for personalisation.

The key to this component idea was that users would not only be able to add or remove them, but also set them to visible or hidden, ensuring them to use the profile for a vehicle of self expression whilen restricting visitors to their profile.

Another idea was to give users the ability to create a close friends list, which would enable a third visibility option.

We brainstormed the first set of components, which we would whittle down based on feasibility.

The first iterations of the components were:

  • Intro: Displays name, username, and photo.

  • Social handles: Links to user's other social media platforms.

  • Skills: Lifted from sign-up data, showcasing hard skills.

  • Personal achievements: A space for users to display achievements with a brief description and a photo.

  • Journal: Enabled users to make entries in the form of images, videos, blurbs or voice notes.

  • About me: A range of questions allowing the user to think deeper about themselves such as "what makes me, me?" and "what is my proudest achievement?".

  • Badges: An emoji and word such as "Arsenal FC" and a football emoji. 100 badges would be pre-populated but users would be able to add their own which could be used to connect.

  • Bio: A chance for the user to introduce themselves in a long form way with either a blurb, image and caption or voice note.

  • Music service integration: Apple Music, Spotify or Soundcloud integration that displays a song or playlist.

  • Friends: A list of friends and close friends.

  • Groups: To showcase WhatsApp or Facebook groups that the user participates in.

  • In app chatting: Enabling directly networking with other users.

Wireframes of first ideations for some of the various components.

A light grey background shows how the components would appear on the profile. Dark grey is when the component is expanded and white shows the component settings or set up.

  1. Develop

Prototyping and Iterative Refinement

We worked closely with the engineers to ensure feasibility and adaptability of the design system. We also conducted extensive user testing to validate the user profile components, ensuring resonance with the target audience.

Incorporating user feedback, we refined the user profile area continuously. At this point we came across a pain point with the number components we designed being too much for the scope of work and we would not get the MVP out in time. So we cut down on the following:

  • About me: Changed to feature only 3 defined questions.

  • Badges: Reserved for future iterations as it required considerable development work that was out of scope for the MVP.

  • Bio: Omitted due to similarity to the Journal and About Me sections.

  • Friends: Also reserved for future iterations as how friends would be used in the app was still being discussed. Therefore close friends were also omitted.

  • Groups, In app chatting, Music service: Omitted due to time to develop estimates from the engineering team.

We then prototyped the MVP, incorporating selected components to create a harmonious user experience.

Wireframes for how the components would sit in the profile and the editing screen.

Yes - I use Tintin references for all my wireframes, much more interesting than Lorem Ipsum…

  1. Deliver

MVP Implementation and Reflection

Outcomes

Launched the MVP with Intro, Social Handles, Skills, Personal Achievements, Journal, and About Me components as well as the architecture of removing, adding and editing all the components into hi-fi, non dynamic mock ups.

Successfully navigated the Double Diamond Design Process, demonstrating a comprehensive understanding of user needs and industry dynamics.

Collaborated closely with engineers, ensuring feasibility and adaptability of the design system.

Delivered an MVP that prioritises customisability, self-expression, and user engagement.

Challenges and Learnings

During the research phase, we got too excited about all the components that potential users would like, this took our project way out of scope and therefore required considerable cut backs.

This was positive though as it allowed for further iterations in the future and was great for us to brainstorm where we could take the app.

We also had to coordinate with the engineers who were based in a different timezone which cut down the amount of time we could communicate with them around design systems and the architecture of the existing app.

Next time, we will build out a better asynchonous system with our collaborators.

Success Metrics

The components feature was our biggest success as it allowed the users for customisation and identity expression.

We had positive user feedback, engagement metrics, and iterative enhancements validate the success of the redesigned user profile.

Students liked the idea of being able to network with new university students as well as having a place for private reflection.

Future Considerations

We were also going to design a web app, but this would be explored in a future iteration as we estimated that 70% of our traffic would come from mobile, and a higher percent from new users.

We incorporated user feedback to refine the user profile area continuously and acknowledged the potential of excluded components for future feature enhancements, aligning with user needs.

Continuous monitoring of industry trends and user feedback to adapt the platform for evolving needs.

The final mockups of the first iteration showing a populated profile, the personal achievement section and the edit profile section where users can add and remove components.

For further images of the completed app, detailed wireframes, sketches and Figma files please get in contact.

For further images of the completed app, detailed wireframes, sketches and Figma files please get in contact.

© 2024 LSO Design