Portfolio Synthesis — senior design mentor conversation
SERA — AI design career companion, landing screen
Career aptitude test — design competency profile
SERA  ·  AI Design Career Companion
Project Duration January 2026 – March 2026 2 months
What is Sera?

Sera is an AI-powered design career companion.

It helps designers build stronger portfolios, prepare for interviews, identify skill gaps and navigate career growth — through personalised mentorship and visual workspaces rather than another feed of advice

SERA AI career platform UX/UI, Agentic Experience, Product Design March, 2026 EDtech Conversational AI
Project overview — mapping sera's entire design and execution flow

Project Timeline

Week 1 — Week 11
Week 1–2

Research

  • User interviews
  • Market/competitor analysis
  • Persona mapping
Week 3

Ideation

  • User interviews
  • Market/competitor analysis
  • Persona mapping
Week 5–6

UI design & architecture

  • Problem–solution mapping
  • Concept directions & validation
  • User journey scenarios
Week 7–10

Development

  • Vanilla HTML/CSS/JS build
  • Module-by-module build
  • Self-Assessment first
Week 11

Testing

  • Usability testing
  • Edge case fixes
  • Content QA, all modules
Output Working prototype

stepping into the research phase of this project,
let’s start with user personas

02

Research Questions

Before conducting interviews, these were the key areas I wanted to explore.

Career

How do designers decide where they want to go?

Portfolio

How do they know what is missing from their portfolio?

Learning

How do they decide what to learn next?

Interviews

How do they currently prepare?

Guidance

Where do they seek advice, and how do they decide whose advice to trust?

AI

How are they already using AI in their career development?

03

Participant Profile

4Design students
5Recent graduates / job seekers
3Early-career designers
12 designers interviewed18–28 years  |  UX/UI, Product, Visual & Interaction Design
Participants were selected across different career stages to understand how career needs change as designers move from education into professional practice.
Competitive Landscape

SERA goes beyond point solutions.
It’s your AI career companion.

Competitor
What they do
What Sera provides
Mockin logo
MockinDesigner Career Platform
  • Portfolio reviews & AI feedback
  • Resume, job matching & AI mock interviews

One unified workspace that remembers your context and grows with you.

Evalv logo
EvalvPortfolio Analysis Platform
  • AI portfolio review & scoring
  • Role-specific recommendations

Connects portfolio gaps to skills, a learning plan and what to build next.

RefineAI logo
RefineAIPortfolio Feedback Platform
  • Case study structure & storytelling feedback
  • Visual & UI improvement suggestions

Turns feedback into a personalised plan, with continuous guidance.

Teal logo
TealCareer Growth Platform
  • Resume builder & job tracking
  • Career advice & company insights

Built for designers: less job search, more becoming a better designer.

ClearRound AI logo
ClearRound AIInterview Practice Platform
  • AI mock interviews with role-based questions
  • Real-time feedback & scoring

Practice shaped by your portfolio, goals and weak areas, and it adapts.

Nexutor logo
NexutorCareer Guidance Platform
  • Psychometric assessments & career matching
  • AI career coach & guided learning

Pairs psychometric insight with real portfolio and career execution.

SERA is not another tool.

It’s a unified, context-aware AI career companion built exclusively for designers, to help them understand, improve and achieve their career goals.

Aisha Khan
01 01 · New Graduate

Aisha Khan

Aspiring UX Designer

“I’ve just graduated and I want to build a strong portfolio, but I’m not sure if my case studies are good enough.”

22 Years
BengaluruIndia
B.DesRecent Graduate
Just GraduatedLooking for jobs

About

  • Recent Design graduate.
  • Passionate about UX and ready to enter the job market.
  • Unsure her case studies are strong enough to compete.

Goals

  • Build 2–3 standout case studies
  • Learn what makes a portfolio job-ready
  • Sharpen her storytelling
  • Land her first UX role

Pain Points

  • Unsure if her work is good enough
  • Unclear what to include or leave out
  • Overwhelmed by conflicting opinions
  • Little industry exposure or real feedback

Top Concerns

Portfolio quality90%
Getting noticed by recruiters85%
Lack of experience75%
Standing out as a fresher70%
What Aisha needs

Clear direction on building a job-ready portfolio and confidence that her work is good enough to begin her career.

Rohan Mehta
02 02 · Career Jumper

Rohan Mehta

UI/UX Designer

“I’ve been a junior designer for a while now and feel stuck. I want to grow, but I don’t know how to make the jump.”

27 Years
GurugramIndia
B.Des4+ Years Exp.
Junior DesignerLooking to level up

