Phrase
PROJECT BRIEF AND SCOPE
As a UI Designer, my primary contributions included creating a cohesive icon and illustration library, designing the Syntax design system logo, and refining the UI for the product suite. These efforts supported the larger goal of ensuring a unified and polished visual identity.
Definition
Before the merger, Phrase and Memsource had distinct visual identities, resulting in inconsistent branding and user experiences. The challenge was to develop a unified design system that streamlined cross-product consistency, establish visual elements such as icons and illustrations to enhance usability and branding, create a logo for the new design system, and support the integration of a rebranded UI during the product suite overhaul.
Design System
I designed the logo for our design system at Phrase, named Syntax. The process includes initial exploration sketches leading to the final product, with the goal of incorporating elements from our design system into the logo.
Icon Library
One of my major responsibilities was spearheading the establishment of a comprehensive icon library across all our products, aligning seamlessly with our recent rebranding efforts. This involved a meticulous and iterative process, incorporating feedback from multiple team sessions. Additionally, I developed detailed documentation to empower other designers to contribute their own icons to the library, ensuring consistency and coherence across our design assets.
Exploration
During the design process, I explored various icon styles to ensure clarity, scalability, and alignment with the design system’s branding. Through iterative refinement, I crafted icons that seamlessly complemented the illustrations and overall UI. Below are snapshots of this exploration, highlighting the evolution from concept to final design.
HELP CENTER ICONS
Following are some of the icons created for the resources section at Phrase's Help Center. I enjoyed a greater degree of creative freedom with these icons, considering that the overall structure was fairly rigid due to its creation within Zendesk.The section included help, tutorial videos, onboarding, keyboard shortcuts and a 'what's new' tab.
Library
I developed an illustration library aimed at elevating the user experience across our entire product suite. Leveraging the existing rebrand's visual language as a foundation, I expanded upon it to create a versatile set of illustrations with a modal approach. The intention was to enable other teams to seamlessly integrate these illustrations into their designs. They were utilized in various contexts such as modals, different sections of the products, for empty states, alerts, help center, and more, ensuring a cohesive and engaging user experience throughout.
HELP CENTER VISUALS
Below is an example of the visuals created for the Help Center at Phrase. The collection includes individual illustrations tailored for specific sections on the page, alongside a comprehensive revamp of the entire Help Center interface.
Rebrand UI
Phrase and Memsource merged to form Phrase, consolidating their flagship products into a cohesive product suite. As a key player in the rebranding journey that followed, I collaborated closely with product designers, conceptualizing wireframes and crafting UI designs. The transition included a vibrant new color palette centered around green, complemented by black, enhanced with illustrations to elevate the user experience while staying true to the brand's vision. The following shows some highlights of the process.
Loading animation
I contributed to enhancing the user experience of The CAT (Computer-Aided Translation Tools) editor at Phrase by designing a loading cat animation. This editor serves as a platform where linguists engage in various translation tasks assigned to them. The addition of the loading cat animation not only brought visual appeal but also garnered significant appreciation from both the team and users alike.
FINAL IMPACT
The scalable icon and illustration library streamlined workflows, reducing design turnaround times, while the refined UI improved retention by creating a more intuitive user experience. The Syntax logo became a central branding element, reinforcing recognition and alignment with the new unified platform.
