Role
Design system intern
Project Info
Internship project
Solo w/ mentor guidance
Duration
March - June 2024
(4 months)
Tools Used
Figma
Colorbox
TL:DR
Establishing branding and UI framework for AI Startup
EthicsAnswer struggled with unsuccessful rebrands and relied entirely on Material UI to build its app, which didn’t represent an innovative AI-driven platform.
During a 4-month independent study, I single-handedly rebranded EthicsAnswer and built a comprehensive design system, now reflected on their website and LinkedIn. The design system was tested and applied to all 39 existing frames, and it’s flexible enough that new frames can be created in minutes.
COMPANY CONTEXT
Have you ever heard of EthicsAnswer?
EthicsAnswer, a B2B company based in Europe, is an AI startup that simplifies ESG (environmental, social, and governance) surveys and compliance processes by automating time-consuming tasks. ESG surveys evaluate a company’s sustainability and ethical standards, requiring detailed, accurate responses, and evidence to support compliance claims.
With EthicsAnswer, users can upload surveys or answer questions directly on the platform, receiving completed responses within 48 hours or instant answers for individual queries for £150 per user per month.
Trained exclusively on ESG data, the platform provides accurate, nuanced answers with links to supporting evidence for each answer.
PROBLEM
How can EthicsAnswer’s old branding and UI be revamped?
EthicsAnswer underwent several rebranding efforts, but none were successful. The style guides didn’t align with the company’s vision, often feeling unbalanced.
Also, the company didn’t have its own design system, relying entirely on Material UI (MUI), an open-source library of components that implements Google's Material Design. While the existing UI was minimal, it appeared outdated.
PROJECT CONTEXT
Hopping onto a new opportunity
At the University of Washington, I arranged an independent study with a design professor. My goal was to deepen my understanding of creating components and design systems, focusing on technical learning, rather than developing user flows.
Apart from teaching part-time, he was the only designer at EthicsAnswer, where he needed help refining their branding and design system, presenting the perfect learning opportunity.
By the end of my independent study, I was required to develop a style guide and a design system, test the design system, and apply it to 39 high-fidelity frames.
BRANDING
Part 1: Reimagining EthicsAnswer’s visual identity with intention
Original style guide
EthicsAnswer was originally called EthicsGrade, featuring a blue and pink color scheme. The brand also used Roboto, a geometric typeface.
Rebranded style guide
When I began the project, the company had rebranded itself as EthicsAnswer with a new style guide. Here are my thoughts:
Logos + Marque: Lack of visual balance as the elements (e.g., chevron) looked too heavy. Also, it would not be accessible on dark backgrounds.
Colors: Lighter colors lack vibrancy and feel dull.
Font: Geoemtria is too rounded, which came off as childish.
Iterations
I spent 2 weeks focusing on rebranding; I brought in my versions and collaborated with my professor, iterating on logos, colors, and typography based on his feedback until we reached a direction we were both happy with. Here is just a glimpse of some of the iterations explored:
My improved style guide
I created the final style guide, which addresses issues within the previous version. Here are the improvements I made:
Logos + Marque: Two opposing chevrons look more balanced. The logos support an animation of the chevrons expanding from the center to reveal the text. The logo and marque have two versions each to accommodate light and dark backgrounds.
Colors: Kept green for sustainability, with orange as a tertiary accent, and introduced more vibrancy to capture attention.
Font: Geist offers a minimal, modern, professional look that better aligns with the intended tone.
DESIGN SYSTEM
Part 2: Building and testing a design system across 39 Frames
Original interface
Before I joined, my professor had already established a user flow for EthicsAnswer consisting of 39 frames. My goal was to develop a new design system that blended the geometric elements of the old design with a modern, refreshing touch, creating a hybrid aesthetic.
Here’s what the original interface looked like:
Mood board
I created a mood board to gather inspiration before starting my design system.
After exploring a few websites with my professor, we landed on Streamline Icons. We were drawn to its green-orange color palette and how it was applied to graphics.
Iterations
I used the existing frames my professor created as a playground for ideating a new design system, meeting with my professor every Tuesday and Thursday to review progress.
At each meeting, I presented multiple versions, explaining which version I preferred and shared exploratory concepts. Together, we evaluated the options and decided on a final frame design or planned further iterations for the next week.
This feedback-driven approach allowed me to complete the 39 frames efficiently while continuously testing and improving the design system. Once the design system was established, creating a frame became significantly faster.
Design System
I refined typography, colors, components, and more through these iterations, ensuring flexibility for future frames. Building on the style guide, the design system maintained a cohesive look while achieving a hybrid aesthetic.
Solution
Here’s the new design system applied to all existing frames:
NEXT STEPS
If I continued my independent study
Usage documentation
I created a design system for EthicsAnswer but didn’t have time to document use cases, which would be useful for future designers in using components, color, typography, and more.
Testing and maintenance
As a startup, the design team receives ongoing requests from leadership, resulting in new frames being added and existing ones updated—requiring someone to keep the design system updated and well-maintained
User flow
With the design system complete, I would have focused on creating new frames incorporating the new design system rather than just applying it to existing frames.
REFLECTION
Takeaways from my independent study
Over these 4 months, I helped define branding by creating logos—a first for me—and established an in-depth design system to guide future app UI. Here are my learnings:
Throw yourself into the deep end
Despite the ambiguity, I made executive decisions when applying my design system to the existing frames. Unfamiliar with resizing options (hug, fill, fixed) within auto layout, I experimented until I mastered them.
Have an opinion
Presenting my work twice a week helped me become proficient at communicating my design rationale and having my own perspective while remaining open to feedback.
Look for opportunities to learn
In previous projects, I have not prioritized exploratory learning. During this project, I learned about atomic design, a new tool (i.e., Colorbox) to create accessible color scales, and graphic design and typography (e.g., kerning, leading).
Thanks for stopping by, feel free to explore my other projects! 🙋🏻♂️
Philips Sonicare
