SERA — AI design career companion, landing screen on a laptop
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 Output Working prototype
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

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 that others do not
M
MockinDesigner Career Platform
  • Portfolio reviews & AI feedback
  • Resume & LinkedIn optimization
  • Job matching & application tracking
  • AI mock interviews
  • Unified workspace across portfolio, interviews, career planning & growth
  • Remembers your context and grows with you
  • Long-term career companion, not just a toolkit
e
EvalvPortfolio Analysis Platform
  • AI portfolio review & scoring
  • Visual hierarchy & UX feedback
  • Role-specific recommendations
  • Job matching
  • Connects portfolio gaps to skills, learning plan, and career goals
  • Recommends what to build next
  • End-to-end growth, not just portfolio feedback
R
RefineAIPortfolio Feedback Platform
  • Case study structure analysis
  • Storytelling & content feedback
  • Visual & UI improvement suggestions
  • Role alignment insights
  • AI chat that understands you and advises across your entire journey
  • Transforms feedback into a personalized plan
  • Continuous guidance, not one-time analysis
T
TealCareer Growth Platform
  • Resume builder & optimization
  • Job search & tracking
  • Career advice & resources
  • Company insights
  • Designed specifically for designers’ growth
  • Focuses on skill development, portfolio, and interview readiness
  • Less about job search, more about becoming a better designer
C
ClearRound AIInterview Practice Platform
  • AI mock interviews
  • Role-based question sets
  • Real-time feedback & scoring
  • Answer improvement suggestions
  • Personalized practice based on your portfolio, goals & weak areas
  • Integrates with career plan and skill gaps
  • Remembers your progress and adapts
N
NexutorCareer Guidance Platform
  • Psychometric assessments
  • Career matching & roadmaps
  • AI career coach
  • Guided learning modules
  • Combines psychometric insights with real portfolio & career execution
  • Practical next steps, not just suggestions
  • Conversational AI that guides, plans & acts with you
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
01New 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

Aisha has recently graduated with a degree in Design. She’s passionate about UX and wants to enter the job market but feels unsure if her case studies are strong and competitive enough.

Goals

  • Build 2–3 strong case studies that stand out
  • Understand what makes a portfolio job-ready
  • Get feedback and improve her storytelling
  • Land her first UX design role

Pain Points

  • Not sure if her case studies are good enough
  • Confused about what to include or leave out
  • Overwhelmed by different opinions and examples
  • Lack of industry exposure and 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
02Career 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

Rohan has been working as a junior UI/UX designer for 4+ years. He enjoys his work but feels stuck in the same role with slow growth and unclear direction on how to advance his career.

Goals

  • Make a career jump to a mid-level designer role
  • Identify and bridge the skill gaps holding him back
  • Build a portfolio that reflects his growth
  • Get better at interviews and case study presentation

Pain Points

  • Stuck in the same role for too long
  • Not sure what skills to focus on
  • Lack of mentorship and career guidance
  • Not getting 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
03Mentor & 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
M.Des7+ Years Exp.
Academic MentorBuilding a remote career

About

Priya is a practicing designer and an academic mentor at a design college. She enjoys guiding young designers and wants to expand her impact by becoming a full-time remote academic mentor.

Goals

  • Build a strong personal brand as a design mentor
  • Create structured guidance programs for young designers
  • Reach and help more students remotely
  • Build a sustainable remote career around mentorship

Pain Points

  • Unsure how to position herself as a remote mentor
  • Confused about what content and programs to create
  • Lack of 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.

SERA AI Career Companion
Onboarding
  • About You
  • Design Experience
  • Career Goals
  • Current Challenges
Home / Conversation
  • Continue Conversation
  • Suggested Actions
  • Recent Activity
  • Explore SERA
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
Profile & Context
  • Career Goals
  • Skills
  • Portfolio
  • Assessment Insights
  • Growth Progress
  • SERA Memory
Powered by Context & 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 GuidanceRelevant. Timely. Actionable.

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.

Portfolio Synthesis journey — from portfolio upload to portfolio ready
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.

Interview Prep journey — from setting your goal to interview ready
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.

Primary
#16B889
#0B8068
Secondary
#7B61FF
#4C9BFF
Backgrounds
#F5FBF8
#EFFAF6
#F0F8FC
#FFFFFF
Semantic
#16B889Success
#F2B84BWarning
#E66A6AError
#8E9BA6Neutral
Why these colours?

Mint & GreenRepresent growth, progress and positive action.

Lavender & BlueRepresent intelligence, exploration and imagination.

Soft NeutralsKeep the interface calm and allow content to shine.

03

Typography

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

StyleWeightSizeLine H.Usage
DisplaySemibold36px44pxHero headings
H1Semibold28px36pxSection headings
H2Medium20px28pxSub section headings
H3Medium16px22pxCard headings
BodyRegular14px22pxBody copy
SmallRegular12px18pxSupporting text
CaptionRegular11px16pxMetadata, labels
ButtonMedium14px20pxButtons
Chat textRegular15px22pxConversation text
Why this typeface? Poppins is geometric yet humanist, balancing professionalism with approachability.
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.
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
10

SERA Orb (AI Presence)

The orb represents SERA’s presence and intelligence.

Idle
Listening
Thinking
Responding
Success
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