Have a look around. This portfolio is built to work like my own Apple devices, because I believe in Apple’s design principles and I’m a big Apple-ecosystem fan. Everything is here to tap, open and explore.
Sept 2026 · 11:48 PM · Shira is asleep on my notebook
what should it look like??
a normal website with a hero + 3 case studiesboring, everyone has this
bento gridalso everyone
super playful, stickers everywhere → too playful. I'm a serious designer (with a fun side)
MY MACBOOK. yes yes yes
→ and it becomes my iPad on iPad, my iPhone on iPhone !!!
include ✓
real work, real case studies
About Me (short + full)
Messages → the fun stuff
Shira. obviously.
resume where people can actually find it
do NOT include ✗
Chrome (why is it in my dock)
WhatsApp
Downloads folder
every project I've ever touched
10 widgets → 2 is enough
fun/graphic folder → later
random thought: does anyone read case studies to the end?? → make them worth it
ideas I tried
welcome animation → "Welcome to my MacBook" ♡
lock screenmaybe later
Control Center with "if found, contact the owner" lol
Talky version inside About Me → no → move it to Messages!!
Spotlight search
note to self: keep it clean, not an overloaded fake OS.
jjjjjjjjjjjjjjjjjjjjj ← Shira walked on the keyboard, leaving it
K
Kavitha Sendil
Product / UX Designer · Toronto
"I start with a sketch and don't stop until it's something people can actually use."
7+ years designing products and experiences
At Index, designing across its brands
Sketch → live: I take ideas all the way to the build
Toronto, Canada, and yes, je parle français
French at B2/C1 level: I picked up French along the way and got my PR through the French route. I'm open to working in both French and English.
Experience at a glance
IndexWeb Designer · 2026 – now
FreelanceUX Designer · 2025 – now
BoomerangFXWeb Designer · 2024 – 25
Holeshot1 MediaUX/UI Designer · 2023
IDP EducationGraphic Designer · 2020 – 22
Mind Storm MediaJunior Visualizer · 2018 – 20
Education: UX Design Certificate, Humber College · M.Sc Animation · B.Sc Visual Communication
K
Kavitha Sendil
Senior Product Designer · Toronto
I'm a product and UX designer with more than seven years of experience turning rough ideas into things people use every day. I like the whole journey: the first messy sketch, the research that proves it wrong, and the moment it goes live.
Right now I'm at Index, where I design across several brands at once, from recruitment and relocation to clean energy and legal. That means careers experiences, interactive tools and full websites, often designed and built by me, so what ships looks exactly like what I designed.
My background started in graphic design and art, which is why I care about craft as much as usability. Since moving to Canada I've worked across product, UX and brand, and studied at Humber College.
Experience
Web Designer · Index · Liverpool, UK (remote) Apr 2026 – Present
Thanks for stopping by my portfolio! I'm Kavitha, a Senior Product Designer in Toronto with 7+ years of turning rough sketches into products people actually use.
A few reasons I think we'd work well together:
I take ideas all the way, from research and wireframes to a live, working build.
I design across several brands at once, so I move fast without losing the details.
I care about the people who'll use what I make, and it shows in the work.
I'd be more than happy to chat about your team and what you're building. Reach out anytime at or .
Warmly, Kavitha
New Message
To:
Subject:
Send opens your email app with this message ready to go.
Opening your email app… ✉️
K
Kavitha Sendil
mobile
No calls from the portfolio. Save the number and text me.
Messages
K
+iMessage
In case you want to see what I've been up to previously.
Index Launch Capital backs staffing entrepreneurs with early-stage capital, advisory support and its Launchpad infrastructure. I redesigned its website end to end: auditing the old site, restructuring the content, designing it in Figma and building it live in WordPress.
The challenge
The old site had plenty of information, but visitors couldn’t quickly tell what Index offers, how the options differ or what to do next.
How might we make a complex B2B offering easier to understand, navigate and act on?
Where it started
The previous site: long, dense pages with no clear next step.
HomepageLaunchpadProcessProcess (full page)The PlanContactMore of the old site
The audit
I audited the old site across ten areas, noting what worked, the issues, their impact on users and a recommendation for each.
Category
What works
Issues
Impact
Recommendations
01Hero section & messaging
✓ What worksBold typography creates a strong visual identity, and the dark plus neon green palette feels modern and premium, while CTAs are clearly visible.
✕ IssuesMessaging is inconsistent and unclear with no single strong value proposition; oversized text reduces readability, and CTA wording is not consistent across sections.
◎ ImpactUsers don’t understand what the company offers within the first few seconds, which increases bounce rate and reduces trust.
→ RecommendationDefine one clear value proposition that explains what, who and benefit. Standardize one primary CTA, reduce font sizes and add supporting subtext.
02Content clarity & readability
✓ What worksContent explains the business model and target audience and gives useful context about the offerings.
✕ IssuesContent is too dense, with long paragraphs, poor readability due to text over images, and no scannable structure.
◎ ImpactUsers are likely to skip important information, which leads to poor engagement and missed communication.
→ RecommendationBreak content into bullet points, add overlays for readability, introduce headings and improve spacing so content is scannable.
03Navigation & IA
✓ What worksNavigation is simple and visible, with key sections accessible from the main menu.
✕ IssuesLabels such as Vehicles, Launchpad and The Plan are unclear and not user-friendly, and key actions aren’t prioritized.
◎ ImpactUsers feel confused about where to go next, which creates friction in the journey.
→ RecommendationRename navigation items around user intent, highlight primary user paths and simplify the structure.
04Contact form UX
✓ What worksThe form layout is clean, with good spacing and minimal design.
✕ IssuesPlaceholder text is used instead of labels and disappears while typing; terminology is unclear; there is no validation or guidance.
◎ ImpactUsers may abandon the form due to confusion or lack of feedback.
→ RecommendationAdd persistent labels and helper text, simplify the language, and add validation with success or error feedback.
05CTA consistency & conversion
✓ What worksCTAs are visually noticeable and repeated across the site.
✕ IssuesMultiple CTA variations create inconsistency, and there is no clear primary action.
◎ ImpactUsers experience decision fatigue, which reduces conversion rates.
→ RecommendationUse one primary CTA consistently across the site and limit secondary actions.
06Visual design & branding
✓ What worksA strong, bold brand identity with a modern and memorable aesthetic.
✕ IssuesOveruse of large typography, weak hierarchy and some contrast issues affect readability.
◎ ImpactUsers may find content hard to read, and accessibility is reduced.
→ RecommendationImprove the typography hierarchy, balance font sizes and meet accessibility standards.
07Trust & credibility
✓ What worksA professional tone and structured presentation.
✕ IssuesNo testimonials, client logos or success metrics to build trust.
◎ ImpactUsers may hesitate to engage due to lack of credibility.
→ RecommendationAdd testimonials, case studies, metrics and client logos.
08Positioning & clarity
✓ What worksA unique concept: supporting staffing entrepreneurs.
✕ IssuesThe core offering is unclear and relies heavily on jargon.
◎ ImpactUsers drop off quickly because they don’t understand the offer.
→ RecommendationSimplify the messaging and explain the offering in plain language.
09Accessibility & usability
✓ What worksA clean layout and basic usability.
✕ IssuesContrast issues and missing accessibility considerations reduce usability for some users.
◎ ImpactSome users may struggle to use the site effectively.
→ RecommendationFollow accessibility guidelines, improve contrast and make typography and forms readable.
10Performance & speed
✓ What worksThe basic structure is in place.
✕ IssuesHeavy assets and lack of optimization may affect performance.
◎ ImpactSlow load times can increase bounce rates and hurt SEO.
→ RecommendationOptimize images, enable lazy loading and test with performance tools.
Hero & messaging
IssueNo single, strong value proposition; oversized text; CTA wording changed from section to section.
FixOne clear value proposition, one primary CTA, calmer type sizes and supporting subtext.
Content clarity
IssueLong, dense paragraphs and text over images, with no scannable structure.
FixHeadings, short points, overlays for legibility and more breathing room.
Navigation & IA
IssueLabels like Vehicles, Launchpad and The Plan weren’t self-explanatory, and no path was prioritised.
FixLabel by user intent, highlight the main path, simplify the structure.
Contact form
IssuePlaceholders instead of labels, unclear wording, no validation or feedback.
FixPersistent labels, helper text, simpler language, success and error feedback.
CTA consistency
IssueSeveral CTA variations and no clear primary action, causing decision fatigue.
FixOne primary CTA used consistently; fewer secondary actions.
Visual design
IssueHeavy large type, weak hierarchy, some contrast issues.
FixA clear type hierarchy, balanced sizes, accessible contrast.
Trust & credibility
IssueNo testimonials, client logos or success metrics.
FixAdd testimonials, client logos and metrics.
Positioning
IssueThe core offer leaned on jargon and was hard to grasp.
FixExplain the offer in plain language.
Accessibility
IssueContrast issues and missing accessibility considerations.
FixFollow accessibility guidelines for contrast, type and forms.
Performance
IssueHeavy assets that could slow the site down.
FixOptimise images, lazy-load, test with performance tools.
Strategy
I reorganised the site around the questions a founder actually asks, in order:
Who is Index for?
What does it provide?
What are my options?
How does the process work?
What happens next?
Home
Who We BackIs this for me?
VehiclesSprint · Surge · Stride
LaunchpadWhat I get
The Process5 stages
The PlanMy blueprint
Work at IndexCareers
Contact us · always one tap away in the header
Design direction: keep the bold black and neon-green identity, but put information before decoration, make dense content scannable, and give every page one clear next step.
Design process
I wireframed the full page structure first, then designed and built the final pages.
Wireframe: navigation, hero, logos, track record, standards, Launchpad, value section, CTA and footer.
Lo-fi homepage sketch: desktop 1440 and mobile 393.
What changed across the site:
Homepage
A one-line proposition in the hero, "We back ambitious staffing entrepreneurs…", a client-logo strip, bold proof points ("75% of start-ups fail. Ours don’t.") and founder testimonials.
Navigation
One consistent header with a single outlined Contact us button, so the main action is always in the same place.
Vehicles
Sprint, Surge and Stride side by side, each with founder equity, income, investment value and operational control, so they’re easy to compare.
Launchpad
Eleven services turned into a numbered, icon-led grid instead of long paragraphs.
The Process
Five clear, numbered stages so founders know what happens after they reach out.
Contact
A focused "Join the launchpad" form with visible labels, required-field markers and a vehicle picker.
Home
Vehicles
Contact
Final pages. Scroll inside each one to see the whole page.
Build
I built every page myself in WordPress and Elementor, adapting the layouts for desktop, tablet and mobile and working through the constraints of a live business site. The marketing manager provided the copy, and I used Claude AI and ChatGPT as supporting tools along the way.
In short: the old site was dense and unclear. The new one leads with a single proposition, shows proof (client logos, testimonials, success stats), makes the three funding options easy to compare, explains the process in five steps, and ends every page with one clear action: Contact us.
Impact and recognition
Shipped and live
The redesign is Index LC’s public website.
Drove traffic
The new site drove traffic to Index LC.
Helped launch another brand
Two new brands launched in seven days.
Publicly credited
The founder announced the site and credited Jessica Barker and me.
Content architecture is product design: how information is organised mattered as much as how it looked. Taking the design all the way into production also showed me responsive and build details a static prototype never would.
RESOLUTE PROJECT PROFESSIONALSDesigning clarity for complex infrastructure
UX / UI case study · Live
Resolute Project Professionals
A website redesign for a specialist power-infrastructure firm, turning complex services and project environments into a clear, credible path from understanding RPP to getting in touch.
Company
Index
Brand
RPP · Resolute Project Professionals
Timeline
~1 month
Role
UX / UI Designer · Web Designer
Status
Live
Team
Kavitha Sendil (me) · Designer: structure, visual design, build and launchJessica Barker · Marketing Manager: content and copy
Scope
Information architecture, page structure, visual design, responsive design, production build
RPP (Resolute Project Professionals) supports complex power-infrastructure programs through the move from construction to operation. Its website had to explain a highly technical offer clearly and give the firm a credible, modern presence. I designed the structure and visuals, then built the site live in WordPress.
The challenge
RPP’s language, services and project environments are hard for a general visitor to follow. The site had to answer five questions without overloading anyone:
What does RPP do?
Who does it serve?
Where does it work?
Why trust it?
How do I get in touch?
How might we make a specialist technical firm easy to understand, and easy to contact?
Design review
Before designing, I broke the brief down into six problems the site needed to solve, and a design response for each.
What RPP does
ChallengeHighly technical services (commissioning, protection & controls, SCADA/OT, grid integration) that a general visitor can’t decode at a glance.
ResponseA plain-language positioning line up front, then three clearly named service areas.
Who RPP serves
ChallengeOwners, EPCs and developers each look for different things, with no obvious entry point.
ResponseTwo engagement models, Contract and Direct Placement, explained side by side.
Where RPP works
ChallengeEight very different project environments risked becoming one long wall of text.
ResponseA repeatable card for each environment, so they can be scanned and compared.
Why trust RPP
ChallengeCredibility (veteran-owned, SAM registered, credentials) was easy to miss.
ResponseA dedicated credentials block and a "Three things that define RPP" section on About.
How to get in touch
ChallengeLong technical pages needed a clear finish.
ResponseEvery page ends on the same CTA: "Ready to talk about your program?" with email and phone.
Brand consistency
ChallengeTechnical content needed to feel precise and established, not generic.
ResponseA restrained deep-blue and red system, a technical grid and real infrastructure imagery.
Strategy
I organised the site around the questions a prospective client asks, moving from high-level positioning into services, environments, credibility and contact.
Home
Services3 disciplines
Where We Work8 environments
About UsStory & credentials
ContactStart a conversation
Contact Us · always in the header
01 · Clarify
Make the specialist offer understandable at a glance.
02 · Structure
Turn complex technical information into digestible, repeatable sections.
03 · Build credibility
A visual language that feels technical, established and trustworthy.
04 · Guide action
Clear pathways to learn more or contact RPP.
Design process
I planned the structure and designed every page in Figma before building.
Three distinct service cards instead of one block of technical copy.
Repeatable environment cards
Eight Where We Work environments in one consistent card pattern.
A predictable page rhythm
Context → explanation → structured content → evidence → CTA on every page.
Hierarchy controls density
Headings, short intros, numbered sections and callouts break content into small pieces.
Built, not just designed
The system carried all the way into a live WordPress / Elementor site.
Home
About
Final pages. Scroll inside each one to see the whole page.
Build
I built the site myself in WordPress and Elementor: page construction, responsive layouts, the typography and spacing system, reusable content patterns, navigation and CTAs, then final QA and publishing. Long card-based pages were treated as a layout problem on mobile, so cards stack cleanly and headings keep their hierarchy.
It’s live
The new RPP website is live, with a structured content hierarchy, a consistent visual system and a clear path through services, project environments, company information and contact.
For a technical business, clarity is the design. Most of the work was structure, not styling: deciding what a visitor needs to understand first, and building repeatable patterns so eight very different environments could be read the same way.
OHANA · CO-OPCreating a new investor website
UX / UI case study · Co-op · Live
Ohana
An investor website for a growing company in power, technology and marketing, bringing everything an investor needs into one clear, trustworthy place.
Company
Holeshot1 Media · Canada (co-op)
Brand
Ohana
Timeline
4 months
Role
UX / UI Designer
Status
Live
Team
Kavitha Sendil (me) · UI / UX Designer: IA, visual design, responsive design and buildColleague · research
Ohana is a growing company working across power, technology and marketing. It needed an investor website to bring its information together in one place and showcase its mission, values and investment opportunities, while building trust with stakeholders.
The challenge
Company information was spread across many documents. The goal was to compile it into a website where investors could find what’s relevant quickly.
How might we turn scattered company material into one clear, credible place for investors?
Requirement · Minimal design
A clean, uncluttered look that lets the company speak for itself.
Requirement · Concise information
Only what an investor needs, curated from a lot of source material.
Research
My colleague led the research, studying competitor and peer investor websites to understand how they structure information and guide visitors. I used those findings as inspiration for the flow.
Strategy
I set the page structure and navigation first, then wrote the content from company materials, putting investors’ needs first. The result: a focused four-page site.
Home
AboutMission & values
VenturesWhat Ohana builds
InvestorsOpportunities
ContactGet in touch
Four pages · everything an investor needs
Design process
I built a cohesive visual language (colour, typography and imagery that match Ohana’s offerings), then designed the pages in Figma.
A tech-forward look that fits an infrastructure company.
Curated content
Long company documents cut down to the essentials investors look for.
Simple navigation
Four pages, so nothing is more than one click away.
Built to build trust
Mission, values and opportunities presented clearly and confidently.
Responsive
Desktop design adapted across breakpoints for every device.
Tested with users
First-time user testing shaped the final version.
Usability testing
We tested the site with 3 users, focusing on the first-time experience: could someone new understand Ohana and find investment information on their own?
89% NPS
From usability testing with first-time users.
CEO feedback
“The website you created is beautifully designed.”
It’s live
The four-page investor website launched and is live, fully responsive across devices.
Responsive design. I learned how to plan and implement breakpoints so the design holds up on every screen.
Content curation. Deciding what to leave out mattered as much as the design, especially with a lot of source material.
ENOVA · SPECIALIST RECRUITMENTBuilding the teams behind clean fuels
UX / UI case study · Live
Enova
A website and careers experience for a boutique recruiter in clean fuels, waste-to-value and environmental services, built to earn trust from clients and make applying simple for candidates.
Company
Index
Brand
Enova
Timeline
~1 month
Role
UX / UI Designer · Web Designer
Status
Live
Team
Kavitha Sendil (me) · Designer: UX/UI, careers flow, build and launchJessica Barker · Marketing Manager: content and copy
Scope
Site structure, UX/UI, careers page and jobs board, CV upload flow, production build
Enova is a founder-led, female-owned recruitment firm that hires for clean fuels (RNG, SAF, hydrogen, biodiesel), waste-to-value and environmental services across the US. I designed and built its website, including a careers page with a jobs board and CV upload.
The challenge
Enova speaks to two very different audiences on one site: companies looking to hire specialist talent, and candidates looking for their next role. The niche industry language also had to feel approachable.
How might we win a hiring manager’s trust and make applying effortless for a candidate, on the same site?
Design review
I broke the brief into the problems the site needed to solve, with a design response for each.
A niche offer
ChallengeClean fuels and waste-to-value are unfamiliar to many visitors.
ResponseA clear headline and three named sectors, explained in plain language.
Two audiences
ChallengeClients and candidates need different things.
ResponseSeparate paths: Services and Industries for clients, Careers for candidates.
Trust
ChallengeA boutique firm must prove expertise quickly.
Response"Why enova", client testimonials and a founder-led About story.
Applying
ChallengeLong application steps lose good candidates.
ResponseA filterable jobs board with a short, per-role application and CV upload.
Strategy
Home
ServicesSearch & intelligence
Industries3 sectors
AboutFounder-led story
CareersJobs board & CV upload
Contact UsStart a search
Clients → Services · Candidates → Careers
Design process
I designed the pages and the careers flow in Figma before building.
"Building the teams behind clean fuels, waste-to-value & environmental infrastructure."
Services as cards
Retained search, market mapping, compensation benchmarking and competitor intelligence.
Filterable jobs board
Candidates filter roles quickly instead of scrolling a long list.
Per-role application
Each role opens its own short application with a CV upload.
Proof built in
Testimonials from clients across energy and environmental sectors.
Calm, natural look
Forest imagery and a minimal palette that fit the sustainability theme.
Build
I built the site in WordPress and Elementor, including a custom HTML jobs board with per-role application modals and a WPForms CV upload, working around Elementor’s embedding limits along the way.
It’s live
Enova’s website and careers page are live, giving the firm one place to win clients and attract candidates.
Designing for two audiences meant giving each one a clear door. The careers flow taught me the most: small details, like a short per-role form, matter more than big visuals when you want people to actually apply.
REENVISION EYE CAREEnhancing your sight with precision
Branding + website · Live
ReEnvision Eye Care
A brand and website for an ophthalmology practice near Chicago, designed to feel calm and trustworthy and to make booking an appointment easy.
Company
BoomerangFX · Canada
Brand
ReEnvision Eye Care
Timeline
~1 month
Role
Brand & Web Designer
Status
Live
Team
Kavitha Sendil (me) · Designer: branding, UX/UI, build and launchSenior Designer · design direction and review
Scope
Logo and brand system, site structure, UX/UI, production build
ReEnvision Eye Care is led by Dr. Kristi Kozlov, MD, a board-certified ophthalmologist with more than 20 years in Chicago’s northwest suburbs. The practice treats dry eye, glaucoma, cataracts, macular degeneration and diabetic retinopathy. I created the brand identity and designed the website.
The challenge
Patients arrive worried about their eyes and unsure which condition or treatment applies to them. The site had to feel reassuring and expert, explain services simply, and get people to book.
How might we make an eye-care practice feel trustworthy at first glance, and make booking the obvious next step?
Brand identity
I designed the logo and colour system: a stylised eye with a script wordmark, in deep navy and clear blues that feel medical, calm and precise.
Logo, colour palette and the website footer, designed in Figma.
Strategy
Home
Services6 conditions
AboutMeet Dr. Kozlov
ResourcesFAQs & insurance
Contact UsLocation & hours
Patient PortalExisting patients
Book Now · always in the header
Design process
I designed the pages and components in Figma before building.
In healthcare, design is about reassurance. Clear language, calm colours and an obvious way to book do more for a nervous patient than anything decorative.
TYPSY.TIPS · FREELANCETiny canvases, big statements
Freelance · Website design · Live
Typsy.Tips
A website for a Toronto nail artist, designed to show off her work and make booking an appointment easy.
Role
Web & UX/UI Designer
Client
Typsy.Tips, nail studio in Toronto
Status
Live
Scope
Site structure, visual design, content layout, build
Typsy.Tips is a small nail-art studio offering acrylic and gel nails, extensions, nail art, manicures and pedicures. The owner needed a simple, good-looking website where new clients could see her style, learn about her services and book.
The challenge
For a nail artist, the work sells itself, but only if people can see it. The site had to feel as polished as the nails, while staying easy to update and quick to book from on a phone.
How might we turn a visitor who likes the nails into a booked appointment?
Design goals
01 · Lead with the work
Big, bold imagery and a portfolio that shows the artist’s style straight away.
02 · Make booking obvious
One clear "Book appointment" button, repeated where it matters.
03 · Keep it personal
An About Me section so clients meet the artist behind the work.
04 · Easy to maintain
Built in Wix so the owner can add blog posts and new photos herself.
Structure
Home
TreatmentsServices & booking
PortfolioNail art gallery
BlogNail care tips
About MeMeet Ramya
Contact MeHours & location
Book appointment · on the homepage and Treatments
Design
A clean, modern look in soft neutral tones, so the colourful nail art stands out.
Bold hero
"Tiny canvases, big statements" sets the tone, with a clear Book appointment button.
Services at a glance
Acrylic, gel, extensions, nail art, manicures and pedicures, each with its own image.
Social proof
An Instagram feed and blog keep the site fresh and show real, recent work.
Personal touch
A welcome from the artist, so the brand feels friendly, not generic.
Everything to visit
Address, opening hours, phone and email in one easy place.
Mobile-first
Most clients find nail artists on their phones, so every section stacks cleanly.
It’s live
The site is live and gives Typsy.Tips a professional home for its work, services and bookings.
Designing for a small business is about focus: show the work, make the next step obvious, and give the owner a site she can keep up to date on her own.
Confidential
Under NDA
Design to build
Implementation and back-end work I can't show publicly, but I'm happy to walk through it on a call.
TORONTO ZOOMaking family ticket booking simple on web and mobile
UX / UI case study · Web and mobile · College group project
Toronto Zoo
Redesigning the Toronto Zoo’s ticket booking path on web and mobile, using research to make buying tickets, events and parking feel quick, clear and enjoyable.
Buying tickets on the Toronto Zoo website took too many steps, and the information visitors needed was scattered. Over 12 weeks, our group researched where booking broke down and redesigned the path for both web and mobile, with a simpler interface, clearer navigation and information shown right where decisions are made.
12 weeksfrom research to prototype
Web + mobileboth designed and prototyped
5 phasesin the new booking flow
1 checkoutfor tickets, events and parking
My role
01UX design and research
Interviews, competitor analysis, the persona, card sorting and the booking flow.
02UI design
Wireframes, the visual design and the clickable prototypes for web and mobile.
03Usability testing
Checking the prototype with users and turning survey insights into improvements.
The problem
The ticket purchasing process confused visitors before they ever reached the zoo.
01Scattered information
What each event includes, and which extra tickets you need, was spread across pages.
02Parking bought separately
Parking was its own purchase instead of part of the ticket order.
03Too many steps
A multi-step booking with extra clicks added complexity at every turn.
04Confusing wording
Labels like “some event” were mistaken for a separate program.
How might we make booking a family day at the zoo, tickets, events and parking included, quick and clear on any device?
Design process
Weeks 1–8 · UX designResearch, interviews, empathy map, problem and goal statements, information architecture
Competitor analysis showed us common themes and opportunities. Our qualitative research focused on the ticket booking process and how it affects visitor satisfaction and conversion, through interviews, surveys and observation.
Interview question 1
How do users find information about an event when they reach the registration page, and how do they decide?
Interview question 2
How do users get to the events pages, and how do they feel about booking with the Toronto Zoo overall?
Who we designed for
Lives in the GTAWants quality family timeAnimal loverWants value for moneyWants things quick and efficient
Key insights
01Hard to find information
Guardians with kids struggled to find event details and how to book them.
02Long, unnecessary forms
Event forms asked for unneeded details, with a separate form for each child.
03One way to pay
Event booking offered only a single payment option.
04Misread terminology
“Some event” was mistaken for a separate program, not a group event.
User persona
Sarah, 27 · UX Manager in Toronto · Married, two children Mom · Thinker · Creative
Sarah is a busy and organized UX manager who loves spending quality time with her family and exploring new places. She enjoys planning family outings and making sure everything runs smoothly.
Goals & needs
Easy, user-friendly ticket booking without unnecessary steps
Clear details on events, animal exhibits, parking and trip planning
A smooth, enjoyable visit that creates lasting family memories
Pain points
Limited time to plan, so booking has to be fast
A lengthy, confusing pathway that causes frustration and drop-offs
Behaviours
Researches the zoo's offerings and guidelines online
Books on her phone, so the site must be mobile-first
Looks for discounts and package deals
Puts her children's needs first
Opportunity
Relevant information at every stage of booking
Interactive displays to keep her engaged while planning
Quick, efficient booking options
Task flow
Sarah’s path from the home page to a confirmed order, in five phases. Tickets and parking now live in the same checkout.
Phase 1Search for events
Open Events & Tickets from the home page, explore the options, read the event information.
Phase 2Book tickets
Choose General Admission, pick a date on the calendar, set adult and kids tickets.
Phase 3Add parking
Select “Need parking ticket”, set how many, and continue to review the order.
Phase 4Confirm the order
Checkout with name, email, address, postal code and phone.
Phase 5Payment
Pay by card, Apple Pay or Interac, then get the confirmation by email.
Paper sketches became mid-fidelity wireframes for the full booking path on both screens: event information, tickets and parking, contact details, payment and confirmation.
Mobile
01Home
02Book tickets
03Tickets and parking chosen
04Contact details and payment
Web
01Event information
02Contact details
03Card details and order review
04Booking confirmed
Typography & colours
Nunito Sans: a balanced, rounded sans serif that feels friendly for families and stays readable on small screens. The greens come from the zoo’s own brand.
Primary#367334
Secondary#90BF2A
Text#1E1E1E
Text#595959
Background#F3F3F3
The solution
We designed and prototyped the new booking path for both web and mobile, with the same four steps on each: add dates and tickets, review cart, add details, and pay.
🖥
WebDesktop booking flow
Event information first: General Admission and current or upcoming events, side by side
A 4-step progress bar, so visitors always know where they are
A calendar with every event marked on its date
All ticket types and parking on one page, with simple + and − counters
Contact details and payment method on the same screen
Event informationGeneral Admission and Events side by side, so visitors see what’s included before they book.
Book ticketsCalendar with events, every ticket type and parking, all on one page.
Contact detailsDetails and payment method together: card, Interac or Apple Pay.
Adults, children and parking chosen on a single screen
A calendar that shows the events on each day
A clear confirmation with payment ID, print and send options
Every ticket, one screenAdults, children and vehicle parking booked together.Dates with eventsPick a day on the calendar and see which events are on.Booking confirmedPayment ID, then print or send the tickets and invoice.
Putting users’ needs and preferences first is fundamental to good UX. Thorough research and detailed personas helped us understand our audience and shape a more tailored, user-focused solution.
02A simplified user journey
A long, complex booking process leads to frustration and drop-offs. Keeping clicks to a minimum and steps clear makes the whole experience better and more satisfying.
03Clarity in information display
Easy-to-find, concise information keeps people engaged. Event schedules, ticket prices and key details have to be shown simply, to prevent confusion.
04Mobile responsiveness
More and more people browse on their phones. A mobile-friendly interface lets users like busy working moms book tickets conveniently, wherever they are.
05Continuous iteration and improvement
Prototyping and gathering user feedback are at the heart of an iterative design process. Refining the experience based on feedback keeps the website evolving with users’ changing needs and expectations.
HUMBER CURRENTPutting student work front and centre
UX / UI case study · Web and mobile · College project
Humber Current
Redesigning the website that showcases Humber design students’ work, on web and mobile, so employers can find fresh talent quickly and students can put their best work forward.
Duration
7 weeks
Platforms
Web and mobile
Type
Website redesign
Role
UX/UI designer, UX researcher
Tools
Figma, Miro, Canva
Published
July 2023
Team
Kavitha Sendil (me) · UX/UI design and UX researchTeam · 2 UX designers, 1 web developer and 1 content writer
Humber Current showcases the work of Humber design students. The old site lacked focus and organization, so its message to employers got lost. We redesigned it for web and mobile as a focused platform, with intuitive navigation and work grouped by discipline, bridging the gap between fresh talent and jobs in the design industry.
7 weeksfrom research to prototype
Web + mobileboth designed and prototyped
4 issuesfound in user testing
2 audiencesstudents and employers
My role
01UX research
Interviews, surveys and user testing with design students and hiring managers.
02UX design
The persona, navigation, and low and medium fidelity wireframes.
03UI design
The Dark × Pastel direction and the high-fidelity prototypes for web and mobile.
The problem
The Humber Current website lacked focus and organization, and that hurt both sides.
01No clear focus
The site didn’t send a coherent message about who it was for or what to see first.
02Cluttered content
Poor organization buried the work under everything else on the page.
03Students couldn’t shine
It was hard for students to showcase their best work effectively.
04Employers couldn’t find talent
Hiring managers struggled to discover relevant designers amid the clutter.
How might we give Humber Current a clear focus, so students’ best work stands out and employers can find the right talent fast?
Design process
DefineA modern, visually appealing design aligned with the Humber brand, with the focus on the portfolios
ResearchIn-depth interviews and surveys with design students and hiring managers
IdeateIdeas for features, layout, navigation and interaction, through sketching and wireframing
PrototypeHigh-fidelity prototypes for web and mobile that show how the site works
Research
We ran a user testing study on the existing Humber College portfolio website, to find issues and opportunities in its functionality, design and navigation. The results shaped our design decisions.
Four findings from testing, and what we recommended for each.
01Navigation
Confusing and hard to use. Some couldn’t find specific pages or get back to the homepage.
Simplify navigation to make it more intuitive.
02Design
Well liked for its visuals and clean layout, but some found the font too small to read comfortably.
Increase the font size to improve readability.
03Project presentation
Informative and engaging, but too much information at once made it hard to absorb.
Break project information into smaller sections.
04Contact form
Generally well received, though some wanted more fields for extra information.
Add more fields for more detailed enquiries.
User persona
Sarah, 29 · HR Manager in Toronto · MBA, Human Resources
An experienced HR manager at a creative agency that often looks for fresh design talent. She recruits and hires designers, making sure they fit the agency's creative culture.
Goals
Discover skilled, creative design graduates from Humber with outstanding work and a strong artistic vision
Search talent efficiently, with search and filters to quickly find designers with specific skills
Frustrations
Complex navigation that makes specific categories or projects hard to find
Sites with little interactivity, which are less engaging during a talent search
Mood board
Dark × Pastel. Inspiring, refreshing, informative. A clean, minimal and bold concept in black and white with crisp lines, softened by a soothing pastel palette, for a sleek, modern look that is striking and calming at once.
Mood board: Dark × Pastel
Low and medium fidelity wireframes
Sketches of the discipline, project and portfolio pages became medium-fidelity wireframes for mobile and desktop.
Mobile
01Discipline page
Sketch
Wireframe
02Project page
Sketch
Wireframe
03Portfolio grid
Wireframe
Desktop
04Discipline page and project grid
Sketch
Wireframe
The solution
We designed and prototyped the new Humber Current for both web and mobile: clear discipline pages, student profiles, and projects broken into digestible sections.
🖥
WebDesktop site
Simpler navigation, with every discipline in the top menu
A bold, full-width showcase of student work on the homepage
Discipline pages with a short intro and a portfolio grid
Student profiles that introduce the designer first
Project details split into short, easy sections
Discipline pagesEach program opens with a short intro, then a portfolio of its students’ work.Student profilesA photo, a short bio and “read more”, so employers meet the designer first.Work at a glanceA clean two-column grid of projects, each with its title and student.
Understanding the needs of students and employers, through research and feedback sessions, kept the platform targeted.
02Usability testing matters
Real feedback during testing improved the interface and user journey, and showed where to focus.
03Clear information architecture
Organizing portfolios by discipline, with search and filters, made relevant talent easy to discover.
04Visual appeal matters
Strong design, quality images and on-brand aesthetics made the site more engaging for students and employers.
TESLA’S AURORAA voice assistant for hands-free driving
Voice UI case study · College project
Tesla's Aurora
A voice assistant for the Tesla mobile app, so drivers can control their car hands-free with natural language instead of tapping through a screen.
Timeline
1 month
Type
Voice user interface (VUI)
Platform
Tesla mobile app
Role
UX / UI Designer
Status
Concept · College project
Assistant
Aurora
Team
Kavitha Sendil (me) · Visual UI, UX, and coding of the voice feature in the app2 teammates · Project team
Overview
Integrating a voice interface into the Tesla app lets drivers do things by speaking instead of navigating menus or typing. Hands-free control promotes safety and accessibility, and a natural conversation removes the need for complex navigation. Over one month, our team of three designed Aurora: its personality, its conversations and the app screens around it.
1 monthfrom research to prototype
3 peoplein the project team
4 user goalsdesigned for, end to end
8 screensplus a working voice prototype
My role
01Visual UI
The dark, car-first look of the app, the purple voice wave and every screen in the prototype.
02UX
User goals, the conversation flow and how each spoken request moves the driver from screen to screen.
03Voice feature code
I coded the voice feature in the app, so the prototype responds to spoken commands.
The challenge
Tesla’s touchscreen gives drivers control over many functions, but only if they physically interact with it.
01Hands on the screen
Almost every action, from music to car settings, meant tapping through the touchscreen.
02Eyes off the road
Every tap pulls the driver’s attention away from the road, even if only for a second.
03Distracting and unsafe
Reaching for a screen while driving is distracting and potentially unsafe.
04No hands-free option
There was no mobile voice assistant to control the car in a seamless, convenient way.
How might we let drivers control their Tesla with their voice, so their hands stay on the wheel and their eyes stay on the road?
Research
We focused on how a voice interface could fit into the Tesla mobile app, so owners can interact with their vehicle through natural language commands.
We started from the app’s home screen, where drivers already check the car. Voice had to reach everything here without a single tap:
Car status: battery, range and temperature
Information: engine, climate and tires
Navigation and trip history
Music and media
The home screen voice had to cover
Designing Aurora
Before writing a single line of dialogue, we set guidelines for who the assistant is.
NameAurora
Short, friendly and easy to say as a wake word: “Hey Aurora”.
LanguageNatural English
Everyday phrases, not robotic commands.
VoiceMale and female
Drivers can choose the voice they are most comfortable with.
AccentClear and natural
Easy to understand over road noise and music.
RoleA companion in the car
Like a real person, Aurora can ask for and give information based on the situation, remember details from the conversation, follow up, and handle specific requests.
User goals
Four things a driver should be able to do by voice alone, each shown in the prototype.
01Play music or check the car“Play The Scientist by Coldplay.”
02Switch to autopilot“Change the car mode to autopilot.”
03Ask a funny question“Do you like me?”
04Keep driving, uninterrupted“What speed are we going?”
4 elements of VUI
Every line Aurora says is built on the four elements of voice interface design.
01Statements and prompts
Aurora informs, then prompts the driver for the next input or action.
How can I assist you today?
02Local and global intent
It understands specific requests and general ones, to interpret each request accurately.
Play The Scientist by Coldplay.
03Segues and fallbacks
Segues keep the conversation flowing; fallbacks handle wrong or unclear input gracefully.
Okay, what do you want me to do next?
04State and branching
Responses adapt to the car’s state and the driver’s choices.
Are you sure? You are driving at 50 km/h.
See it in action
A walkthrough of the Aurora prototype, one full drive by voice:
Wake up“Hey Aurora!” and a warm welcome
MusicOpen music, play a song, stop it
AutopilotA safety check before switching
On the highwaySpeed, lane and route on request
Traffic aheadAurora advises switching to manual
GoodbyeDistance travelled and a friendly sign-off
Conversation flow
The full script behind the prototype, scene by scene.
01Wake up
DriverHey Aurora!
AuroraWelcome aboard, driver. I am Aurora, your intelligent vehicle companion. How can I assist you today?
AuroraPlease let me know your destination or any other request you may have.
02Music
DriverOpen Music.
DriverPlay The Scientist by Coldplay.
DriverStop playing.
AuroraOkay, what do you want me to do next?
03Car status and autopilot
DriverShow the car status.
DriverChange the car mode to autopilot.
AuroraAre you sure? You are driving at 50 km/h.
DriverYes.
AuroraFasten your seat belt. Your Tesla is changing to autopilot. It will take two minutes.
AuroraThe autopilot is switched on.
04On the highway
DriverWhat speed are we going?
AuroraLet me help you. I am driving at 100 km/h, in lane 3 on Highway 401 to Toronto.
05Small talk and traffic
DriverHey Aurora, will you marry me?
AuroraSorry, I think you should save yourself for someone who is more of an actual human being type. Should I continue in autopilot mode?
AuroraYou are in autopilot mode on Highway 401, and I foresee traffic in 15 minutes.
DriverDo you like me?
AuroraLet me reduce the speed. Please get ready to shift to manual, since there is traffic ahead.
AuroraI advise you to change to manual.
06End of the drive
DriverHow many kilometres have you travelled so far, Aurora?
AuroraYes Kavitha, we have travelled 20 km so far.
AuroraThank you for driving with me. I had a good drive with you today. Good night!
Design details
The screens stay calm and dark, so they never compete with the road.
A voice you can seeA purple wave moves while Aurora speaks, with her words written underneath.You were heardThe driver’s question appears on screen, so they know Aurora understood.Familiar where it countsMusic looks like a music app: albums and recent songs, one command away.
Takeaways
01Design for ears first
Short, clear lines matter more than screens when the driver can’t look.
02Safety before speed
Big changes, like autopilot, always get a confirmation step.
03Personality builds trust
A little humour makes the assistant feel like a companion, not a menu.
CIBC MOBILE BANKINGBudgeting, answers and transfers people can trust
UX / UI case study · Mobile app · Capstone
CIBC Mobile Banking
Redesigning the CIBC mobile app with budgeting, better FAQs and clearer international transfers, for a banking experience that’s easier, more transparent and more secure.
The redesigned CIBC app aims to set a new standard for usability, security and engagement: convenient, seamless transactions and strong security, with user-centred design for an intuitive, efficient financial experience.
14 weeksfrom research to prototype
3 featuresbudgeting, FAQs and international transfers
3 bankscompared: TD, RBC and CIBC
9 touchpointsin the user journey
The problem
Users faced challenges in three everyday tasks.
01Managing money
There was no easy way to set a budget, track spending or plan goals.
02Finding answers
The FAQs were hard to search and didn’t go deep enough.
03Sending money abroad
Currency conversion and fees were unclear during international transfers.
How might we make the CIBC app a place where customers can budget, find answers and send money abroad with confidence?
Our approach
New features: real-time currency conversion rates, transparent fee breakdowns and budgeting goals
A user path with the fewest clicks needed to get things done
Improve what exists, and add what’s missing, without losing usability or security
Design process
We followed the Double Diamond: two rounds of opening up and narrowing down, from the problem to a defined problem, then to the solution.
We held one-on-one interviews with a group of consenting users about their experiences, preferences and concerns with the enhanced features. Open-ended questions gave rich insight into where the CIBC experience could improve.
01People use the features
Most users actively used at least one of budgeting, FAQs or international transactions.
02Keen to help
Most were happy to take part in surveys, interviews or testing: a great source of ongoing feedback.
03Room to improve
Budgeting needed a more intuitive interface, FAQs more depth, and transfers clearer conversion and fees.
Competitor analysis
We compared the TD, RBC and CIBC apps on five criteria.
CriteriaTDRBCCIBC
User interface✓✕✓
Features😍Loved😐Neutral😠Frustrated
Performance✓✓✕
Customer support✕✕✕
User feedback✕✓✕
What it told us: CIBC’s interface held up, but its features frustrated users and performance lagged. No bank did customer support well, so there was room to stand out.
User persona
Raj Patel25 · CanadaInternational student, Master’s in Computer Science
Raj is an international student from India, determined to excel in his studies and embrace the multicultural Canadian experience. He balances part-time work, scholarship requirements and tuition while staying financially responsible. As a tech-savvy person, he relies on his smartphone and the CIBC app for daily transactions and budgeting.
SingleNo kidsStudentIncome from part-time work and scholarships
Goals
Academic excellence, cultural exploration, financial responsibility, better language skills and a strong network in Canada.
Motivation
To excel academically, embrace Canadian culture and manage his finances responsibly.
Challenges
Balancing part-time work, scholarship requirements and tuition fees can be overwhelming, along with cultural adaptation and language barriers.
Frustrations
Occasional language barriers and adapting to a new culture, especially the cold Canadian winters.
Sources of info
The CIBC app for daily transactions, and his university’s international student community for cultural insights.
How he copes
Manages his money through the CIBC app and stays active in the international student community for support.
Interests
Academics, cultural exploration and growing his social network.
Also
Tech-savvy: he uses his smartphone for most daily tasks.
Journey map
What Raj expects, and where the app can meet him:
Raj expectsAcademic excellence→ The Budgeting section helps him manage money for his studies.
Raj seeksCultural exploration→ The FAQs give him insight into local culture.
Raj aims forFinancial responsibility→ International transactions help him make informed decisions.
Raj’s journey · 9 touchpoints
Task
01Login
Opens the CIBC app and logs in with their credentials.
02Menu
Navigates to the main menu of the app.
03Move Money
Selects “Move Money” and sees options for different transactions.
04Newcomer section
Discovers “Newcomer” under Move Money: budgeting, FAQs, international transactions.
05Budgeting
Opens budgeting tools to create a budget and track expenses.
06FAQs
Finds a categorized list of frequently asked questions.
07International transactions
Explores transaction history and currency exchange.
08Feedback and assistance
Gives feedback or asks for help along the way.
09Logout
Logs out after finishing their tasks.
Feeling
😐🤔🙂😃🤓🙂😃😃🙂
Neutral
Curious
Interested in managing money
Intrigued
Eager to manage finances
Content, with easy access to information
Empowered for global banking
Happy
Satisfied and secure
Opportunity
Streamline login with biometric options for convenience and security.
Optimize the menu layout so key sections are easy to find.
Give each transaction option a clear, short description.
Highlight the Newcomer section with a short intro or tooltip.
Offer budgeting templates or wizards to simplify setup.
Add a strong search to the FAQs and keep them up to date.
Add guides on foreign exchange and international banking.
Simplify feedback and make sure replies are prompt.
A friendly logout, with an option to save login details.
