Every project by Bao To, a design engineer and studio artist in New York: AI-era product work, design systems, and full-stack builds, filterable by kind. Each entry opens a case study.
Designing a staff-patient communications & management system for nutritional science company.
ACTUALFOOD CASE STUDY
I have signed an NDA for this project. Therefore, this presentation will focus on my personal development progress and my design process.
Product Designer
Front-end Engineer
June - August 2024 (8 weeks)
Figma, Svelte, TailwindCSS
UI/UX
Design System
Branding
Front-end Engineering
Design Sprints
PROJECT OVERVIEW
During summer 2024, I worked in a fast-paced environment with the Design & Front-end Engineering Departments of ActualFood to design for a new super-application that they will be developing.
I participated in multiple design sprints, took on different roles within the Design department: creating user flows, wireframes, lo-fidelity and hi-fidelity mock-ups, as well as contributing to ActualFood's first ever design system and component library.
I also presented at design meetings with project managers & the CEO 2-3 times every week to show progress and discuss functionalities and accessibilities of the application.
TEAM
Jesse Kimotho
Design Manager
Victor Otieno
Design Manager
Bao To
Product Designer
Michael Roberson
Product Designer
CONTRIBUTIONS
DESIGN SPRINT PROCESS
I played an active role during design sprints, often either taking on the task of iterating on an individual core feature, or working on the design language & design system of the whole ActualFood App Suite.
I work with other designers & interns on the generation of UI & UX for the features we have on the task list. Occasionally, we go through new ideas that I or others come up during our own research, ensuring their feasibility & relatability to the current sprint's stage.
I communicate regularly with other designers on the progress over Slack and Google Meet, asking clarifying questions regarding requirements, and making sure that our deliverables are ready before the next presentation sessions. I also talk to software engineers to discuss database structure and technical requirements.
We present our progress twice a week to stakeholders, which includes the CEO and PMs of ActualFood. Common showcases include user testing of mock-ups, feature function discussions, or conversations about the app's philosophy. Oftentimes, I am in charge of presenting one feature and driving the following conversations.
We take extensive notes & documentation during the design and presentation processes. After meetings, we use the feedback and discussion notes to inform our next iterations & goals - which then lead to repeating these four steps until the end of the design sprint!
There were a lot of barriers in terms of terminologies and language between the design team and the stakeholders. Therefore, I had to think about different ways to efficiently present our progress during meetings, as well as direct the flow of the discussions to prevent scope creep.
Due to the remote nature of the team, we had to figure out a way to efficiently keep contact and update each other in order to efficiently move through the design sprints.
The design-first nature of this project means that I, as a designer, was given both the responsibility, and the opportunity to decide what the project is and what it can do, simultaneously carrying out the idea formation sprint and the design sprint.
CORE FEATURES
How do we communicate internally between staff members vs. with customers?
As a company-facing platform, this feature was one of the biggest concerns of the design process. I refined the User Interface of all the feature views. After many presentations and meetings, my changes and proposals for this feature also resulted in improvements to the design language and solidified color systems for the rest of the apps.
DESIGN SYSTEM
I researched other companies' design systems, and pitched the necessity of having a design system at the current stage to the PMs and CEO.
During the sprints, I took on the role of deciding all the states and indicators for basic components such as buttons, cards, messages, pop-ups. I researched existing UI/UX strategies, and came up with a way for ActualFood to represent their own company and visual guide in the app while strictly adhering to best UX practices.
I also worked with design managers to research and address the migration of components to ensure smooth transitions with minimal work required to reconnect all the instances, using Figma plugins and scripts.
As part of the design system formation, I took on the responsibility of formalizing how we use colors in the whole app suite. This also involves dealing with WHEN to use colors, and when to use other indicators of action and reaction for each component.
I formalized the color system, categorizing them into 6 main categories, separated by UI design basics, but also by application & location of use.
Created variants for components such as buttons, cards, lists based on these color and state changes.
PRESENTATIONS
One of the most important skills I learned during this internship is how to communicate and present my ideas and design work to others:
When showcasing progress on a specific feature.
During a discussion about general functions & use cases.
While proposing new ideas/thoughts that I have regarding other people's works.
I presented at design meetings to stakeholders and PMs twice every week, discussing progress from all aspects of the product, stage-wise and feature-wise.
CONCLUSIONS
Working with ActualFood allowed me to learn from professional designers and managers how a design team works in a project-based and sprint format. One thing I appreciate the most is the freedom I was given to iterate on my own design solutions to problems and requirements set by stakeholders.
I improved my UI/UX skills and learned sustainable design practices.
I learned how to create and work with design systems.
I practiced my presentation and conversational skills to designers, managers, and stakeholders.
I acquired knowledge on how design teams work with developers to ship my design work and ensure a smooth dev hand-off process.
Don't like my portfolio? Let me know at btt2118@columbia.edu