project overview

Omou is a tutoring management service designed for digital learning. We aim to free tutoring business from time-consuming processes and disparate systems, and focus on building a community around learning.

I joined this venture in mid-2019, excited to work with developers to bring a functioning product to real users. I’m happy to say I’ve taken on so much more, helping shape the direction of the product and utilizing my Master’s education to implement design processes and methods to strengthen our team’s workflow.

team

Omou Design Team
Product Feature Team

timeline

Jul 2019 - Present
Ongoing

tools

Figma
Miro, Jira

My roles

Designer → Design Team Lead

Early on, I was a designer working on core features of the MVP. As our product and team grew, I transitioned into a lead role where I redefined and led Omou’s design process and design hand-off.

Product Team Lead

Managing a sub-team of developers and designers to design and implement 2 main features:
Course Registration and Payment System
and Attendance Tracking

Omou as a Product and a team

Our Values

✦

Transparency

Providing a single source of truth for all admin processes.
Modernizing payment and scheduling processes to reduce human errors.

✦

Communication

Providing a central hub for parents, students, and staff alike.
Keeping your customers informed and everyone in the loop on student progress.

✦

Intuitive

Making online tutoring accessible and seamless to enhance student-teacher engagement.

The Product

Our mission is to create a shared, collaborative, and digital space for students, parents, educators, and learning businesses to further cultivate strong learning communities across the globe.

The Team

We are a fully remote team founded by former tutors and students who recognize vast accessibility of content and connectivity opportunities enhancing the learning and teaching experiences.

The Omou team!

Learn about my work

While my role and responsibilities have evolved at Omou, I want to share 2 projects where I have taken a lot of ownership to improve our team processes and product.

Creating a Design System

why use a design system now?

As a small team of young designers, the first year working on Omou was full of trial and error. We designed a lot of features and fast. But as our team grew and our product gained complexity, we realized that neglecting to invest in our design system was coming back to haunt us. We found that inconsistency and the lack of guidelines within design led to ambiguity and free rein within development.

Our Problems

✦

Disorganization of design workspace and lack of design standardization.

✦

Poor communication between design and development, resulting in built features that do not match the designs visually.

Our Goals

To focus our attention and discussion more around the user flows and information hierarchy before getting into the nitty gritty design details

Help designers think about the product holistically rather than their individual features to create a more seamless user experience.

Reduce complexity and ambiguity for development — if rules around component usage and space are laid out, we can reuse components effectively and save on development time

my role & PRocess

I worked with another designer and 4 frontend developers over the course of
3 months to research, audit, build, and implement the design system.

Research best design system practices

Never having built a design system for both designers and developers of a complex and growing platform, I dove into research. I read and watched articles, books, and videos to learn the process of constructing a design system and how to put it into practice.

Google Material Design

8pt Grid System

Building Design Systems Series in Figma

Design Systems Publication

Audit the current platform

The next step was to take stock of everything we have designed so far. Once we grabbed every button, icon, and design pattern, we grouped them into categories. Seeing them side-by-side, it was apparent we had an excess number of button and drop-down menu styles, an inconsistent application of font weights, and too many single-use icons.

Button Audit

We ended with many different button styles when designers were siloed into their own product feature teams and there was no design team review process.

Set up building blocks

To create the building blocks of our system, we had to redefine our typography and color palette. We considered how each text style and color could be used based on our content and information hierarchy.

Consolidate and redesign components

I was then able to reduce the redundant styles and consolidated most of our design patterns to have at most a primary and secondary style. I used an 8pt grid spatial system to craft pixel precise, reusable components for buttons, badges, tabs, toggles, and drop-down menus.

Button Redesign

We decided on a standardized button design for all text buttons across the Omou platform. While we used one text style across all buttons, we used color to establish a primary and secondary button.

Create workspace and documentation

The next task was to make the design system practical for the design team and development team to use.

For Designers

To be practical for designers, I spent time labeling and organizing everything, so any designer can quickly locate any UI element. Along with creating a functional component library, I wrote specifications describing the use cases for each component and how they can interact with each other.

Omou's Figma Workspace

With this workspace, designers have all the necessary pieces to put together their pages. They can drag and drop a button and quickly switch between text styles.

Now they can focus on more complex problems regarding user interactions, rather than spending time on choosing colors or spacing objects.

For Developers

To be practical for developers, it was important to learn how I could break down designs and translate it into properties to ensure there was less ambiguity. I took a first pass at writing documentation on how to build the design patterns, keeping in mind it would evolve once I met with the dev team.

Terminology

To think like a front-end developer, I brushed up on CSS terminology and incorporated that language into my documentation.

Redlining

I added redlines and annotations to larger components in order to communicate precise margins, padding, and spacing between the UI elements within a component.

Sync with development and evolve

Developer feedback was vital in improving the design system. They helped provide a better understanding of data, edge cases, and a familiarity with parts of the system that I may have missed.

We established a good system of communication for feedback and updates between design + dev: Weekly meetings, online discussion, and routine document revisions.

Front-end Sync Meetings

I join the front-end migration team meeting once a week to review demos and answer any questions.

Teams Discussion Channel

I address any new questions that arise throughout the week in our Teams Channel.

Updating Documentation

I go back to update both the components and the documentation so all changes are reflected in the design system. This way developers can easily reference the system rather than hunting through old messages or notes.

project Reflection

While this process is ongoing, the experience of creating and implementing a design system has taught me to use systematic thinking in building a complex product.

My takeaways

Observe development operations and communicate using a shared language to reduce friction between design and development teams.

Actively identify opportunities to create flexible or simplified components to reduce workload and time on development.

Establish a good communication system so the design system stays current and everyone is aware of the changes.

Work in progress!

My team is still currently building out our new features but I've been working on designing Omou's course registration and payment system, as well as the attendance tracking feature.

I'm happy to chat about my work on this project! Let's connect.

Selected Work

delightful things✨ — Master's Capstone

Behind the glass — augmented reality

OMOU — a central hub for online learning

Ohno!