Acquilingua • UX designer • Platform redesign
Revamp of AI Chatbot Language Learning Platform
Revamp of AI Chatbot Language Learning Platform
ROLE
ROLE
UX Design Intern
UX Design Intern
Team
Team
1 UX design intern (me)
2 co-founders
1 UX design intern (me)
2 co-founders
TIMELINE
TIMELINE
Mar 2026 - Now
Mar 2026 - Now
Tools
Tools
Figma
Figma
Figma Make
Figma Make
Codex
Codex
THE context
THE context
THE context
Manoa Now is a student-led marketing organization connecting UH Mānoa with the community.
AcquiLingua is an AI language learning chatbot
AcquiLingua is an AI language learning chatbot
AcquiLingua's AI tutor holds real conversation with you in your target language, calibrated to your level and your interests.
01 • THE PROBLEM
01 • THE PROBLEM
01 • THE PROBLEM
The interface was confusing and complicated to users
Users are lost navigating the existing app & aren't satisfied visually.
The interface was confusing and complicated to users
Many functions of the app were built in were hard for users to understand such as choosing lessons, emoji usage, and the buttons on the main chatbot interface.
The news section had cursive text that made readability hard. There was a lack of type hierarchy and the design had large containers that took up 1/3 of the screen.
To better understand the problem, I had users test the platform
I conducted 7 user tests to observe user patterns, and I saw a recurring theme. Users were frustrated with the long loading time, outdated design look, and didn't understand what the buttons functions were.
USER TESTER 1
"When it revised my message, I couldn't even see my original message so I don't know what I did wrong. What's stopping people from just using ChatGPT to learn."
USER TESTER 2
"I think it could look more modern. This is confusing as to how this would be better than any other language learning chatbot."
USER TESTER 3
"Little antiquated, not a modern website even though there are aspects that are. Landing page doesn’t look good and the globe isn't obvious to me that this is where I choose a language."
USER TESTER 4
"Put the settings in the main nav bar so we don't have to go back. I wish there was suggested questions the chatbot asks. I didn't expect it to correct my grammar and it's a little offensive."
There was overwhelmingly negative opinions regarding the functionality and feel of this chatbot. A lot of users were not satisfied and wanted to use ChatGPT or another chatbot instead.
02 • The solution
02 • The solution
I built an intuitive & guided user interface with interactive games
I built an intuitive & guided user interface with interactive games
IMPACT
01 — Integrated research, leading decisions from data
02 — Delivered designs tested to work for front end
03 — Aligned the newsroom with branding
04 — Turned design decisions into research-backed choices
IMPACT
IMPACT
01 — Conducted 7 user tests to uncover where learners were getting stuck, confused, or losing motivation
01 — Integrated research, leading decisions from data
02 - Audited the onboarding flow and competitor platforms to find opportunities for making the first-time user experience more intuitive, accessible, and engaging.
02 - Audited the onboarding flow and competitor platforms to find opportunities for making the first-time user experience more intuitive, accessible, and engaging.
03 — Aligned the newsroom with branding
03 — Aligned the newsroom with branding
04 — Turned design decisions into research-backed choices
04 — Turned design decisions into research-backed choices
FEATURE 01 • Carousel function to show latest news & visual categories
FEATURE 01 • New, professional, & intuitive interface w/ engaging visuals
FEATURE 01 • New, professional, & intuitive interface w/ engaging visuals
FEATURE 02 • Structured article templates with type hierarchy and share functions for users
FEATURE 03 • Revamped dining section layout with switch btw. facilities
FEATURE 04 • New calendar interface showing events & users bookmarked events
FEATURE 03 • Holiday hour article template w toggle drop downs & structured containers w/ brand-aligned visual elements
FEATURE 02 • New map interface w/ switches between dining, facilities, & deal offers
FEATURE 04 • Special menu template with structured containers that align with branding of Zippy's
FEATURE 04 • New calendar interface showing events & users bookmarked events
FEATURE 04 • New calendar interface showing events & users bookmarked events
FEATURE 05 • Sweepstakes template with toggle drop downs of content categories
FEATURE 05 • Clubs & RIO's section clearly sorted with popup w/ info & visuals
02 • DESIGN PROCESS
We didn't have enough time to conduct data
We didn't have enough time to conduct data
I was tasked with redesigning the news section and 5 templates, but the internship timeline was 3 months.
I joined in during the mid-design process. Rather than restarting, I gathered more information on how to elevate the app.
My role
My role
UI Design Intern
• Conducted the end-to-end redesign for the News section
• Audited competitors news sections to gain data and see layouts that work
• Used Builder.io to test design functionality on backend
• Directed the mid-to-end redesign
• Planned the research approach & analyzed data to find user pain points & opportunities
• Regularly oversaw the high-fidelity execution of the design
My UI Design Process
This was my second UI role and this was the process I did.
This was my second UI role and this was the process I did.
01 / OBSERVE
01 / OBSERVE
01 / OBSERVE
Observations
& Audit
Observation
& Audit
Observation
& Audit
Locate friction and inconsistency
Locate friction & inconsistency
Locate friction and inconsistency
02 / COMPARE
Competitor Audit
Find patterns worth adapting
→
02 / COMPARE
02 / COMPARE
Competitor Audit
Find patterns worth adapting & help users
Find patterns worth adapting & help users
→
03 / EXPERIMENT
03 / EXPERIMENT
03 / EXPERIMENT
Lo-fi Design
Lo-fi Design
Testing different layouts & what works
What are our students saying?
Testing different layouts & what works
04 / MAKE & REFINE
Hi-fi Redesign
Apply insights to existing UI
05 / TESTING
Prototype & Test More
Connect & refining user flows
06 / SHIP
Deliver & Hand Off
Finalizing design then handoff
→
→
→
↓
06 / SHIP
06 / SHIP
Deliver & Hand Off
Documenting, finalizing, & handoff.
Documenting, finalizing, & handoff
←
05 / TESTING
05 / TESTING
Prototype & Test More
Connect & refine user flows
Connect & refine user flows
←
04 / MAKE & REFINE
04 / MAKE & REFINE
Hi-fi Design
Choose best layout & refine
Choose best layout & refine
03 • RESEARCH & SYNTHESIS
I audited Zippy's current News section and noticed problems with accessibility, sizing, and visual hierarchy.
Searching for pain points & auditing competitors to see what works
I audited Zippy's current News section and noticed problems with accessibility, sizing, and visual hierarchy.
Benchmarking newsroom patterns to make Zippy's news easier to browse
I conducted a survey with 36 respondents on the existing app
I audited Popeyes, Subway, and Apple Newsroom to understand how brand-led newsroom pages help users scan updates, recognize story types, and move from a featured story into deeper articles.
Among 36 respondents, clarity & accessibility rated highest. Motivation & satisfaction posed the strongest redesign opportunity.
They all had engaging and structured layouts that focused strongly on visual hierarchy with contrast of items and gave the user options to share and engage with the article.
To get a better understanding of user patterns, I found secondary research
I researched into user patterns and their behavior with scanning content and how visuals impact their experience.
I audited Popeyes, Subway, and Apple Newsroom to understand how brand-led newsroom pages help users scan updates, recognize story types, and move from a featured story into deeper articles.
VISUAL CATEGORIES
aNN/g measured scannable web writing as 47% more usable, and found users read only about 20% of text on a page.
Decided to: Indicate clearer headlines, date, body, & CTA levels with info breakdowns in toggle drop downs.
aNN/g measured scannable web writing as 47% more usable, and found users read only about 20% of text on a page.
Decided to: Indicate clearer headlines, date, body, & CTA levels with info breakdowns in toggle drop downs.
TYPE HIERARCHY
NN/g found that 79% of users scanned new web pages while only 16% read word-by-word.
Decided to: making categories visually obvious so users could quickly recognize news, specials, holiday hours, and sweepstakes.
NN/g found that 79% of users scanned new web pages while only 16% read word-by-word.
Decided to: making categories visually obvious so users could quickly recognize news, specials, holiday hours, and sweepstakes.
Sources: Nielsen Norman Group - Auto-Forwarding Carousels, Visual Hierarchy in UX, F-Shaped Pattern of Reading, Card Sorting; Apple Newsroom; Subway Newsroom.
04 • Lo-Fi design
04 • Lo-Fi design
From there, I built layouts that felt intuitive for Zippy customers
From there, I built layouts that felt intuitive for Zippy customers
Given the information and considering Zippy's target market, I aimed to make the layout intuitive and visual hierarchy strong to focus priority on certain elements.
The product had a semi-established interface, so I focused on UX suggestions based on data.
The product had a semi-established interface, so I focused on UX suggestions based on data.
I sketched lo-fi layouts for the directory and options that would be most engaging.
• Carousel with article highlights
• Two column layout
• Organized & smaller containers
The product had a semi-established interface, so I focused on UX suggestions based on data.
From there, I created lo-fi wireframes of how the layouts would look like. We ended up going with option 2 as it would work better responsively and allow the content to fully take up the page rather than getting too small.
From there, I created lo-fi wireframes of how the layouts would look like. We ended up going with option 2 as it would work better responsively and allow the content to fully take up the page rather than getting too small.
The product had a semi-established interface, so I focused on UX suggestions based on data.
To get a better understanding of user patterns, I found secondary research
I conducted a survey with 36 respondents on the existing app
I researched into user patterns and their behavior with scanning content and how visuals impact their experience.
VISUAL CATEGORIES
aNN/g measured scannable web writing as 47% more usable, and found users read only about 20% of text on a page.
Decided to: Indicate clearer headlines, date, body, & CTA levels with info breakdowns in toggle drop downs.
TYPE HIERARCHY
NN/g found that 79% of users scanned new web pages while only 16% read word-by-word.
Decided to: making categories visually obvious so users could quickly recognize news, specials, holiday hours, and sweepstakes.
Sources: Nielsen Norman Group - Auto-Forwarding Carousels, Visual Hierarchy in UX, F-Shaped Pattern of Reading, Card Sorting; Apple Newsroom; Subway Newsroom.
04 • final design
04 • final design
Building the hi-fi News section while also testing development on front end
Building the hi-fi News section while also testing development on front end
Once given the green light, I started building the design in high fidelity. I also used the Figma extension Builder.io to test how my design would look on the front end.
The product had a semi-established interface, so I focused on UX suggestions based on data.
The product had a semi-established interface, so I focused on UX suggestions based on data.
How do we integrate strong visual hierarchy and make the page easily scannable?
How do we integrate strong visual hierarchy and make the page easily scannable?
• Reduced amount of text in article containers
• Integrated carousel with captions for easy digestion
• Made categories visual for easy visualization & streamlined flows
• Changed cursive font to sans serif for readability
Users liked:
• Student essentials is easy access on the main page
• We kept it & changed it to be professional & minimal
Users liked:
• Student essentials being easy access on the main page
• We kept it & changed it to be professional & minimal
Let's integrate strong type hierarchy and the ability to share it into the article template
Let's integrate strong type hierarchy and the ability to share it into the article template
Article templates w/ type hierarchy and accompanied visuals
Before, the News section had: no date, no category, too much spacing
Now there is:
• Category at top
• Date
• Structured hierarchy to information
• Accompanying visual
Before, the News section had: no date, no category, too much spacing
Now there is:
• Category at top
• Date
• Structured hierarchy to information
• Accompanying visual
Holiday Hours template broke down into categories and toggle drop downs for info on hours
Holiday Hours template broke down into categories and toggle drop downs for info on hours
Article templates w/ type hierarchy and accompanied visuals
Now there is:
• Categories broken down into different holidays
• Toggle drop downs for certain days of the holiday
• Container to highlight main gift card item + aligned with brand identity
Now there is:
• Categories broken down into different holidays
• Toggle drop downs for certain days of the holiday
• Container to highlight main gift card item + aligned with brand identity
Food specials template with containers for information and visuals with a CTA to order
Food specials template with containers for information and visuals with a CTA to order
Article templates w/ type hierarchy and accompanied visuals
Features of the specials template:
• Containers with background visuals aligning with brand identity
• CTA to order it directly from the article
• Type hierarchy for information priority
• Visuals for users to easily see item
Features of the specials template:
• Containers with background visuals aligning with brand identity
• CTA to order it directly from the article
• Type hierarchy for information priority
• Visuals for users to easily see item
Sweepstakes template with toggle drop down info breakdown & header visual
Sweepstakes template with toggle drop down info breakdown & header visual
Article templates w/ type hierarchy and accompanied visuals
Features of the sweepstakes template
• Togglable dropdown for info breakdown, sorting, and visual variety
• Type hierarchy and structure integrated into design
• Visual header for engaging section to convey info & align with branding of Zippy's
Features of the sweepstakes template
• Togglable dropdown for info breakdown, sorting, and visual variety
• Type hierarchy and structure integrated into design
• Visual header for engaging section to convey info & align with branding of Zippy's
Learnings
01 - Be clean & concise with auto layout
01 - Be clean & concise with auto layout
02 - Research backed decisions are crucial, don't guess
02 - Research backed decisions are crucial, don't guess
03 - Communicate frequently with stakeholders to align their needs and users needs
03 - Communicate frequently with stakeholders to align their needs and users needs
06 • Project TAKEAWAY
06 • Project TAKEAWAY
Zippy's was my second UI Design Intern experience and it taught me valuable lessons about how to build a product that aligns with stakeholders needs. I wish that I could have acquired more primary data from Zippy's consumer base to produce a more tailored experience for them. Overall, this was a great experience and I learned a lot.
This was the first project where I led and also did this much user research. I felt a stronger sense of certainty in design decisions and leading my team with confidence.
Learnings
01 - Be clean & concise with auto layout
02 - Research backed decisions are crucial, don't guess
03 - Communicate frequently with stakeholders to align their needs and users needs
Contact: Laureemytam@gmail.com
Say hi! :]