About

  • Junior UI/UX designer, 4+ years in.
  • Enjoys his work, but growth has slowed.
  • No clear direction on how to advance.

Goals

  • Jump to a mid-level designer role
  • Close the skill gaps holding him back
  • A portfolio that reflects his growth
  • Stronger interviews and case study presentation

Pain Points

  • Stuck in the same role for too long
  • Unsure which skills to focus on
  • No mentorship or career guidance
  • Not shortlisted for better roles

Top Concerns

Career growth90%
Skill gaps85%
Interview performance75%
Switching to a better role70%
What Rohan needs

A clear growth roadmap, support to close skill gaps, and help positioning himself for a successful career jump.

Priya Nair
03 03 · Mentor & Educator

Priya Nair

Designer & Academic Mentor

“I love mentoring young designers and want to grow this into a meaningful remote journey that impacts more lives.”

30 Years
MumbaiIndia
B.Arch7+ Years Exp.
Academic MentorBuilding a remote career

About

  • Practising designer and academic mentor.
  • Enjoys guiding young designers at a design college.
  • Wants to become a full-time remote mentor.

Goals

  • Build a personal brand as a mentor
  • Create structured programs for young designers
  • Reach more students remotely
  • A sustainable remote mentoring career

Pain Points

  • Unsure how to position herself remotely
  • Unclear what content and programs to create
  • Limited visibility and reach
  • Balancing design work and mentoring

Top Concerns

Building credibility85%
Finding the right audience80%
Monetizing mentorship70%
Sustaining remote career65%
What Priya needs

Guidance on building a personal brand, creating impactful mentorship programs, and scaling her impact remotely.

After collating thorough insights — how might we help designers understand where they are, where they want to go, and what they should do next?

and therefore landed SERA.

SERA · Landing

SERA uses conversation as its primary interaction layer, connecting a designer’s goals, context and actions across the entire experience. Rather than simply telling designers what to do, SERA works through the process with them, helping them understand, act and grow.

Solving core user challenges
through design

Problem Designers rely on scattered resources, making career growth fragmented and overwhelming.
Solution Sera unifies portfolios, interviews, career planning, and mentorship into one AI workspace tailored to every designer.
Sera is built on research with designers across different experience levels and career stages. These insights shaped four core workspaces that support every stage of a designer’s growth.
which led us to 4 flashcards
Flashcards

Portfolio Synthesis

Build stronger portfolios through contextual feedback and guided project creation.

Interview Prep

Practice real interviews with voice simulations and personalized feedback.

Career Growth

Identify skill gaps and follow a roadmap tailored to your career goals.

Career Aptitude Test

Discover your strengths through personalised psychometric assessments.

Information Architecture

SERA brings together everything a designer needs to grow, prepare and achieve their career goals.

Navigation & hierarchy Context & memory flow
01Entry
SERAAI Career Companion
OnboardingAbout you · Design experience · Career goals · Current challenges
Home / ConversationContinue conversation · Suggested actions · Recent activity · Explore SERA
02Core workspaces
Portfolio Synthesis
  • Upload Portfolio
  • Portfolio Overview
  • Case Study Analysis
  • Identified Gaps
  • Recommendations
  • Suggested Projects
Interview Prep
  • Choose Interview Type
  • Live Voice Interview
  • Follow-up Questions
  • Performance Feedback
  • Improvement Areas
Career Growth
  • Career Goal
  • Current Skills
  • Skill Gaps
  • Growth Plan
  • Progress
Psychometric Assessment
  • Assessment
  • Results
  • Strengths
  • Working Style
  • Career Preferences
  • Recommendations
03Context & memory
Profile & ContextCareer goals · Skills · Portfolio · Assessment insights · Growth progress · SERA memory
Portfolio Insights

Informs skill gaps and interview preparation

Interview Feedback

Highlights strengths and areas to improve

Career Progress

Tracks growth and updates goals

Assessment Insights

Reveals strengths, preferences and potential

SERA Memory

Remembers your journey and personalizes guidance

Personalised Guidance Relevant. Timely. Actionable. Back into every conversation

SERA is your AI career companion that understands you, remembers your journey and helps you grow.

Spent so much time understanding the market,
we had to do something with that knowledge

SERA · Portfolio Synthesis

PORTFOLIO SYNTHESIS

Your journey to a recruiter-ready portfolio.

