USABILITY USER-CENTERED UI/UX VISUAL DESIGN INTERACTIVE DESIGN PRODUCT DEVELOPMENT PROTOTYPE/WIREFRAMING APP DEVELOPMENT DESIGN CONSULTING USER RESEARCH
creativity meets functionality.
What is a System Design?
System design is the process of developing a unified framework of components, guidelines, and interactions to ensure consistent and effective user experiences across various applications and platforms.
​
​
​
In this section of my portfolio, I am excited to showcase my experiences in building system design, which are vital in creating beautifully consistent user experiences across different applications. My work includes authoring a comprehensive UX guide for the analytics section, which provides a guideline of design foundation and promotes a standardized approach to usability. Additionally, I have proficient experience in creating component libraries that streamlines the design process and enhances both visual and functional consistency. The section showcases simplified visualizations of system design to clearly present and highlight my experience.
My Experience
Ux article
for Analytics
The UX guide article for analytics is adopted company-wide for developers, quality managers, and anyone to use to make the best design decisions when developing analytics related designs. This article provided essential guidelines for enhancing usability and maintaining consistency across the applications with standardized components.
By articulating stylized themes and style, best practices, and design principles, I ensured that the design approach was unified and user-centric, maintaining a seamless experience for all users interacting with complex data. This work enhanced my ability to translate complex design concepts into actionable, practical guidance for diverse teams.
Article Includes...
Description and high level key insights of the component
Component anatomy
Do's and Dont's
Interaction behavior
Style variations
Implementation of the component
Example Visualization
*Desktop view recommended for sharpest images
Overview of high level key insights and anatomy of the component.
.png)
Do's and Dont's to help prevent misuse and different interaction behaviors described.
Variations of style listed out with example visualizations. Common use cases are also shown for guidance.
Component implementation instructions and resources based on environments.
Component library
Figma and Adobe XD
I have proficient skills in building comprehensive component libraries using Adobe XD and Figma. This involves creating a collection of reusable design elements that streamlines the design workflow and ensures consistency across the company. By utilizing design tools, I developed a library that not only enhanced design efficiency but also maintained a cohesive user experience.
This is a simple design work around a new e-commerce website for makeup products that I have designed with a component library created using Figma.
*Desktop view recommended for sharpest images
Illustration attribution: Image by storyset on Freepik
Using Figma to build a component library to maintain and ensure a consistent design style and theme across the website.
Elements and Icons
Typography
Figma Interactive Screen
Figma Link: