About The Project
Prosper Design System: Building a Flexible & Customisable Platform
Prosper Design System: Building a Flexible & Customisable Platform
Prosper Design System: Building a Flexible & Customisable Platform
Prosper Design System: Building a Flexible & Customisable Platform
“Immerse players in the festive spirit while strategically integrating cashback and rewards, showcasing a seamless fusion of entertainment and financial incentives."
“Immerse players in the festive spirit while strategically integrating cashback and rewards, showcasing a seamless fusion of entertainment and financial incentives."
“Immerse players in the festive spirit while strategically integrating cashback and rewards, showcasing a seamless fusion of entertainment and financial incentives."
“Immerse players in the festive spirit while strategically integrating cashback and rewards, showcasing a seamless fusion of entertainment and financial incentives."
Timeline
3 Weeks, Independent Project/Self Initiated
3 Weeks, Independent Project/Self Initiated
3 Weeks, Independent Project/Self Initiated
3 Weeks, Independent Project/Self Initiated
My Role
Product Designer
Product Designer
Product Designer
Product Designer
Inspired By
Fun, Consistency and Intuitive
Prosper
insightful, Empowering and Future-Ready
Identity
Poppins
Aa123
Inspired By
Fun, Consistency and Intuitive
Prosper
insightful, Empowering and Future-Ready
Identity
Poppins
Aa123
Inspired By
Fun, Consistency and Intuitive
Prosper
insightful, Empowering and Future-Ready
Identity
Poppins
Aa123
About Prosper
About Prosper
About Prosper
About Prosper
Future.ly is your personalized career companion, designed to guide you through the complex journey of career planning and development. With AI-driven insights, tailored roadmaps, and expert advice, we empower you to explore your passions, understand your strengths, and make informed career decisions. Join us in shaping a brighter future, one step at a time.
Future.ly is your personalized career companion, designed to guide you through the complex journey of career planning and development. With AI-driven insights, tailored roadmaps, and expert advice, we empower you to explore your passions, understand your strengths, and make informed career decisions. Join us in shaping a brighter future, one step at a time.
Future.ly is your personalized career companion, designed to guide you through the complex journey of career planning and development. With AI-driven insights, tailored roadmaps, and expert advice, we empower you to explore your passions, understand your strengths, and make informed career decisions. Join us in shaping a brighter future, one step at a time.
Future.ly is your personalized career companion, designed to guide you through the complex journey of career planning and development. With AI-driven insights, tailored roadmaps, and expert advice, we empower you to explore your passions, understand your strengths, and make informed career decisions. Join us in shaping a brighter future, one step at a time.
Prosper utilizes:
Personalized Career Assessments: Our AI-driven assessments identify users' strengths, interests, and potential career paths, offering personalized recommendations.
Expert Counseling Sessions: We provide one-on-one sessions with experienced career counselors who offer tailored advice and support.
Interactive Career Roadmaps: Users receive customized career plans with actionable steps and milestones, making it easier to track progress.
Real-Time Updates: Stay informed with the latest industry trends, job market demands, and educational opportunities through our real-time updates.
Comprehensive Resource Hub: Access a wealth of resources, including online courses, tutorials, and articles, to support your career development.
Mentorship Program: Connect with industry professionals and mentors who provide valuable insights and guidance.
Community Support: Join a supportive community of like-minded individuals to share experiences, challenges, and successes.
Gamification Elements: Enjoy a more engaging experience with gamified features that make career planning fun and rewarding.
Personalized Career Assessments: Our AI-driven assessments identify users' strengths, interests, and potential career paths, offering personalized recommendations.
Expert Counseling Sessions: We provide one-on-one sessions with experienced career counselors who offer tailored advice and support.
Interactive Career Roadmaps: Users receive customized career plans with actionable steps and milestones, making it easier to track progress.
Real-Time Updates: Stay informed with the latest industry trends, job market demands, and educational opportunities through our real-time updates.
Comprehensive Resource Hub: Access a wealth of resources, including online courses, tutorials, and articles, to support your career development.
Mentorship Program: Connect with industry professionals and mentors who provide valuable insights and guidance.
Community Support: Join a supportive community of like-minded individuals to share experiences, challenges, and successes.
Gamification Elements: Enjoy a more engaging experience with gamified features that make career planning fun and rewarding.
Personalized Career Assessments: Our AI-driven assessments identify users' strengths, interests, and potential career paths, offering personalized recommendations.
Expert Counseling Sessions: We provide one-on-one sessions with experienced career counselors who offer tailored advice and support.
Interactive Career Roadmaps: Users receive customized career plans with actionable steps and milestones, making it easier to track progress.
Real-Time Updates: Stay informed with the latest industry trends, job market demands, and educational opportunities through our real-time updates.
Comprehensive Resource Hub: Access a wealth of resources, including online courses, tutorials, and articles, to support your career development.
Mentorship Program: Connect with industry professionals and mentors who provide valuable insights and guidance.
Community Support: Join a supportive community of like-minded individuals to share experiences, challenges, and successes.
Gamification Elements: Enjoy a more engaging experience with gamified features that make career planning fun and rewarding.
Personalized Career Assessments: Our AI-driven assessments identify users' strengths, interests, and potential career paths, offering personalized recommendations.
Expert Counseling Sessions: We provide one-on-one sessions with experienced career counselors who offer tailored advice and support.
Interactive Career Roadmaps: Users receive customized career plans with actionable steps and milestones, making it easier to track progress.
Real-Time Updates: Stay informed with the latest industry trends, job market demands, and educational opportunities through our real-time updates.
Comprehensive Resource Hub: Access a wealth of resources, including online courses, tutorials, and articles, to support your career development.
Mentorship Program: Connect with industry professionals and mentors who provide valuable insights and guidance.
Community Support: Join a supportive community of like-minded individuals to share experiences, challenges, and successes.
Gamification Elements: Enjoy a more engaging experience with gamified features that make career planning fun and rewarding.
Target User
Target User
Target User
Target User
Primary User -
Students: High school, college, or university students who are exploring career options, selecting majors or courses, and planning their educational paths.
Students: High school, college, or university students who are exploring career options, selecting majors or courses, and planning their educational paths.
Students: High school, college, or university students who are exploring career options, selecting majors or courses, and planning their educational paths.
Students: High school, college, or university students who are exploring career options, selecting majors or courses, and planning their educational paths.
Professionals: Working professionals who are considering career changes, seeking growth opportunities, or looking to acquire new skills.
Professionals: Working professionals who are considering career changes, seeking growth opportunities, or looking to acquire new skills.
Professionals: Working professionals who are considering career changes, seeking growth opportunities, or looking to acquire new skills.
Professionals: Working professionals who are considering career changes, seeking growth opportunities, or looking to acquire new skills.
Secondary User -
Career Counselors/Coaches: Professionals in the field of career guidance who can offer personalized advice and support to users through the app.
Career Counselors/Coaches: Professionals in the field of career guidance who can offer personalized advice and support to users through the app.
Career Counselors/Coaches: Professionals in the field of career guidance who can offer personalized advice and support to users through the app.
Career Counselors/Coaches: Professionals in the field of career guidance who can offer personalized advice and support to users through the app.
Educational Institutions: Colleges, universities, vocational schools, and training institutes that provide courses and programs relevant to different careers.
Educational Institutions: Colleges, universities, vocational schools, and training institutes that provide courses and programs relevant to different careers.
Educational Institutions: Colleges, universities, vocational schools, and training institutes that provide courses and programs relevant to different careers.
Educational Institutions: Colleges, universities, vocational schools, and training institutes that provide courses and programs relevant to different careers.
Challenges
Challenges
Challenges
Challenges
Problem Statement
we need a cohesive and scalable design system to ensure consistent, intuitive, and engaging user experiences. Developing a flexible framework from scratch will enhance usability and provide a seamless, personalized career counseling experience for all users.
we need a cohesive and scalable design system to ensure consistent, intuitive, and engaging user experiences. Developing a flexible framework from scratch will enhance usability and provide a seamless, personalized career counseling experience for all users.
we need a cohesive and scalable design system to ensure consistent, intuitive, and engaging user experiences. Developing a flexible framework from scratch will enhance usability and provide a seamless, personalized career counseling experience for all users.
we need a cohesive and scalable design system to ensure consistent, intuitive, and engaging user experiences. Developing a flexible framework from scratch will enhance usability and provide a seamless, personalized career counseling experience for all users.
we aimed to:
Align our teams by giving them a more structured and guided way to build products.
Speed up our design and development process: with a ready-made library and patterns teams can create and test layouts much faster.
Improve brand perception and user trust through consistent experiences that work for everyone and allow users to accomplish their goals.
Promote accessibility of our products by building accessibility and inclusion into our component libraries, both from a design and code repository perspective.
Align our teams by giving them a more structured and guided way to build products.
Speed up our design and development process: with a ready-made library and patterns teams can create and test layouts much faster.
Improve brand perception and user trust through consistent experiences that work for everyone and allow users to accomplish their goals.
Promote accessibility of our products by building accessibility and inclusion into our component libraries, both from a design and code repository perspective.
Align our teams by giving them a more structured and guided way to build products.
Speed up our design and development process: with a ready-made library and patterns teams can create and test layouts much faster.
Improve brand perception and user trust through consistent experiences that work for everyone and allow users to accomplish their goals.
Promote accessibility of our products by building accessibility and inclusion into our component libraries, both from a design and code repository perspective.
Align our teams by giving them a more structured and guided way to build products.
Speed up our design and development process: with a ready-made library and patterns teams can create and test layouts much faster.
Improve brand perception and user trust through consistent experiences that work for everyone and allow users to accomplish their goals.
Promote accessibility of our products by building accessibility and inclusion into our component libraries, both from a design and code repository perspective.
Business Goals
Business Goals
Business Goals
Business Goals
The primary business objective was to enhance Prosper’s scalability and operational efficiency through a well-defined design system. This would facilitate faster feature development, reduce redundancy, and improve collaboration between designers and developers, ultimately leading to increased user satisfaction and engagement.
The primary business objective was to enhance Prosper’s scalability and operational efficiency through a well-defined design system. This would facilitate faster feature development, reduce redundancy, and improve collaboration between designers and developers, ultimately leading to increased user satisfaction and engagement.
The primary business objective was to enhance Prosper’s scalability and operational efficiency through a well-defined design system. This would facilitate faster feature development, reduce redundancy, and improve collaboration between designers and developers, ultimately leading to increased user satisfaction and engagement.
The primary business objective was to enhance Prosper’s scalability and operational efficiency through a well-defined design system. This would facilitate faster feature development, reduce redundancy, and improve collaboration between designers and developers, ultimately leading to increased user satisfaction and engagement.
Process
Process
Process
Process
I adopted a strategy that merged the Lean UX design process with Atomic Design principles.
I adopted a strategy that merged the Lean UX design process with Atomic Design principles.
I adopted a strategy that merged the Lean UX design process with Atomic Design principles.
I adopted a strategy that merged the Lean UX design process with Atomic Design principles.
The rationale behind each:
Atomic Design for Scalability
I implemented Atomic Design principles to construct a scalable and foundational design system.
This method allowed us to ensure UI consistency across SafetyConnect's products while facilitating rapid development and future growth.
Broke down the UI into atoms, molecules, and organisms, creating a modular design language that supports easy adaptation and iteration.
I implemented Atomic Design principles to construct a scalable and foundational design system.
This method allowed us to ensure UI consistency across SafetyConnect's products while facilitating rapid development and future growth.
Broke down the UI into atoms, molecules, and organisms, creating a modular design language that supports easy adaptation and iteration.
I implemented Atomic Design principles to construct a scalable and foundational design system.
This method allowed us to ensure UI consistency across SafetyConnect's products while facilitating rapid development and future growth.
Broke down the UI into atoms, molecules, and organisms, creating a modular design language that supports easy adaptation and iteration.
I implemented Atomic Design principles to construct a scalable and foundational design system.
This method allowed us to ensure UI consistency across SafetyConnect's products while facilitating rapid development and future growth.
Broke down the UI into atoms, molecules, and organisms, creating a modular design language that supports easy adaptation and iteration.
Emphasis on Design Tokens
A significant focus was placed on the tokenization of design components, including colors, spacing, typography, and more. This process was crucial for streamlining the design-to-development handoff, creating a shared language between designers and developers.
A significant focus was placed on the tokenization of design components, including colors, spacing, typography, and more. This process was crucial for streamlining the design-to-development handoff, creating a shared language between designers and developers.
A significant focus was placed on the tokenization of design components, including colors, spacing, typography, and more. This process was crucial for streamlining the design-to-development handoff, creating a shared language between designers and developers.
A significant focus was placed on the tokenization of design components, including colors, spacing, typography, and more. This process was crucial for streamlining the design-to-development handoff, creating a shared language between designers and developers.
Lean UX Design Process
Lean UX Design Process
Lean UX Design Process
Lean UX Design Process
Component design process based on lean & atomic design
Design Exploration
Design Exploration
Design Exploration
Design Exploration
We decided to focus first on the foundational elements (atoms) of our design system, such as color palettes, fonts, grid, spacing, buttons, etc., and then move on to more complex blocks and pieces (molecules, organisms, templates, pages).
We decided to focus first on the foundational elements (atoms) of our design system, such as color palettes, fonts, grid, spacing, buttons, etc., and then move on to more complex blocks and pieces (molecules, organisms, templates, pages).
We decided to focus first on the foundational elements (atoms) of our design system, such as color palettes, fonts, grid, spacing, buttons, etc., and then move on to more complex blocks and pieces (molecules, organisms, templates, pages).
We decided to focus first on the foundational elements (atoms) of our design system, such as color palettes, fonts, grid, spacing, buttons, etc., and then move on to more complex blocks and pieces (molecules, organisms, templates, pages).
Some of the activities at this stage involved:
Some of the activities at this stage involved:
Some of the activities at this stage involved:
Some of the activities at this stage involved:
Researching other design systems and interfaces for components common practices and inspiration.
Analyzing the instances and use cases captured during the audit and ideating on the solutions that serve our goals best.
Unifying: we merged different variations of components to leave only the essentials. For example, we limited our color schemes for each hue and all the excessive variations were matched and merged with the decided upon schemes based on proximity.
Researching other design systems and interfaces for components common practices and inspiration.
Analyzing the instances and use cases captured during the audit and ideating on the solutions that serve our goals best.
Unifying: we merged different variations of components to leave only the essentials. For example, we limited our color schemes for each hue and all the excessive variations were matched and merged with the decided upon schemes based on proximity.
Researching other design systems and interfaces for components common practices and inspiration.
Analyzing the instances and use cases captured during the audit and ideating on the solutions that serve our goals best.
Unifying: we merged different variations of components to leave only the essentials. For example, we limited our color schemes for each hue and all the excessive variations were matched and merged with the decided upon schemes based on proximity.
Researching other design systems and interfaces for components common practices and inspiration.
Analyzing the instances and use cases captured during the audit and ideating on the solutions that serve our goals best.
Unifying: we merged different variations of components to leave only the essentials. For example, we limited our color schemes for each hue and all the excessive variations were matched and merged with the decided upon schemes based on proximity.
Below is our final color palette:
Below is our final color palette:
Below is our final color palette:
Below is our final color palette:
Some principles we followed:
Some principles we followed:
Some principles we followed:
Some principles we followed:
I tried to make our components responsive with the auto-layout Figma feature, so we could reuse those components when designing for different devices or layouts.
I designed to cover all scenarios, or “states” in the system: hover, focus, filled out, error, and disabled state.
I tried to make our components responsive with the auto-layout Figma feature, so we could reuse those components when designing for different devices or layouts.
I designed to cover all scenarios, or “states” in the system: hover, focus, filled out, error, and disabled state.
I tried to make our components responsive with the auto-layout Figma feature, so we could reuse those components when designing for different devices or layouts.
I designed to cover all scenarios, or “states” in the system: hover, focus, filled out, error, and disabled state.
I tried to make our components responsive with the auto-layout Figma feature, so we could reuse those components when designing for different devices or layouts.
I designed to cover all scenarios, or “states” in the system: hover, focus, filled out, error, and disabled state.
I combined variants into component sets with custom properties and values. Using variants makes components easier to maintain and browse.
I combined variants into component sets with custom properties and values. Using variants makes components easier to maintain and browse.
I combined variants into component sets with custom properties and values. Using variants makes components easier to maintain and browse.
I combined variants into component sets with custom properties and values. Using variants makes components easier to maintain and browse.
Each component we designed with accessibility in mind. We strived to comply with WCAG AA accessibility standards. Below is an example of intentional choice of color on a warning alert to achieve sufficient text contrast (checked via Stark Figma plugin) so that users with low vision can see and use our component.
Each component we designed with accessibility in mind. We strived to comply with WCAG AA accessibility standards. Below is an example of intentional choice of color on a warning alert to achieve sufficient text contrast (checked via Stark Figma plugin) so that users with low vision can see and use our component.
Each component we designed with accessibility in mind. We strived to comply with WCAG AA accessibility standards. Below is an example of intentional choice of color on a warning alert to achieve sufficient text contrast (checked via Stark Figma plugin) so that users with low vision can see and use our component.
Each component we designed with accessibility in mind. We strived to comply with WCAG AA accessibility standards. Below is an example of intentional choice of color on a warning alert to achieve sufficient text contrast (checked via Stark Figma plugin) so that users with low vision can see and use our component.
Streamlining Design with Design Tokens:
Streamlining Design with Design Tokens:
Streamlining Design with Design Tokens:
Streamlining Design with Design Tokens:
To ensure consistency and efficiency across our design system, I implemented a comprehensive set of design tokens. These tokens act as centralized variables that represent core design elements like colors, typography, spacing, and more. By storing these values in a single location (e.g., a style dictionary or code repository), we eliminated the need for hard-coded values scattered throughout various design files.
To ensure consistency and efficiency across our design system, I implemented a comprehensive set of design tokens. These tokens act as centralized variables that represent core design elements like colors, typography, spacing, and more. By storing these values in a single location (e.g., a style dictionary or code repository), we eliminated the need for hard-coded values scattered throughout various design files.
To ensure consistency and efficiency across our design system, I implemented a comprehensive set of design tokens. These tokens act as centralized variables that represent core design elements like colors, typography, spacing, and more. By storing these values in a single location (e.g., a style dictionary or code repository), we eliminated the need for hard-coded values scattered throughout various design files.
To ensure consistency and efficiency across our design system, I implemented a comprehensive set of design tokens. These tokens act as centralized variables that represent core design elements like colors, typography, spacing, and more. By storing these values in a single location (e.g., a style dictionary or code repository), we eliminated the need for hard-coded values scattered throughout various design files.
The Future
The Future
The Future
The Future
The design system is an ongoing project. We iterate, change and learn a lot in the process. So far, we have a set of basic components ready, which has been game-changing for our team in terms of efficiency, as well as consistency, and standardization.
The design system is an ongoing project. We iterate, change and learn a lot in the process. So far, we have a set of basic components ready, which has been game-changing for our team in terms of efficiency, as well as consistency, and standardization.
The design system is an ongoing project. We iterate, change and learn a lot in the process. So far, we have a set of basic components ready, which has been game-changing for our team in terms of efficiency, as well as consistency, and standardization.
The design system is an ongoing project. We iterate, change and learn a lot in the process. So far, we have a set of basic components ready, which has been game-changing for our team in terms of efficiency, as well as consistency, and standardization.
Some of the next steps include:
Some of the next steps include:
Some of the next steps include:
Some of the next steps include:
Continuing to grow our component library and supplement it with more complex components.
Adding sections on brand, illustrations and animation.
Cultivating processes and best practices for maintaining the documentation to ensure that our library stays up to date and perfectly in sync both on the design and code side.
Continuing to grow our component library and supplement it with more complex components.
Adding sections on brand, illustrations and animation.
Cultivating processes and best practices for maintaining the documentation to ensure that our library stays up to date and perfectly in sync both on the design and code side.
Continuing to grow our component library and supplement it with more complex components.
Adding sections on brand, illustrations and animation.
Cultivating processes and best practices for maintaining the documentation to ensure that our library stays up to date and perfectly in sync both on the design and code side.
Continuing to grow our component library and supplement it with more complex components.
Adding sections on brand, illustrations and animation.
Cultivating processes and best practices for maintaining the documentation to ensure that our library stays up to date and perfectly in sync both on the design and code side.
Learnings
Learnings
Learnings
Learnings
Building this design system took a lot of time and there was a lot of back and forth. But it was definitely worth the effort. It has significantly improved our workflow, consistency across our products, and collaboration across the organisation.
I was able to collect lots of inspiration from different resources all over the internet.
Building this design system took a lot of time and there was a lot of back and forth. But it was definitely worth the effort. It has significantly improved our workflow, consistency across our products, and collaboration across the organisation.
I was able to collect lots of inspiration from different resources all over the internet.
Building this design system took a lot of time and there was a lot of back and forth. But it was definitely worth the effort. It has significantly improved our workflow, consistency across our products, and collaboration across the organisation.
I was able to collect lots of inspiration from different resources all over the internet.
Building this design system took a lot of time and there was a lot of back and forth. But it was definitely worth the effort. It has significantly improved our workflow, consistency across our products, and collaboration across the organisation.
I was able to collect lots of inspiration from different resources all over the internet.
Top
Top