Phase 1 Diagnose
+ Strengths− ImproveHiring signals
Phase 2 Refine
CS 0162
CS 0248
CS 0335
Phase 3 Expand
+ new directions
+++
Phase 4 Build
Ready
Select any step to explore the journey  ·  01 Portfolio Upload
Portfolio Diagnostics workspace
Portfolio Synthesis analyzes research, storytelling, visual hierarchy, and hiring signals to deliver actionable feedback.
Instead of generic project ideas, SERA recommends case studies tailored to each designer’s portfolio gaps and career goals.
Strategic Recommendation workspace
Strategic Portfolio Coverage workspace
SERA analyzes portfolio coverage to highlight strengths, skill gaps, and growth opportunities.
SERA generates structured project roadmaps with clear milestones, timelines, and deliverables.
Project Roadmap Timeline workspace

INTERVIEW PREP

Your journey to ace every design interview.

PrepareSet Your Goal
01 / 11
Live Interview Simulation
Practice realistic voice-to-voice interviews where the AI adapts, evaluates, and coaches you in real time.
A structured interview journey with simulations, live feedback, and personalised guidance.
Approachable Interview Pipeline

CAREER
GROWTH

Your personalized roadmap to become a better designer.

Your Goals Your dream role,
strengths & aspirations
01

Understand You

We analyze your background, current skills and career goals.

02

Identify Gaps

We pinpoint the skills and experiences you need to grow.

03

Personalized Roadmap

Get a custom plan with clear steps and learning paths.

04

Learn. Practice. Build.

Curated resources, hands-on projects and real-world practice to level up.

05

Grow & Achieve

Track progress, celebrate wins and move closer to your dream role.

Continuous feedback and smart recommendations to keep you on the right path.
From where you are today to where you want to be.
SERA · Career Growth

CAREER
APTITUDE TEST

Discover your strengths.
Find the roles that fit you best.

Compass illustration
01

Understand You

Answer questions to help us know you.

02

Evaluate Aptitude

We assess your cognitive, behavioral & technical aptitude.

03

Discover Strengths

Identify your top skills, natural abilities and working style.

04

Career Matches

Get roles that align with your aptitude and interests.

05

Personalized Insights

Actionable insights to help you grow and make confident choices.

06

Your Growth Path

See the skills to build and next steps to reach your goal.

0Aptitude Score
You excel in
Problem Solving Design Thinking Communication
Top Career Matches
Product Designer92% Match
UX Researcher88% Match
Interaction Designer85% Match
Your Design Competency Profile
Analyse your design mindset to uncover strengths, growth areas, and personalised development recommendations.
Reveal your professional strengths through contextual design scenarios that simulate real workplace decisions.
Situational design scenario assessment
Mentor Workspace — Portfolio Synthesis senior design mentor

What worked well

Breaking career growth into manageable steps

Most career advice tells designers what they should improve. Sera focuses on what they should do next. Splitting the journey into dedicated workspaces made overwhelming goals feel achievable.

pain point

“Every portfolio review tells me what’s wrong, but nobody explains how to actually improve it.”

pain point

“Everyone gives different advice, and I don’t know which feedback actually applies to me.”

Design challenges faced:

Knowing when to stop helping

One of the hardest decisions was deciding where AI should step back. If Sera solved every problem for the user, there would be very little learning left. The product had to guide thinking, not replace it.

Introducing AI Without Overwhelming Users

The challenge wasn’t building AI features. It was making them feel familiar, trustworthy, and integrated naturally into existing shopping behaviours.

Future scope

Explore additional ideas

  • Industry Benchmarking
  • Industry Knowledge Packs
SERA

Design System

The visual language of SERA

A calm, intelligent and human design system that powers meaningful conversations and immersive career experiences.

SERA orb
01

Design Philosophy

SERA is your AI career companion. Our design is calm, optimistic and focused, creating a safe space for designers to reflect, explore and grow.

CalmNot chaotic
IntelligentNot robotic
HumanNot clinical
OptimisticNot pushy
Conversation is the core of SERA. We don’t just tell you what to do. We work through it with you.
02

Colour System

Colours evoke clarity, growth and imagination. They create a calm atmosphere that keeps content and conversation in focus.

Mint · Primary#16B889
50#F5FBF8
100#EFFAF6
200#E3F6EE
300#CDEEDF
400#6ED4B4
500#16B889
600#0B8068
Ink · Neutral#0F2233
0#FFFFFF
50#F7FAF9
100#E7EEEA
400#8E9BA6
500#5E7080
700#33475C
900#0F2233
Lavender#7B61FF
50#F4F1FF
200#E2DBFF
Blue#4C9BFF
50#F0F8FC
100#EDF5FF
Semantic
Success#16B889 Warning#F2B84B Error#E66A6A Neutral#8E9BA6

Mint & GreenGrowth, progress and positive action.

Lavender & BlueIntelligence, exploration and imagination.

Soft NeutralsKeep the interface calm so content can shine.

03

Typography

