ActualFood Product Design Internship (NDA signed)
Designing a staff-patient communications & management system for nutritional science company
Disclaimer
I have signed an NDA for this project. Therefore, this presentation will focus on my personal development progress and my design process.
Role
Product Designer
Front-end Engineer
Duration
June - August 2024 (8 weeks)
Tools
Figma, Svelte, TailwindCSS
Skills
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 Members
Jesse Kimotho
Design Manager
Victor Otieno
Design Manager
Bao To
Design Manager
Michael Roberson
Product Designer
What I did
1. Participated in 3 consecutive design sprints at varying stages of the application.
2. Led 2.5/7 core features from conception to hi-fidelity mockups.
3. Created and presented low & hi-fidelity wireframes and mockups for 5 core features of the app in Figma, along with their respective mini-features.
4. Created 50+ variable & responsive components and helped build the first ActualFood design system.
5. Proposed changes & formalized specific design language choices in the design system.
6. Implemented responsive screens & components in Svelte & TailwindCSS for the component library & app.
Design Sprint Process
Sprint Format
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. Below is the general process of our design sprints:
1. Ideas, Flows, Wireframes, Mockups
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.
2. Design Sessions
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 to ensure a coherent design-to-development pipeline.
3. Meetings & Presentations
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, including answering Q&As from stakeholders.
4. Recap & Repeat
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!
Challenges
- 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 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.
5 Core Features that I worked on ⚙️
1. Messaging
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.
2. Universal Widget
How do different features and app work together to create an intuitive, clean, and convenient user experience?
This design process required heavy emphasis on thinking about the user flow and experience navigating across multiple features, and what the scopes of each actions they take are. I spent a lot of time laying out connections and flows in FigJam and meeting with stakeholders to solidify this idea and its functionality.
3. Item Creator
A form-type interface that allows to send input data and customize their own project structures.
One thing I needed to consider was how to present the customizability of the items being created efficiently, while still considering the scope of this ability, and how the created item will be stored within the database. This requires an understanding of the backend and meeting with the software engineers.
4. Item Analyzer
The analyzer processes the data and guides users through a bug-fixing journey.
How do we guide the users through ensuring a well-structured, operational project? This includes thinking about how hints, warnings, and errors are presented.
5. Planner
A way to easily manage scheduling & participants
I worked on designing a sheet-like interface that allows easy navigation between customers, customer groups, timestamps, and data entries. This will provide users with a high-level management suite, keeping everything organized will guiding the users towards the place they want to be with ease.
Design System, Style, Components
Compiling Design System
1. Why a new design system:
- App is growing very big with 7 core features and their respective mini features
- The previous designs have objects or groups that are not made into components but should be, and as a result, a lot of objects that are meant to be the same thing do not look the same & lacks functionality
- Many of the components are being reused across multiple apps, therefore a component library is needed.
- There are occasional lack of consistency in design language for between screens and components, and therefore more systemic, formal documentation is needed.
2. Challenges:
- Existing designs: we did not start from scratch. With already existing apps, our role combines both creating new designs, but also formalizing old ones and making sure our design language is coherent.
- Connection: How do we move a parent component into a design system file, without it losing all the connection to its child components?
3. Process:
- 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 a smooth transitions with minimal work required to reconnect all the instances, using Figma plugins and scripts.
4. Result:
- A design system file is created and is undergoing development and refinement.
- I created and compiled several responsive components and their variants, like cards, lists, buttons, menu, navigation, and more.
- I also proposed making a design token system as part of the design system, which was then put on high priority for the design team.
Color Systems & Indicators
Changes
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.
Result
- 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 & User Testing
Design Presentation Skills
One of the most important skills I learned during this internship is how to communicate and present my ideas and design work to others:
1. When showcasing progress on a specific feature.
2. During a discussion about general functions & use cases.
3. 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.
Conclusion
What I've learned
Working with ActualFood allowed me to learn from professional designers and manager how a design team work 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 requirement 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.