Timeline
5 Weeks
Feb-Mar 2025
Disciplines
User Interface Design
Software Development
Responsibilities
UI Redesign
Technical Product Thinking
Wireframing
Prototyping
Frontend Development
Tools
Figma
React Native
TypeScript
Trello
Slack
Students face significant challenges transitioning from academic environments to professional settings. Many struggle to translate classroom projects, research, and leadership experiences into language that resonates with employers. The career services offices at universities are often overwhelmed, making personalized guidance difficult to access.
When I joined the project, I was given an existing design file (the "Flopii" app) that had several critical issues across both visual design and technical implementation:
Typography Inconsistencies
Uneven font sizes, poor text hierarchy, and scanning difficulties created a disorganised user experience
Cluttered Layout
Screens alternated between cramped elements and excessive white space with misaligned components
Imbalanced Visual Elements
Oversized icons paired with tiny text created visual dissonance and an unprofessional appearance
Messy Design File
No sectioning or delineation of separate design iterations or functionality
The original design file handed over to our team
As both the designer and developer on the project, I faced the dual challenge of not only improving the visual aesthetics but also ensuring the technical feasibility and efficiency of the implementation. This dual role required balancing design aspirations with development constraints throughout the process.
The challenge evolved from a simple update to a comprehensive redesign: Transform this problematic initial concept into a cohesive mobile application that helps students document their professional journey, analyze their experiences to identify relevant skills, and prepare effectively for job interviews using AI assistance.
Some guiding questions:
How might we help students effectively translate their academic experiences into professional language and skills?
How can we create a digital solution that bridges the gap between academic achievements and job interview preparation?
What role can AI play in helping students articulate their experiences in job-relevant terms?
How might we design a tool that provides personalized career guidance without requiring constant advisor interaction?
Understanding
Keeping track of everything we’ve done and achieved is tedious.
Through in-depth interviews with college students, we discovered a persistent disconnect between academic achievement and professional readiness. Students consistently struggled to recognize and articulate the transferable skills embedded in their coursework and extracurricular activities, often viewing these experiences as separate from their career development. Limited access to career advisors exacerbated this problem, with many students describing sporadic, last-minute preparation for interviews rather than systematic skill development. The research revealed not just a knowledge gap but an anxiety-inducing uncertainty about how to present academic experiences in professional contexts. Most noticeably, students lacked a structured system to document their growth, reflect on their achievements, and extract the professional value from their educational journeys.
KEY INSIGHT
Students struggle to translate their academic experiences into professional language that resonates with employers, creating a critical gap between education and career advancement that could be bridged through AI-powered guidance and structured documentation.
We wanted to create comprehensive user personas based on the full research process our team conducted, incorporating insights from student interviews, competitor analysis, and observations of career preparation challenges. By synthesising data from our interviews with 8 college students between ages 24-28, we identified patterns in their experiences transitioning from academic to professional environments. These personas represent the core user needs, pain points, and behaviours we discovered, allowing for a more focused and effective design that bridges the gap between academic achievements and professional opportunities.
Journal Experience
- "As a student, I want to create journal entries easily through multiple formats so I can document my experiences regularly regardless of time constraints."
- "As a student, I want my journal entries to be automatically categorised so I can easily find relevant experiences later."
- "As a student, I want to attach files to my journal entries so I can include project deliverables, presentations, and other evidence of my work."
- "As a student, I want to record voice entries when I'm on the go so I don't forget important experiences before I have time to write them down."
AI Analysis
- "As a student, I want AI to analyse my journal entries for skills so I can understand my strengths that I might overlook."
- "As a student, I want to receive professional summaries of my entries so I can articulate my experiences in job-appropriate language."
- "As a student, I want automatic skill tagging so I can track my skill development over time without manual categorisation."
- "As a student, I want suggestions for how to frame my experiences professionally so I can improve my interview responses."
Skills Visualisation
- "As a student, I want to see my skills mapped to job descriptions so I can prepare for interviews effectively."
- "As a student, I want a visual representation of my skill development so I can identify areas for growth."
- "As a student, I want a personalised professional summary (blurb) that I can reference during networking events."
- "As a student, I want to track my progress over time so I can see how my professional profile is developing."
Interview Preparation
- "As a student, I want to analyse job postings to understand specific requirements so I can tailor my preparation."
- "As a student, I want personalised interview question suggestions based on my experiences and specific job postings."
- "As a student, I want to see which of my experiences best match job requirements so I can highlight relevant stories.""
- As a student, I want to prepare for interviews with limited time by focusing on my most relevant experiences."
The Process
We started with a low-fidelity prototype that revamped the Info Architecture
After synthesising our research findings and developing our user personas, I began the wireframing process to visualise how Bridge-It could address the critical gap between academic experiences and professional opportunities. The low-fidelity wireframes served as our first tangible representation of the app's core functionality, focusing on solving the fundamental challenges our research uncovered.
I approached these initial wireframes with a focus on information architecture and user flow rather than visual aesthetics. Working through the primary user journeys–journal creation, skills analysis, interview preparation, and AI assistance–I mapped out how students would move through the application to achieve their goals. These wireframes allowed our team to validate that we were addressing the right problems before investing time in visual design details.
The low-fidelity phase was particularly valuable for testing the multi-format journal entry system. I explored different input mechanisms (text, voice, camera, file upload) to determine which arrangement would best accommodate diverse documentation styles while maintaining a cohesive experience. Similarly, the skills visualisation dashboard went through several iterations to find the most intuitive way to represent skill development over time.
These wireframes became the foundation for team discussions about technical feasibility, helping bridge the gap between design aspirations and development constraints. As both designer and developer on the project, I used this phase to identify potential implementation challenges early, particularly around the AI integration and radar graph visualisation components.
The Process
Then, we moved on to the high-fidelity prototype.
With the core functionality established through wireframes and user testing, I transitioned to high-fidelity design to transform Bridge-It from a functional concept into a polished, engaging experience. This phase required balancing visual appeal with development feasibility, especially challenging given my dual role as designer and developer.
I began by establishing a comprehensive design system inspired by contemporary digital products while creating a unique identity for Bridge-It. Drawing inspiration from industry leaders like Apple (for clarity and accessibility), Spotify (for personalization interfaces), and Nike (for achievement visualization), I developed a distinctive visual language that would resonate with our student audience. The design system included:
A core color palette centered around teal (#2A9D8F) and complementary orange (#F4A261) that provided sufficient contrast for accessibility while conveying the professional yet approachable nature of the app
A consistent typography system with carefully selected font sizes, weights, and line heights optimized for both readability and information hierarchy across all screens
Standardized component designs for common elements (buttons, input fields, cards) that could be efficiently implemented in React Native
Throughout the high-fidelity design process, I maintained ongoing communication with our development team, continuously refining designs based on technical feedback. This iterative approach allowed me to balance visual ambition with implementation reality, adjusting complex UI elements like the radar graph to ensure they could be efficiently rendered on mobile devices.
The high-fidelity design phase was particularly valuable for refining the visual presentation of AI-generated content, ensuring that skill analyses, interview suggestions, and the "Bridge-It Blurb" were presented in a way that felt authoritative and trustworthy to users.
The Process
As both developer and designer, I had to think about the technical implementation.
Technical Feasibility Reviews
- Conducted regular feasibility checks for complex UI elements like the radar graph
- Assessed performance implications of animation and transition designs
- Adjusted designs based on React Native's platform-specific rendering constraints
Component-First Design Approach
- Created reusable UI components in Figma that mapped directly to React Native components
- Established component naming conventions that aligned with development architecture
- Ensured consistent props and state management across design and code
Development-Friendly Design Documentation
- Created detailed spacing and sizing specifications using the 8-point grid
- Documented colour tokens, text styles, and shadow values for direct implementation
- Provided interaction states and animations with practical implementation notes
Results
We shipped a comprehensive mobile application designed to help students document, analyse, and leverage their achievements all in 5 weeks!
Multi-format Journal System
The journal interface features vibrant, accessible entry options through a color-coded circular menu. Students can document their experiences using four distinct methods:
- Text Entry: Traditional keyboard input for detailed reflections
- Voice Recording: Audio capture for on-the-go documentation
- Camera Integration: Visual documentation of projects, presentations, or events
- File Upload: Support for PDFs, documents, and other file formats
User research showed that students valued flexibility in how they captured experiences. Some preferred typing detailed reflections, while others wanted to quickly record spoken thoughts between classes or upload existing documents. This multi-format approach accommodates different learning styles and documentation preferences while lowering the barrier to consistent journaling.
AI-Powered Analysis
The AI analysis engine transforms raw journal entries into structured professional insights:
- Automatically identifies hard skills (technical abilities) and soft skills (interpersonal competencies)
- Categorises entries by experience type (Academic, Leadership, Project, Research, Personal)
- Generates concise summaries highlighting key professional takeaways
- Creates reflection prompts to help students expand on professional relevance
- Builds a comprehensive skills database that grows with each entry
This feature addresses the core "translation challenge" by helping students recognize the professional value in their academic experiences. The AI acts as a personal career advisor, pointing out valuable skills that students often overlook in their own experiences.
Personalised Dashboard
The dashboard provides an at-a-glance view of the student's professional development journey:
- Skills Radar Graph: A dynamic visualization showing strengths across different skill categories
- Weekly Activity Summary: Progress tracking to encourage consistent documentation
- Entry Count and Achievement Badges: Gamification elements to promote engagement
- Bridge-It Blurb: An AI-generated professional summary for quick reference
The "Bridge-It Blurb" was specifically created in response to student feedback requesting a concise, professional self-description they could reference during networking events or interviews. This customized paragraph summarizes the student's key skills, experiences, and professional identity based on their journal entries. Students wanted a "quick glance" solution that would help them articulate their value proposition to employers without having to review all their entries before each professional interaction.
Bridget AI Assistant
Bridget serves as a conversational career coach available whenever students need guidance:
- Personalised Career Advice: Tailored recommendations based on the student's profile
- Mock Interview Practice: Simulated interview experiences with feedback
- Job Posting Exploration: Help understanding job requirements and company fit
- Resume and Cover Letter Guidance: Assistance articulating experiences effectively
- On-Demand Confidence Building: Support and encouragement before interviews
Bridget represents the human connection that students often lack in their career preparation. User interviews revealed that limited access to career advisors was a significant pain point. Bridget provides that personal guidance at scale, offering support whenever and wherever students need it.
A few key take aways:
Dual design-development perspective is crucial
Approaching the project as both designer and developer allowed me to create solutions that were both visually compelling and techncally feasible
Design Systems Drive Technical Efficiency
Establishing cohesive design components directly improved development efficiency and reduced technical debt
Technical Constraints Shape Better Design
Understanding React Native's rendering capabilities informed design decisions that were both beautiful and performant
Component-First Mindset Bridges Disciplines
Creating a shared component language between design and code streamlined the implementation process
User Testing Validates Technical Choices
Regular testing with students validated not just visual design but also performance and interaction choices
Wait, where's the rest of it?
Great question! There’s a lot more to see behind the scenes that I’d be happy to share over an interview or 30 minute coffee chats.
Please
reach out to me if you’d like to learn more!
Skills Radar
Why we chose to have a radar chart instead of another chart
Gamification System
The integration of achievement badges, streaks, and progress tracking to increase user engagement and consistency in journaling
