top of page

Service and Learning Design: Project Overview

iMac 24 inch-3.png


Design an interactive learning experience for City employees, empowering them to provide language and communications access to constituents who speak languages other than English and/or have a disability.


Updated existing training material and prototyped a new self-paced training model on Figma to provide convenient, web-based training to City staff which they can access anytime, anywhere.


Training and Learning Design Fellow, responsible for redesigning existing training resources from a learner experience lens, accessibility workshop facilitation, innovating the training process



7.3% increase of interpretation requests in 3 months
11.96% increase in use of accommodations budget

Target demographic

Number of staff trained since June '22 (DOJ)

A log of accommodation services requested by City staff

*CART is a service in which a captioner uses stenography to turn spoken words into text. The text appears in real-time, while the words are spoken, for the constituent to read on an electronic device or on a projector screen.

**Our demographic data reports for Language and Disability show the data from the 2016-2020 American Community Survey, Public Use Microdata Sample (PUMS), BPDA Research Division Analysis.

In this role I reported to the Learning and Development Coordinator at the Mayor's Office of Language and Communications Access, City of Boston.

I wore several hats based on my previous work experience, and proactively contributed to several operational, service, and process-based changes to a small team which is gradually scaling.


Design Process

Design principles I followed:

  • Put user's needs first.

  • Add evaluation to the training model.

  • Use minimum clicks to reduce interaction cost.

​Process Overview:

  • Accessible redesign of training material

  • Training Facilitation

  • Solutioning for training attendance and accountability gap

  • Designing a self-paced training prototype on Figma

  • Prototype structure breakdown


  • Limited Time


Project Duration:

  • 4 weeks


Tools used:

  • Figma

  • Shotsnapp for mockups

  • Zoom

Trining Design

Training Design

Increased the accessibility of existing training:


I achieved this by-

  • Increasing font size

  • Ensuring visual contrast is appropriate

  • Reducing usage of italics

  • Left indenting texts to increase readability

  • Using bullets to chunk content meaningfully to increase learner retention.


Additionally, I added S.M.A.R.T objectives to the beginning of the training to help the audience set expectations for the session.


More interactive elements were added in speaker notes (with storytelling elements), and scenarios that support the audience’s mental model and help them relate and understand better.


Trained the Equity cabinet:


OLCA as an office is part of the Mayor’s Equity cabinet and we started training the department/division heads and senior staff on language accessibility and accommodations. There were very important questions raised at the end of the training about translation quality assurance, and impact of a City-wide budget allocation process change.

Feedback zoom call.png

Research (Ling, Jonathan & Schaik, Paul. (2007) shows that wider line spacing leads to better accuracy and faster reaction times 

Research (Ling, Jonathan & Schaik, Paul. (2007) shows that left-aligned

text leads to better performance.

Developed self-paced training prototype on Figma:


The team was facing difficulty in holding other City departments accountable for attending training. Policy and ordinance states that City must provide language and communications access accommodations to individuals who speak LOTE (Languages other than English), and therefore all City staff must be trained on the process.





" We are understaffed at the moment, taking time out for training is difficult - we cannot enforce this. "

" - staff is out in their neighborhoods, it's inconvenient to be getting on Zoom on the field "

" The timings are never right for the training, if something of higher priority comes up, the staff cannot attend training even if they have registered. "

" With budgeting season and holidays around the corner, it's difficult to track all my staff's trainings. "


Frame 8.png
Frame 9.png
Frame 10.png

Screen-recording of Self-paced learning prototype created on Figma, illustrations procured using Blush plugin, 'Stuck at Home' package by artist Mariana Gonzalez

Structure Breakdown

iMac 24 inch-3.png


This frame aimed to introduce the user to the overall topic of the training.

Design feature specifications:

1. Titled "How To" to explain clearly what the outcome of the training would be. The user now understands that by the end of the training they would know how to implement language and communications access.

2. The main call-to-action of this frame is the 'Start training', which has been highlighted using brand color 'Freedom Trail Red' (hex #FB4D42).

3. Context was provided to the user by using the department logo and contact details so City staff can have an understanding of which internal department was conducting this training.

This frame aimed to provide the user visibility, and therefore control over the structure of the course they were about the start. 

Design feature specifications:

1. Designed a visual indication of the pitstops in the learning journey.

2. Added a clear instruction "Press NEXT to go through each of these modules" to indicate the next step for the user. The button name in the instruction was boldfaced and in all caps to closely match the actual button - this makes it easier for the user to locate what they are looking for.

3. Visual consistency, the NEXT button was consistently placed on the bottom right throught the learning experience.

iMac 24 inch-4.png


iMac 24 inch.png


This frame fulfills the 'Evaluation' part of the learning process. To ensure learner retention and refresh their memory, a knowledge check was added at the end of each module. 

Design feature specifications:

A clear instruction tells the user to select one option and click the Continue button. This action will lead them to a page where they will get the result - correct or incorrect, and a hint/explanation.

KT and Learning


In spite of the fact that government and corporate audiences tend to be different, the UX community is a very diverse group of people: all with the common goal of helping solve problems to make people’s lives easier. This internship was my first experience in a public-facing role.

I have always been passionate about giving back, so applying to this position was quite natural to me. I had a chance to meet and discuss civic challenges with leaders of multiple departments and understand the 'why' behind steps being taken.

Please refer to my internship journal to read a detailed week-by-week narration of my experience. This internship portfolio of work products contains links to deliverables, workflows and processes I contributed to, ending with a performance evaluation.

Also, here's a cool thing that happened as a direct result of our accessibility efforts.


Selected Projects

My Clients Mockup 2.png

Oct 2022

Secure portal for insurance agents to conduct business efficiently

UX Design, user flows, data visualization, hi-fidelity prototyping, Figma. greenfield project, sole UX Designer, insurance industry


Jan to June 2021

Instructional Design & Content Strategy

Walmart Academy App Redesign : Learning Services

retail learning design, strategy, nano learning, Adobe Experience Manager, ADDIE, Agile project management 

cover pic.png

Oct to Dec 2022

Service and Learning Design

Mayor's Office, City of Boston

civic tech, accessibility workshop facilitation, Figma, service design, instructional design, UX design

May 2022

Prototyping and Interaction Design

Class Project: Mobile healthcare application

healthcare application, Figma, sketches, rapid prototyping, wireframing, usability testing

Login new 5.png
Left login.png

Sep to Dec 2022

Multi-Modal Product Design

Class Project: Haptic eyewear to increase road safety

haptic wearable, Arduino uno, research documentation, functional analysis, morphological chart, physical product prototyping, usability testing

bottom of page