Clean, modern and highly readable. Poppins brings warmth and clarity to every interaction.

Aa
PoppinsGeometric yet humanist — professional and approachable.
Ag300Ag400Ag500Ag600Ag700
DisplaySemibold · 36 / 44 · Hero headings
Heading 1Semibold · 28 / 36 · Sections
Heading 2Medium · 20 / 28 · Sub sections
Heading 3Medium · 16 / 22 · Cards
Chat textRegular · 15 / 22 · Conversation
Body copyRegular · 14 / 22 · Body
ButtonMedium · 14 / 20 · Buttons
Small textRegular · 12 / 18 · Supporting
CaptionRegular · 11 / 16 · Metadata
04

Spacing & Layout

Our layout follows an 8px grid for consistency and rhythm.

Spacing Scale
4
8
12
16
24
32
48
64
Grid12 column grid with 64px margins
Content WidthMax width 1280px for optimal readability
Section Spacing64px desktop • 40px tablet • 24px mobile
Card Spacing24px between cards • 16px internal padding
05

Radius & Shape

Soft corners create a friendly and modern feel.

Radius Scale
8px
12px
16px
20px
24px
999px (pill)
Shape Language

Rounded, smooth and consistent. Our shapes feel approachable while maintaining structure and clarity.

06

Elevation & Surfaces

Depth is subtle. We use elevation, translucency and borders to create layers.

FlatNo shadow
Card0 2px 8px rgba(23,33,43,0.04)
Elevated0 8px 24px rgba(23,33,43,0.06)
Floating0 16px 40px rgba(23,33,43,0.08)
Surface Treatment
SolidWhite surface with subtle border
Glass70–85% opacity with blur
GradientSoft atmospheric gradient behind
07

Glass / Atmospheric UI

Glass surfaces create depth while keeping the experience light and immersive.

SERA
I’m here to help you grow.
  • Opacity: 75%
  • Blur: 20px
  • Border: 1px solid rgba(255,255,255,0.6)
  • Background: Soft gradient atmosphere
Where to use
  • ✓Conversational surfaces
  • ✓Floating panels
  • ✓Immersive workspaces
  • ✓Contextual overlays
Where not to use
  • ✕Dense information
  • ✕Long form reading
  • ✕Critical actions
  • ✕When readability suffers
08

Component System

Core components that build the SERA experience.

Primary ButtonContinue  →
Secondary ButtonExplore
Text ButtonSkip for now
Input Field
Type something…
Search Field
Search…
Select Field
Select
ChipResearch ›
Context Chip2+ Years Exp. ›
Icon Button
All components have default, hover, active, disabled and relevant AI states.
10

SERA Orb (AI Presence)

The orb represents SERA’s presence and intelligence.

Idle
Listening
Thinking
Responding
Success
09

Conversational UI

Conversation is the heart of SERA.

User Message & SERA Response
How can I improve my portfolio?10:30 AM ✓✓
Great question! Let’s analyze your portfolio and identify areas to strengthen.10:30 AM
Suggested Prompts
Improve my case study Find my skill gaps Practice an interview What should I learn next?
AI States
Listening
Thinking
Responding
Complete
Voice Interaction
Tap to speakOr type your message
11

Iconography

Simple, rounded and clear icons.

Stroke: 1.5px  •  Corner: Rounded  •  Style: Outline
12

Motion System

Meaningful motion that enhances the experience.

Microinteraction150–300msButtons, chips, hover
Standard Transition250–400msPanels, modals, navigation
AI Transition500–800msWorkspace, responses
Ambient Animation2–6sBackgrounds, orb, gradients
13

AI-Specific States

AI states guide the user through the conversation.

Listening
Thinking
Processing
Responding
Clarifying
No Context
Interrupted
Error
Success
Recommendation
14

Accessibility

We design for everyone.

  • ✓AA contrast minimum
  • ✓Readable typography
  • ✓Focus states for all interactive elements
  • ✓Keyboard navigable
  • ✓Reduced motion supported
  • ✓Voice & text alternatives
15

Content & Voice

How SERA communicates.

  • ✓Clear and specific
  • ✓Encouraging and supportive
  • ✓Human and non-judgmental
  • ✓Explains why, then suggests
  • ✓Gives control to the designer
16

Design Tokens

The foundation of our system.

  • Colour Tokens
  • Typography Tokens
  • Spacing Tokens
  • Radius Tokens
  • Shadow Tokens
  • Motion Tokens
color.primary = #16B889
color.secondary = #7B61FF
color.background = #EFFAF6
text.primary = #17212B
radius.card = 16px
space.4 = 4px
space.8 = 8px
shadow.card = 0 2px 8px