English language teaching made sustainable.

Linguini

Linguini is an iOS app that helps reduce the amount of time EAL (English as an Additional Language) Teachers spend preparing activities outside of their paid hours. It provides users with the capability to administer pre-created activities to groups or individuals.

Example

Before diving in, here is a…

Logistical overview:

  • Project type:

    Academic

  • Duration:

    10 Weeks (January-March 2022)

  • Role:

    UX Researcher & UX/UI Designer

  • Platform:

    iOS (Mobile App)

  • Tools:

    Figma & InVision

  • Contraints:

    Tight timeline & WCAG AA Standards

Project Brief

Over the duration of 10 weeks, the UX Design bootcamp I attended at BrainStation required students to complete an end-to-end digital design project. The design project involved researching a human-centric problem and incorporating user feedback and thoughts.

How did I start?

I approached the project in a non-linear fashion, using a design-thinking process. User-centered design was at the heart of all my decisions, so naturally, iterations based on multiple rounds of feedback was imperative.

Empathize

Inspiration

Once upon a time in a past life I was an EAL Teacher, which was my initial inspiration. However I tried my best to keep my thoughts out of the mix, and to instead focus on what current EAL Teachers would need today. So I researched, listened, iterated, and tried to create according to user needs.

Problem Space

I began by researching using the internet in order to understand if there were existing pain points or problems that affected EAL Teachers. The following is the problem space, which was founded through preliminary research:

According to a research article by Sherry Breshears, for decades, over two thirds of EAL (English as an Additional Language) Teachers haven’t been paid for preparation time, and half of them spent 10-30 hours a week working outside of their paid hours. Although some solutions exist, there is still untapped opportunity to further reduce the workload of EAL teachers.

Secondary Research

After understanding the general problem space, I conducted further internet research in order to have a more robust understanding about the matter and how it impacts EAL Teachers. The following are a few snippets the main findings:

  • “25% of teachers leave teaching altogether because of burnout.”

    English for Asia: TESOL (2016)

  • “2/3 of educators are not paid for preparation time.”

    Breshears, S. (2019)

  • “51% of teachers are unhappy about the heavy workload.”

    Hancock, Carl B., and Lisa Scherff. (2010)

Primary Research

In order to better understand the day-to-day problems that EAL Teachers may face interviews were conducted with 5 EAL Teachers, with the goal of understanding the following:

  • What the day-to-day work and life of an EAL Teacher looks like.

  • What their biggest pain-points were.

  • What motivated them to teach.

When conducting interviews I created a casual and judgement free environment⁠—the following are further details about the interview:

  • The Who

    5 current EAL Teachers living in North America were interviewed.

  • The Method

    The interviews were decontextualized⁠—the product wasn’t used for the interviews.

  • The How

    The interviews were conducted over video call & took place in the manner of open-ended questions.

Define

Primary Persona

The primary persona was created after interviewing participants. The following persona reflects the frustrations, behaviours, goals, and characteristics of the participants that were interviewed:

Design Challenge

The interviews and the persona helped to inform the following design challenge:

How might we reduce the amount of time EAL teachers spend preparing activities outside of their paid hours in order to provide them with a better work/life balance?

Experience Map

Understanding Ingrid’s process regarding administering EAL activities helped me to better understand the areas that she could benefit from having a digital solution in place, therefore the following Experience Map was created:

Affinity Map

Once the interviews were complete, common themes and insights were derived from them. This was done by creating the following affinity map using sound bites from the interviews:

Themes and Insights

The following themes and insights were derived from the Affinity map:

Preparing

EAL Teachers spend unpaid time preparing—they need more creative resources so that they can spend less time preparing.

Planning

EAL Teachers spend unpaid time lesson-planning—they need pre-made lesson plans to reduce the time spent planning.

Marking

EAL Teachers spend unpaid time marking—they need a product that can lessen the time they spend marking.

Selected Theme & Insight

The “Preparing” theme and its corresponding insight were chosen as a result of the user interviews—solving for it would best serve the users.

Ideate

User Stories and Epics

User stories were created based on the persona and the selected theme/insight, they were sorted and grouped under the following epics:

Epic One

Administering Pre-created Activities.

Epic Two

Being motivated & motivating students.

Epic Three

Providing a customized education experience.

The “Administering Pre-created Activities” epic had the most user stories and was therefore selected. The selected user stories within the epic were then broken into tasks which helped inform the design. The following is the epic and it’s corresponding user stories and tasks:

Task Flow

The tasks that were derived from the relevant user stories were used to inform the Task Flow. The following Task Flow Diagram helped to inform content components and the connections between them:

Prototype

Solution Sketches

After creating multiple exploratory sketches, I came up with the following solution sketch because it seemed to best address the users’ needs:

Mid-Fi Prototype

The solution sketch helped inform the initial mid-fi prototype below (Note: the mid-fi prototype is version 1 of 3):

Test

Usability Testing

2 rounds of usability testing, each consisting of 5 users was conducted in order to obtain practical real-time feedback—the feedback was incorporated to improve the design.

