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.
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
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.
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:
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 to ensure a coherent design-to-development pipeline.
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.
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 international background and 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.
Here is my own general process for designing the UI/UX of a specific feature:
Points of Consideration:
- Why do we include this functionality as its own feature on our application?
- What are the basic actions that a user can take?
Actions:
- List out all key functionalities.
- Contact stakeholders & PM for approval.
Points of Consideration:
- Who is going to use this platform?
- How do we address the needs of these users?
- What are some potential accessibility & navigation issues that will need to be dealt with?
Actions:
- Formalize user personas and their respective use cases.
- Perform market research on competitors & previous products in the same industry.
- Draw out clear action plans & requirements before designing.
Points of consideration:
- How can we present a user-friendly, intuitive user interface that caters specifically for the previously identified user personas?
- How would a user navigate between this app and other apps in the suite?
- How can we address existing user experience issues in other products?
Actions:
- Create flow diagrams in FigJam to use for discussion.
- List out all cases in which the user will navigate to and from this feature in the app suite.
- Start thinking of UI/UX choices (for example, list vs grid view) to address in-app navigation issues.
Points of consideration:
- How do we show case the functionalities of each feature efficiently?
- At what stage of completion should the mock-ups we present be?
Actions:
- Edit & organize wireframes in Excalidraw.
- Communicate with PMs and developers to discuss how data is structured & how the back-end works.
- Work with design team to create mockups with multiple iterations.
Points of consideration:
- Are there two (or more) options for a certain screen/ flow that might require user testing to decide the better one?
- Can we have multiple ways to take one action?
Actions:
- Create screens for all possible options to showcase at design meeting.
- List out advantages/disadvantages of each version.
- Carry out User Testing (A/B Tests, Heat Map Analyses, ...), to decide which option to use.
- Iterate further, considering all the user tests & discussions following the presentation.
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.
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.
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.
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.
