Technology & Tools

Midjournery

Figma

Google Labs

Google Forms

Kling 3.0

The Approach

What I did

Market Research

Competitive Analysis

User Survey

User Flow

Wireframes

Prototype

High-fidelity UI

Accessibility evaluation

Existing Research

The problem

The Hypothesis

Competitive Analysis

I analysed 3 most popular platforms in the field - looking both at the user experience and negative app store comments to find patterns

Problems from the comments

Working with Lucas was an absolute pleasure. He took our vision and turned it into stunning visuals

woman wearing black crew-neck shirt

RENEE TAKADA

INFRAME, Creative Director

Working with Lucas was an absolute pleasure. He took our vision and turned it into stunning visuals

man standing near white wall

RENEE TAKADA

INFRAME, Creative Director

Working with Lucas was an absolute pleasure. He took our vision and turned it into stunning visuals

man in black crew neck shirt

RENEE TAKADA

INFRAME, Creative Director

User Survey

I started with the hypothesis that creating app that users can view information of the miniature would help enhance experience and engagement. To test my hypothesis, I interviewed miniature visitors to understand their preferrences.

What’s the most important factor you take into account when visiting a miniature exhibit?

23

80%

Career Assessment Accuracy

Generic quizzes, little real clarity

High school students often lack a clear picture of their own strengths and interests, and the generic quizzes most tools offer don't close that gap. 80% say these assessments gave them little to no real clarity on what path might suit them.

75%

Personalized Pathways

One-time results that never adapt

Most career platforms, service or assesment give a one-time result and never adapt as a student's interests change or deepen. 75% say the guidance they received felt static and didn't evolve with them.

60%

Real-World Industry Insight

Little exposure to the actual day-to-day

Students rarely get an honest look at what a job actually involves day-to-day, beyond a title and a salary range. 60% say they had little to no real exposure to what the work is actually like before committing to a path.

34%

Mentor/Counselor Support

Mostly left to figure it out alone

Most students are left to figure out their career path largely on their own, with little access to real human guidance. Only 34% felt they had meaningful mentor or counselor support when it mattered most.

Notable Comments

Working with Lucas was an absolute pleasure. He took our vision and turned it into stunning visuals

closeup photography of woman smiling

RENEE TAKADA

INFRAME, Creative Director

Working with Lucas was an absolute pleasure. He took our vision and turned it into stunning visuals

woman in white crew neck shirt smiling

RENEE TAKADA

INFRAME, Creative Director

Working with Lucas was an absolute pleasure. He took our vision and turned it into stunning visuals

men's gray crew-neck shirt

RENEE TAKADA

INFRAME, Creative Director

Initial research shows

The MVP app features an interactive audio guide that provides location-based ambient sounds and a "Behind the Build" section showcasing technical craftsmanship and construction materials. It also includes a side-by-side gallery for real-world architectural comparisons and customizable filters that allow users to select specific information categories based on their interests.

User Flow

To out line all the necessary functionality I created a simple flow diagram of the main tasks users can do. One of the flows is shown below.

Main Client Flow

Low-fidelity Wireframes

Once the flow is established , I stared creating the low-fidelity wireframes of the main flow.

High-fidelity UI Design

Once the initial flow was complete. I started by creating a couple of the main screens of the app. I started by defining the fonts and colors

Color palette

Accent, primary, secondary, background

Main CTA button color

Font

Plus Jakarta Sans

AaBbCcDdFfGgHh

High-fidelity walkthrough of the Career Guide app showing onboarding quiz, TikTok-style Real-Day career feed, 5-Minute Test Drive simulation, and Coffee Chat messaging.

Figma File

A snapshot of my Figma file.

The Tech Stack

Cobra

Kuber Nets

AMS

Lamma

Create a free website with Framer, the website builder loved by startups, designers and agencies.