The usability testing was based on 1 persona, and users were provided with the following scenario:

As an EAL Teacher you would like to administer a pre-made in class activity using Linguini for your “Beginner Class 1” so that you don’t have to spend unpaid hours planning and preparing one. You are a brand New User, however you’ve already created an account, added classes, and registered your students.

Feedback based Revisions

Major Change One: More Sorting Options

Problem: The original prototype only had the option to sort by ratings. Users had mentioned that they would need other sort by options ex. newest.

Solution: A sort by button with multiple sorting options embedded within it, was added to the revised prototype.

Major Change Two: End Activity Button

Problem: The Original Prototype had no option to end an activity. Users had mentioned that they would need to be able to end an activity in case something came up.

Solution: An end activity button was added to the revised prototype.

Refine

Brand Development

I began developing a brand by first selecting adjectives that would be pleasing to the users—the adjectives helped to inform the mood board. However, I was initially unable to focus the mood board and create a cohesive vision—I realized that having too many adjectives created a scattered vision. So I landed on the following 8 adjectives and removed “whimsical” and “quirky” from the adjective list:

  • Creative

  • Playful

  • Engaging

  • Geometric

  • Bold

  • Energetic

  • Smooth

  • Vibrant

The following mood board was inspired by the 8 adjectives above:

The following colours were pulled from the mood board and adjusted so that they would have the same hues and the colour combinations would meet WCAG AA standards:

  • Primary Colour

    It’s used for buttons, backgrounds, confetti, and cards. #38099A is used for the active button state and #570EF1 is used for the inactive button state.

  • Secondary Colour

    Used for the navigation bar (header), the tool bar (footer), the background colour of the sliding modals, the confetti, and backgrounds.

  • Tertiary Colour

    Used for the remove button and the confetti. #990945 is the active state of the remove button and #F10E6D is used for the inactive state.

  • Functional / Supporting Colours

    Used for backgrounds, text, tool bar icons, and buttons. #121111 and #CACACA are used for active button states and #FDFDFD for the inactive state.

  • Brand Typeface

    After comparing typefaces of various ed-tech products I chose Lato because it comes in many weights, it is clear and the letters aren’t too wide.

  • Logo Font

    I chose the semi-bold Montserrat font because it is clean looking, easy to read, and modern since it’s sans serif, all of which are beneficial for the users.

I kept both the user and the Logo Typography inspiration board in mind when trying to sketch out different potential wordmarks using pencil and paper—I created 21 sketches before choosing the wordmark that would best serve the users and align with the brand.

Wordmark Exploration

Wordmark Selection

The rectangles above each letter “i” are yellow and meant to represent the linguine pasta⁠—I thought this introduced playfulness and creativity into the wordmark, which are both adjectives that inspired the mood board. The semi-bold Montserrat font that is used is clean, easy to read, and modern looking because it’s sans serif⁠—these traits are beneficial for the users. The following are the variations of the selected wordmark:

  • Selected Wordmark

  • Black & White

  • Reverse Black & White

  • Mobile App Icon

High-Fi Prototype

The high-fi prototype was the culmination of research, user input, UI and mood board inspiration, and multiple rounds of feedback based iterations.

Additional Platforms

Marketing Website

In order to raise awareness about Linguini and educate the users about its advantages, I designed a responsive marketing website—below are the desktop, tablet, and mobile web applications:

Future Plans and Thoughts

Future Plans

Research Secondary Persona

I plan to conduct both secondary and primary research to try and further understand the EAL Student perspective.

I believe this will help to inform the design steps necessary to further expand Linguini’s capabilities and to better serve the users.

Design Ratings Feature

I plan to find UI inspiration, wireframe, prototype, get feedback, and iterate on the ratings feature as many times as necessary.

Based on my research I believe this feature will benefit the primary user.

Make App Localization Friendly

Due to time constraints I was unable to focus on making Linguini localization friendly.

I believe that creating a localization friendly design from the beginning is a simple step to ensuring a product is future-proof.

Future Thoughts

I chose to visit the “Service Dog” Tarot because Linguini is an ed-tech product and I believe that education is a tool that can empower anyone.

Linguini could help refugees, limited English language proficient users living in a predominantly English speaking country, as well as many others.

To better facilitate the English education of the underserved population, future research should be conducted in order to inform multiple personas such as a refugee learning English.

Key Learnings

Reflections

Design is never finished

I realized that I tend to try and perfect designs. However when facing time constraints this is not always possible. So I kept challenging myself by a) time-boxing each task b) prioritizing tasks and features.

Visually, less is more

During the brand development I was excited to choose from a myriad of colours! But I realized following colour theory is not sufficient. I learned a) to use colour palette tools b) to be mindful of too much colour.

The more knowledge the better

As I’ve been learning, the I’ve realized there is always so much more to learn in order to be able to better serve the users needs, so I hope to a) read more books b) watch more videos about design.

Thank you for dropping by⁠, onwards digital wanderer!

Questions? Please contact me.