👋 I’m Evan Reisberg
A full stack creative director who makes digital stuff and aligns teams and process.
👋 I’m Evan Reisberg
A full stack creative director who makes digital stuff and aligns teams and process.
👋 I’m Evan Reisberg
A full stack creative director who makes digital stuff and aligns teams and process.
👋 I’m Evan Reisberg
A full stack creative director who makes digital stuff and aligns teams and process.
My Approach
Human centered teams make human centered products.
I lead a team committed to human-centered design principles, encompassing interactive design, UX, and UI.
Often collaborating with cross-functional teams, I aim to shape our team culture, promote growth, and provide guidance to team members. With expertise in DesignOps, delivering high-quality work and fostering cross-departmental collaboration is a premiere focus. My day-to day is spent navigating projects from concept to delivery, while contributing to departmental leadership and refining operational processes.
My Approach
Human centered teams make human centered products.
I lead a team committed to human-centered design principles, encompassing interactive design, UX, and UI.
Often collaborating with cross-functional teams, I aim to shape our team culture, promote growth, and provide guidance to team members. With expertise in DesignOps, delivering high-quality work and fostering cross-departmental collaboration is a premiere focus. My day-to day is spent navigating projects from concept to delivery, while contributing to departmental leadership and refining operational processes.
My Approach
Human centered teams make human centered products.
I lead a team committed to human-centered design principles, encompassing interactive design, UX, and UI.
Often collaborating with cross-functional teams, I aim to shape our team culture, promote growth, and provide guidance to team members. With expertise in DesignOps, delivering high-quality work and fostering cross-departmental collaboration is a premiere focus. My day-to day is spent navigating projects from concept to delivery, while contributing to departmental leadership and refining operational processes.
My Approach
Human centered teams make human centered products.
I lead a team committed to human-centered design principles, encompassing interactive design, UX, and UI.
Often collaborating with cross-functional teams, I aim to shape our team culture, promote growth, and provide guidance to team members. With expertise in DesignOps, delivering high-quality work and fostering cross-departmental collaboration is a premiere focus. My day-to day is spent navigating projects from concept to delivery, while contributing to departmental leadership and refining operational processes.
My work
My work
My work
My work
Hybrid Calisthenics Native Mobile App
Design Systems, UX, UI, Native Mobile
Work done for Mindgrub - (2023)
Hybrid Calisthenics Native Mobile App
Design Systems, UX, UI, Native Mobile
Work done for Mindgrub - (2023)
Hybrid Calisthenics Native Mobile App
Design Systems, UX, UI, Native Mobile
Work done for Mindgrub - (2023)
Hybrid Calisthenics Native Mobile App
Design Systems, UX, UI, Native Mobile
Work done for Mindgrub - (2023)
The Opportunity
The Hybrid Calisthenics native app, is designed to offer users a seamless fitness experience. This encompasses the ability to download the app, opt for either the free or premium version, and engage in an informative onboarding process. Once onboarded, users gain access to an extensive library of individual workout sessions, each comprising multiple instructional videos punctuated by cooldown periods. The app's workout sessions are thoughtfully categorized based on intensity levels, guiding users from beginner to intermediate and advanced levels.
The Solution
Our solution is founded on the premise of delivering an exceptional fitness experience. The multifaceted solution is tailored to cater to a wide range of user needs, offering a user-friendly interface, comprehensive Hybrid Routine resources, and a seamless fitness journey.
Launching a User-Friendly MVP
The development and launch of a Minimum Viable Product (MVP) have been prioritized to ensure that users are guided effectively through calisthenics exercises and workouts. This MVP is designed with a user-friendly interface at its core, making fitness accessible to all.
Offering Free and Premium Versions
Our solution caters to different user preferences by providing two distinct versions of the app—a 'Free' version that displays advertisements during cooldown periods and a 'Premium' version that offers an ad-free experience and access to asynchronous fitness trainer communication.
Comprehensive Library of Workouts
We have integrated the extensive library of video tutorials and resources from Hybrid Calisthenics to educate users on proper form, techniques, and training principles.
Empowering User Fitness Evaluation
Our solution empowers users to track their participation and monitor their progress over time. This feature fosters accountability and motivation.
Sustainable Evolution of the User Experience
The project is structured to establish a strong foundation for the app's ongoing evolution and innovation. This approach ensures that the app can adapt to evolving user needs and industry trends, providing a lasting and valuable fitness solution.
The Opportunity
The Hybrid Calisthenics native app, is designed to offer users a seamless fitness experience. This encompasses the ability to download the app, opt for either the free or premium version, and engage in an informative onboarding process. Once onboarded, users gain access to an extensive library of individual workout sessions, each comprising multiple instructional videos punctuated by cooldown periods. The app's workout sessions are thoughtfully categorized based on intensity levels, guiding users from beginner to intermediate and advanced levels.
The Solution
Our solution is founded on the premise of delivering an exceptional fitness experience. The multifaceted solution is tailored to cater to a wide range of user needs, offering a user-friendly interface, comprehensive Hybrid Routine resources, and a seamless fitness journey.
Launching a User-Friendly MVP
The development and launch of a Minimum Viable Product (MVP) have been prioritized to ensure that users are guided effectively through calisthenics exercises and workouts. This MVP is designed with a user-friendly interface at its core, making fitness accessible to all.
Offering Free and Premium Versions
Our solution caters to different user preferences by providing two distinct versions of the app—a 'Free' version that displays advertisements during cooldown periods and a 'Premium' version that offers an ad-free experience and access to asynchronous fitness trainer communication.
Comprehensive Library of Workouts
We have integrated the extensive library of video tutorials and resources from Hybrid Calisthenics to educate users on proper form, techniques, and training principles.
Empowering User Fitness Evaluation
Our solution empowers users to track their participation and monitor their progress over time. This feature fosters accountability and motivation.
Sustainable Evolution of the User Experience
The project is structured to establish a strong foundation for the app's ongoing evolution and innovation. This approach ensures that the app can adapt to evolving user needs and industry trends, providing a lasting and valuable fitness solution.
The Opportunity
The Hybrid Calisthenics native app, is designed to offer users a seamless fitness experience. This encompasses the ability to download the app, opt for either the free or premium version, and engage in an informative onboarding process. Once onboarded, users gain access to an extensive library of individual workout sessions, each comprising multiple instructional videos punctuated by cooldown periods. The app's workout sessions are thoughtfully categorized based on intensity levels, guiding users from beginner to intermediate and advanced levels.
The Solution
Our solution is founded on the premise of delivering an exceptional fitness experience. The multifaceted solution is tailored to cater to a wide range of user needs, offering a user-friendly interface, comprehensive Hybrid Routine resources, and a seamless fitness journey.
Launching a User-Friendly MVP
The development and launch of a Minimum Viable Product (MVP) have been prioritized to ensure that users are guided effectively through calisthenics exercises and workouts. This MVP is designed with a user-friendly interface at its core, making fitness accessible to all.
Offering Free and Premium Versions
Our solution caters to different user preferences by providing two distinct versions of the app—a 'Free' version that displays advertisements during cooldown periods and a 'Premium' version that offers an ad-free experience and access to asynchronous fitness trainer communication.
Comprehensive Library of Workouts
We have integrated the extensive library of video tutorials and resources from Hybrid Calisthenics to educate users on proper form, techniques, and training principles.
Empowering User Fitness Evaluation
Our solution empowers users to track their participation and monitor their progress over time. This feature fosters accountability and motivation.
Sustainable Evolution of the User Experience
The project is structured to establish a strong foundation for the app's ongoing evolution and innovation. This approach ensures that the app can adapt to evolving user needs and industry trends, providing a lasting and valuable fitness solution.
The Opportunity
The Hybrid Calisthenics native app, is designed to offer users a seamless fitness experience. This encompasses the ability to download the app, opt for either the free or premium version, and engage in an informative onboarding process. Once onboarded, users gain access to an extensive library of individual workout sessions, each comprising multiple instructional videos punctuated by cooldown periods. The app's workout sessions are thoughtfully categorized based on intensity levels, guiding users from beginner to intermediate and advanced levels.
The Solution
Our solution is founded on the premise of delivering an exceptional fitness experience. The multifaceted solution is tailored to cater to a wide range of user needs, offering a user-friendly interface, comprehensive Hybrid Routine resources, and a seamless fitness journey.
Launching a User-Friendly MVP
The development and launch of a Minimum Viable Product (MVP) have been prioritized to ensure that users are guided effectively through calisthenics exercises and workouts. This MVP is designed with a user-friendly interface at its core, making fitness accessible to all.
Offering Free and Premium Versions
Our solution caters to different user preferences by providing two distinct versions of the app—a 'Free' version that displays advertisements during cooldown periods and a 'Premium' version that offers an ad-free experience and access to asynchronous fitness trainer communication.
Comprehensive Library of Workouts
We have integrated the extensive library of video tutorials and resources from Hybrid Calisthenics to educate users on proper form, techniques, and training principles.
Empowering User Fitness Evaluation
Our solution empowers users to track their participation and monitor their progress over time. This feature fosters accountability and motivation.
Sustainable Evolution of the User Experience
The project is structured to establish a strong foundation for the app's ongoing evolution and innovation. This approach ensures that the app can adapt to evolving user needs and industry trends, providing a lasting and valuable fitness solution.
Cerebrum: Mindgrub’s Native Core Design System
Design Systems, Native Mobile
Work done for Mindgrub - 2023
Cerebrum: Mindgrub’s Native Core Design System
Design Systems, Native Mobile
Work done for Mindgrub - 2023
Cerebrum: Mindgrub’s Native Core Design System
Design Systems, Native Mobile
Work done for Mindgrub - 2023
Cerebrum: Mindgrub’s Native Core Design System
Design Systems, Native Mobile
Work done for Mindgrub - 2023
The Opportunity
At Mindgrub, our design and development teams are dedicated to delivering exceptional products and user experiences for our clients. We continually strive to optimize our design and development process to maximize productivity and unleash our creative potential. By doing so, we aim to free up more time for our teams to delve into innovative ideas and push the boundaries of what is possible.
The Solution
To address this challenge, we realized the need for a common language and shared resources between our teams. A design system can be thought of as a set of building blocks or a toolbox that includes pre-designed components, styles, and guidelines. By using a design system, teams can work more efficiently, maintain visual consistency, and save time by not starting from scratch with each new project. This framework allows us to streamline our design and development process while fostering consistency and efficiency.
Cerebrum: Mindgrub’s Open Source Native Mobile Design System
Cerebrum is Mindgrub’s pre-designed, pre-built component library we leverage in our desktop and mobile applications. The components are designed and developed to work natively with their target operating system (i.e. desktop, iOS, Android, etc). It serves as a knowledge repository, providing our production teams with foundational building blocks they can configure and reuse across projects. By leveraging Cerebrum, we can save valuable production time and focus on the unique and custom aspects of each project, leading to more innovative products and process efficiencies.
Cerebrum’s Color System
Using a centralized color palette powered by variables, we enable easy visual alignment throughout our brand ecosystem. Designers, developers, and content creators can refer to these predefined colors, eliminating the need for guesswork and ensuring a cohesive and on-brand visual experience. Whether it's creating a new landing page or designing a social media graphic, these colors act as a reliable reference point, guaranteeing a consistent look and feel.
Primitive Colors
We understand the importance of versatility and multi-channel alignment. To achieve this, we break down our primitive colors according to distinct brand themes, enabling easy customization and alignment across various projects and channels.
By categorizing our core colors into different themes, we provide our design team with a powerful toolkit that can adapt to different branding needs. Out of the box, we offer two distinct themes: Wireframe and JARVIS. We define these hard values as variables across two variable modes that power our themes, with the possibility to override these existing two modes and the ability to add two more.
While these predefined colors provide a starting point, they are not rigid constraints, Cerebrum is designed to be flexible and customizable. When this file is duplicated and configured for a specific project, the two default themes can be overridden and expanded into two additional themes. This level of customization ensures that our design toolkit can adapt to any branding need, maintaining consistency while allowing for creative exploration.
Theme Colors
Leveraging variables we are able to establish layers of design tokens, this lets us set up a relationship between our primitive colors and our theme layer using what is referred to as an alias. You can think of primitive colors as the foundation and the theme layer is a semantic layer that gives functional meaning to each color’s use, ie background, button-primary, border-secondary-hover. With these alias relationships pre-configured our design team has to just update the primitive values to see the theme layer automatically cascade and update throughout their project-specific system. Our semantically driven theme color powered by variables facilitates easy application, reduces friction, and enables consistent visual communication across various channels.
JARVIS
To establish a baseline of what was needed from this global system, we needed a demo application to test our hypothesis and decide what components could fall within the MVP of the system. After a few weeks, we have a fully functional set of components both in Figma and in a live application that flexes what this system can do. We are leveraging the Marvel Comics public API to create an application that displays relational information about Comics, their characters, the creators, the various series a comic might appear in, and the potential Marvel Comic Universe events that overlap a particular comic issue. A user can click through various screens that flex an MVP set of Cerebrum X JARVIS components.
Cerebrum X JARVIS currently boasts 60 reusable components and over 200 variables that can be used in the production of native mobile application wireframes and high-fidelity deliverables.
The Opportunity
At Mindgrub, our design and development teams are dedicated to delivering exceptional products and user experiences for our clients. We continually strive to optimize our design and development process to maximize productivity and unleash our creative potential. By doing so, we aim to free up more time for our teams to delve into innovative ideas and push the boundaries of what is possible.
The Solution
To address this challenge, we realized the need for a common language and shared resources between our teams. A design system can be thought of as a set of building blocks or a toolbox that includes pre-designed components, styles, and guidelines. By using a design system, teams can work more efficiently, maintain visual consistency, and save time by not starting from scratch with each new project. This framework allows us to streamline our design and development process while fostering consistency and efficiency.
Cerebrum: Mindgrub’s Open Source Native Mobile Design System
Cerebrum is Mindgrub’s pre-designed, pre-built component library we leverage in our desktop and mobile applications. The components are designed and developed to work natively with their target operating system (i.e. desktop, iOS, Android, etc). It serves as a knowledge repository, providing our production teams with foundational building blocks they can configure and reuse across projects. By leveraging Cerebrum, we can save valuable production time and focus on the unique and custom aspects of each project, leading to more innovative products and process efficiencies.
Cerebrum’s Color System
Using a centralized color palette powered by variables, we enable easy visual alignment throughout our brand ecosystem. Designers, developers, and content creators can refer to these predefined colors, eliminating the need for guesswork and ensuring a cohesive and on-brand visual experience. Whether it's creating a new landing page or designing a social media graphic, these colors act as a reliable reference point, guaranteeing a consistent look and feel.
Primitive Colors
We understand the importance of versatility and multi-channel alignment. To achieve this, we break down our primitive colors according to distinct brand themes, enabling easy customization and alignment across various projects and channels.
By categorizing our core colors into different themes, we provide our design team with a powerful toolkit that can adapt to different branding needs. Out of the box, we offer two distinct themes: Wireframe and JARVIS. We define these hard values as variables across two variable modes that power our themes, with the possibility to override these existing two modes and the ability to add two more.
While these predefined colors provide a starting point, they are not rigid constraints, Cerebrum is designed to be flexible and customizable. When this file is duplicated and configured for a specific project, the two default themes can be overridden and expanded into two additional themes. This level of customization ensures that our design toolkit can adapt to any branding need, maintaining consistency while allowing for creative exploration.
Theme Colors
Leveraging variables we are able to establish layers of design tokens, this lets us set up a relationship between our primitive colors and our theme layer using what is referred to as an alias. You can think of primitive colors as the foundation and the theme layer is a semantic layer that gives functional meaning to each color’s use, ie background, button-primary, border-secondary-hover. With these alias relationships pre-configured our design team has to just update the primitive values to see the theme layer automatically cascade and update throughout their project-specific system. Our semantically driven theme color powered by variables facilitates easy application, reduces friction, and enables consistent visual communication across various channels.
JARVIS
To establish a baseline of what was needed from this global system, we needed a demo application to test our hypothesis and decide what components could fall within the MVP of the system. After a few weeks, we have a fully functional set of components both in Figma and in a live application that flexes what this system can do. We are leveraging the Marvel Comics public API to create an application that displays relational information about Comics, their characters, the creators, the various series a comic might appear in, and the potential Marvel Comic Universe events that overlap a particular comic issue. A user can click through various screens that flex an MVP set of Cerebrum X JARVIS components.
Cerebrum X JARVIS currently boasts 60 reusable components and over 200 variables that can be used in the production of native mobile application wireframes and high-fidelity deliverables.
The Opportunity
At Mindgrub, our design and development teams are dedicated to delivering exceptional products and user experiences for our clients. We continually strive to optimize our design and development process to maximize productivity and unleash our creative potential. By doing so, we aim to free up more time for our teams to delve into innovative ideas and push the boundaries of what is possible.
The Solution
To address this challenge, we realized the need for a common language and shared resources between our teams. A design system can be thought of as a set of building blocks or a toolbox that includes pre-designed components, styles, and guidelines. By using a design system, teams can work more efficiently, maintain visual consistency, and save time by not starting from scratch with each new project. This framework allows us to streamline our design and development process while fostering consistency and efficiency.
Cerebrum: Mindgrub’s Open Source Native Mobile Design System
Cerebrum is Mindgrub’s pre-designed, pre-built component library we leverage in our desktop and mobile applications. The components are designed and developed to work natively with their target operating system (i.e. desktop, iOS, Android, etc). It serves as a knowledge repository, providing our production teams with foundational building blocks they can configure and reuse across projects. By leveraging Cerebrum, we can save valuable production time and focus on the unique and custom aspects of each project, leading to more innovative products and process efficiencies.
Cerebrum’s Color System
Using a centralized color palette powered by variables, we enable easy visual alignment throughout our brand ecosystem. Designers, developers, and content creators can refer to these predefined colors, eliminating the need for guesswork and ensuring a cohesive and on-brand visual experience. Whether it's creating a new landing page or designing a social media graphic, these colors act as a reliable reference point, guaranteeing a consistent look and feel.
Primitive Colors
We understand the importance of versatility and multi-channel alignment. To achieve this, we break down our primitive colors according to distinct brand themes, enabling easy customization and alignment across various projects and channels.
By categorizing our core colors into different themes, we provide our design team with a powerful toolkit that can adapt to different branding needs. Out of the box, we offer two distinct themes: Wireframe and JARVIS. We define these hard values as variables across two variable modes that power our themes, with the possibility to override these existing two modes and the ability to add two more.
While these predefined colors provide a starting point, they are not rigid constraints, Cerebrum is designed to be flexible and customizable. When this file is duplicated and configured for a specific project, the two default themes can be overridden and expanded into two additional themes. This level of customization ensures that our design toolkit can adapt to any branding need, maintaining consistency while allowing for creative exploration.
Theme Colors
Leveraging variables we are able to establish layers of design tokens, this lets us set up a relationship between our primitive colors and our theme layer using what is referred to as an alias. You can think of primitive colors as the foundation and the theme layer is a semantic layer that gives functional meaning to each color’s use, ie background, button-primary, border-secondary-hover. With these alias relationships pre-configured our design team has to just update the primitive values to see the theme layer automatically cascade and update throughout their project-specific system. Our semantically driven theme color powered by variables facilitates easy application, reduces friction, and enables consistent visual communication across various channels.
JARVIS
To establish a baseline of what was needed from this global system, we needed a demo application to test our hypothesis and decide what components could fall within the MVP of the system. After a few weeks, we have a fully functional set of components both in Figma and in a live application that flexes what this system can do. We are leveraging the Marvel Comics public API to create an application that displays relational information about Comics, their characters, the creators, the various series a comic might appear in, and the potential Marvel Comic Universe events that overlap a particular comic issue. A user can click through various screens that flex an MVP set of Cerebrum X JARVIS components.
Cerebrum X JARVIS currently boasts 60 reusable components and over 200 variables that can be used in the production of native mobile application wireframes and high-fidelity deliverables.
The Opportunity
At Mindgrub, our design and development teams are dedicated to delivering exceptional products and user experiences for our clients. We continually strive to optimize our design and development process to maximize productivity and unleash our creative potential. By doing so, we aim to free up more time for our teams to delve into innovative ideas and push the boundaries of what is possible.
The Solution
To address this challenge, we realized the need for a common language and shared resources between our teams. A design system can be thought of as a set of building blocks or a toolbox that includes pre-designed components, styles, and guidelines. By using a design system, teams can work more efficiently, maintain visual consistency, and save time by not starting from scratch with each new project. This framework allows us to streamline our design and development process while fostering consistency and efficiency.
Cerebrum: Mindgrub’s Open Source Native Mobile Design System
Cerebrum is Mindgrub’s pre-designed, pre-built component library we leverage in our desktop and mobile applications. The components are designed and developed to work natively with their target operating system (i.e. desktop, iOS, Android, etc). It serves as a knowledge repository, providing our production teams with foundational building blocks they can configure and reuse across projects. By leveraging Cerebrum, we can save valuable production time and focus on the unique and custom aspects of each project, leading to more innovative products and process efficiencies.
Cerebrum’s Color System
Using a centralized color palette powered by variables, we enable easy visual alignment throughout our brand ecosystem. Designers, developers, and content creators can refer to these predefined colors, eliminating the need for guesswork and ensuring a cohesive and on-brand visual experience. Whether it's creating a new landing page or designing a social media graphic, these colors act as a reliable reference point, guaranteeing a consistent look and feel.
Primitive Colors
We understand the importance of versatility and multi-channel alignment. To achieve this, we break down our primitive colors according to distinct brand themes, enabling easy customization and alignment across various projects and channels.
By categorizing our core colors into different themes, we provide our design team with a powerful toolkit that can adapt to different branding needs. Out of the box, we offer two distinct themes: Wireframe and JARVIS. We define these hard values as variables across two variable modes that power our themes, with the possibility to override these existing two modes and the ability to add two more.
While these predefined colors provide a starting point, they are not rigid constraints, Cerebrum is designed to be flexible and customizable. When this file is duplicated and configured for a specific project, the two default themes can be overridden and expanded into two additional themes. This level of customization ensures that our design toolkit can adapt to any branding need, maintaining consistency while allowing for creative exploration.
Theme Colors
Leveraging variables we are able to establish layers of design tokens, this lets us set up a relationship between our primitive colors and our theme layer using what is referred to as an alias. You can think of primitive colors as the foundation and the theme layer is a semantic layer that gives functional meaning to each color’s use, ie background, button-primary, border-secondary-hover. With these alias relationships pre-configured our design team has to just update the primitive values to see the theme layer automatically cascade and update throughout their project-specific system. Our semantically driven theme color powered by variables facilitates easy application, reduces friction, and enables consistent visual communication across various channels.
JARVIS
To establish a baseline of what was needed from this global system, we needed a demo application to test our hypothesis and decide what components could fall within the MVP of the system. After a few weeks, we have a fully functional set of components both in Figma and in a live application that flexes what this system can do. We are leveraging the Marvel Comics public API to create an application that displays relational information about Comics, their characters, the creators, the various series a comic might appear in, and the potential Marvel Comic Universe events that overlap a particular comic issue. A user can click through various screens that flex an MVP set of Cerebrum X JARVIS components.
Cerebrum X JARVIS currently boasts 60 reusable components and over 200 variables that can be used in the production of native mobile application wireframes and high-fidelity deliverables.
Evergreen: Sequoia Capital's Global Design System
Design Systems, UX, UI, Wordpress
Work done for Mindgrub - (2021 - 2022)
Evergreen: Sequoia Capital's Global Design System
Design Systems, UX, UI, Wordpress
Work done for Mindgrub - (2021 - 2022)
Evergreen: Sequoia Capital's Global Design System
Design Systems, UX, UI, Wordpress
Work done for Mindgrub - (2021 - 2022)
Evergreen: Sequoia Capital's Global Design System
Design Systems, UX, UI, Wordpress
Work done for Mindgrub - (2021 - 2022)
The Opportunity
In the initial project phase, we had the opportunity to address several critical challenges. We were provided with a small discovery budget aimed at conducting an in-depth audit of existing designs and bridging the gap between the client's design team and our development team. Our main objective was to gain a comprehensive understanding of the design language and approach adopted by the client.
Audit Findings
During the audit, we focused on multiple aspects:
WCAG 2.1 Compliance: Identifying flags and concerns related to accessibility to ensure an inclusive user experience.
UX Recommendations: Providing insights and recommendations to enhance the overall user experience.
Componentization: Suggesting strategies for componentizing the provided designs to improve efficiency and maintainability.
Our audit uncovered several key concerns:
Incomplete Component List: The existing components did not comprehensively cover all design elements, leading to potential gaps in functionality.
Lack of Transition and Micro-Interaction Annotations: The absence of detailed annotations hindered the understanding of interactive elements, impacting user engagement.
Accessibility Challenges: There were significant accessibility concerns that needed to be addressed to meet WCAG 2.1 standards and ensure an accessible user interface.
Complex Class Styles: The designs relied on a total of 79 unique class styles with no discernable logic guiding their usage, creating ambiguity in their application.
The Solution
To tackle these challenges and facilitate collaboration between design and development, we developed a structured solution based on the audit findings.
Roadmap from Audit
We initiated the project by providing the client's design team with a clear roadmap based on the audit. This roadmap outlined an atomic approach to deconstructing the designs, ensuring a more systematic and efficient workflow.
Component-Based Type Rules
While component-based type classes were already in place, further enhancements were needed. We extended these classes to account for various breakpoints, ensuring consistent typography across different screen sizes. This involved breaking down component-based classes into responsive type rules, setting clear expectations for both developers and the client.
Addressing the Complexity of "Inks"
One of the central components in the design, known as "Inks," posed a complex challenge due to its multifaceted nature, involving color, text, images, and illustrations. We addressed this complexity by defining logic and variations for the Inks, working closely with the client to ensure alignment and clarity.
Addressing the Complexity of "Inks"
One of the central components in the design, known as "Inks," posed a complex challenge due to its multifaceted nature, involving color, text, images, and illustrations. We addressed this complexity by defining logic and variations for the Inks, working closely with the client to ensure alignment and clarity.
Optimizing Blog Posts and Stories
The design of blog posts and stories exhibited high variation, prompting us to leverage WordPress Gutenberg for streamlined content management. We meticulously mapped out design variations, identified necessary Gutenberg blocks, determined custom development requirements, and specified elements not included in the minimum viable product (MVP). Our close collaboration with the client ensured the validation of assumptions and the finalization of requirements.
Prioritizing and Deferring Non-Essential Functionalities
In the pursuit of delivering the MVP within a tight timeline, we prioritized essential functionalities while deferring non-vital components, such as search, breadcrumbs, and accordion groups, to a second phase of development.
Global Collaboration
We expanded the project to encompass the development of designs for child sites in India and China. Our primary goal was to maximize the utilization of MVP components to reduce development time for the launch. We identified shared components between the U.S. and India designs, outlined completion timelines for these global components, and addressed any concerns related to varying functionality that might require additional development efforts. Furthermore, we provided invaluable assistance to the client's designer in finalizing the India-specific designs required for the initial launch.
Eyes on the Prize
With the successful launch of the MVP, our efforts shifted to maintaining a well-organized backlog and continuing to address project requirements and timelines. The project's scope expanded to include designs for India and China, demonstrating our commitment to efficient component utilization and streamlined development processes across multiple regions.
The Opportunity
In the initial project phase, we had the opportunity to address several critical challenges. We were provided with a small discovery budget aimed at conducting an in-depth audit of existing designs and bridging the gap between the client's design team and our development team. Our main objective was to gain a comprehensive understanding of the design language and approach adopted by the client.
Audit Findings
During the audit, we focused on multiple aspects:
WCAG 2.1 Compliance: Identifying flags and concerns related to accessibility to ensure an inclusive user experience.
UX Recommendations: Providing insights and recommendations to enhance the overall user experience.
Componentization: Suggesting strategies for componentizing the provided designs to improve efficiency and maintainability.
Our audit uncovered several key concerns:
Incomplete Component List: The existing components did not comprehensively cover all design elements, leading to potential gaps in functionality.
Lack of Transition and Micro-Interaction Annotations: The absence of detailed annotations hindered the understanding of interactive elements, impacting user engagement.
Accessibility Challenges: There were significant accessibility concerns that needed to be addressed to meet WCAG 2.1 standards and ensure an accessible user interface.
Complex Class Styles: The designs relied on a total of 79 unique class styles with no discernable logic guiding their usage, creating ambiguity in their application.
The Solution
To tackle these challenges and facilitate collaboration between design and development, we developed a structured solution based on the audit findings.
Roadmap from Audit
We initiated the project by providing the client's design team with a clear roadmap based on the audit. This roadmap outlined an atomic approach to deconstructing the designs, ensuring a more systematic and efficient workflow.
Component-Based Type Rules
While component-based type classes were already in place, further enhancements were needed. We extended these classes to account for various breakpoints, ensuring consistent typography across different screen sizes. This involved breaking down component-based classes into responsive type rules, setting clear expectations for both developers and the client.
Addressing the Complexity of "Inks"
One of the central components in the design, known as "Inks," posed a complex challenge due to its multifaceted nature, involving color, text, images, and illustrations. We addressed this complexity by defining logic and variations for the Inks, working closely with the client to ensure alignment and clarity.
Addressing the Complexity of "Inks"
One of the central components in the design, known as "Inks," posed a complex challenge due to its multifaceted nature, involving color, text, images, and illustrations. We addressed this complexity by defining logic and variations for the Inks, working closely with the client to ensure alignment and clarity.
Optimizing Blog Posts and Stories
The design of blog posts and stories exhibited high variation, prompting us to leverage WordPress Gutenberg for streamlined content management. We meticulously mapped out design variations, identified necessary Gutenberg blocks, determined custom development requirements, and specified elements not included in the minimum viable product (MVP). Our close collaboration with the client ensured the validation of assumptions and the finalization of requirements.
Prioritizing and Deferring Non-Essential Functionalities
In the pursuit of delivering the MVP within a tight timeline, we prioritized essential functionalities while deferring non-vital components, such as search, breadcrumbs, and accordion groups, to a second phase of development.
Global Collaboration
We expanded the project to encompass the development of designs for child sites in India and China. Our primary goal was to maximize the utilization of MVP components to reduce development time for the launch. We identified shared components between the U.S. and India designs, outlined completion timelines for these global components, and addressed any concerns related to varying functionality that might require additional development efforts. Furthermore, we provided invaluable assistance to the client's designer in finalizing the India-specific designs required for the initial launch.
Eyes on the Prize
With the successful launch of the MVP, our efforts shifted to maintaining a well-organized backlog and continuing to address project requirements and timelines. The project's scope expanded to include designs for India and China, demonstrating our commitment to efficient component utilization and streamlined development processes across multiple regions.
The Opportunity
In the initial project phase, we had the opportunity to address several critical challenges. We were provided with a small discovery budget aimed at conducting an in-depth audit of existing designs and bridging the gap between the client's design team and our development team. Our main objective was to gain a comprehensive understanding of the design language and approach adopted by the client.
Audit Findings
During the audit, we focused on multiple aspects:
WCAG 2.1 Compliance: Identifying flags and concerns related to accessibility to ensure an inclusive user experience.
UX Recommendations: Providing insights and recommendations to enhance the overall user experience.
Componentization: Suggesting strategies for componentizing the provided designs to improve efficiency and maintainability.
Our audit uncovered several key concerns:
Incomplete Component List: The existing components did not comprehensively cover all design elements, leading to potential gaps in functionality.
Lack of Transition and Micro-Interaction Annotations: The absence of detailed annotations hindered the understanding of interactive elements, impacting user engagement.
Accessibility Challenges: There were significant accessibility concerns that needed to be addressed to meet WCAG 2.1 standards and ensure an accessible user interface.
Complex Class Styles: The designs relied on a total of 79 unique class styles with no discernable logic guiding their usage, creating ambiguity in their application.
The Solution
To tackle these challenges and facilitate collaboration between design and development, we developed a structured solution based on the audit findings.
Roadmap from Audit
We initiated the project by providing the client's design team with a clear roadmap based on the audit. This roadmap outlined an atomic approach to deconstructing the designs, ensuring a more systematic and efficient workflow.
Component-Based Type Rules
While component-based type classes were already in place, further enhancements were needed. We extended these classes to account for various breakpoints, ensuring consistent typography across different screen sizes. This involved breaking down component-based classes into responsive type rules, setting clear expectations for both developers and the client.
Addressing the Complexity of "Inks"
One of the central components in the design, known as "Inks," posed a complex challenge due to its multifaceted nature, involving color, text, images, and illustrations. We addressed this complexity by defining logic and variations for the Inks, working closely with the client to ensure alignment and clarity.
Addressing the Complexity of "Inks"
One of the central components in the design, known as "Inks," posed a complex challenge due to its multifaceted nature, involving color, text, images, and illustrations. We addressed this complexity by defining logic and variations for the Inks, working closely with the client to ensure alignment and clarity.
Optimizing Blog Posts and Stories
The design of blog posts and stories exhibited high variation, prompting us to leverage WordPress Gutenberg for streamlined content management. We meticulously mapped out design variations, identified necessary Gutenberg blocks, determined custom development requirements, and specified elements not included in the minimum viable product (MVP). Our close collaboration with the client ensured the validation of assumptions and the finalization of requirements.
Prioritizing and Deferring Non-Essential Functionalities
In the pursuit of delivering the MVP within a tight timeline, we prioritized essential functionalities while deferring non-vital components, such as search, breadcrumbs, and accordion groups, to a second phase of development.
Global Collaboration
We expanded the project to encompass the development of designs for child sites in India and China. Our primary goal was to maximize the utilization of MVP components to reduce development time for the launch. We identified shared components between the U.S. and India designs, outlined completion timelines for these global components, and addressed any concerns related to varying functionality that might require additional development efforts. Furthermore, we provided invaluable assistance to the client's designer in finalizing the India-specific designs required for the initial launch.
Eyes on the Prize
With the successful launch of the MVP, our efforts shifted to maintaining a well-organized backlog and continuing to address project requirements and timelines. The project's scope expanded to include designs for India and China, demonstrating our commitment to efficient component utilization and streamlined development processes across multiple regions.
The Opportunity
In the initial project phase, we had the opportunity to address several critical challenges. We were provided with a small discovery budget aimed at conducting an in-depth audit of existing designs and bridging the gap between the client's design team and our development team. Our main objective was to gain a comprehensive understanding of the design language and approach adopted by the client.
Audit Findings
During the audit, we focused on multiple aspects:
WCAG 2.1 Compliance: Identifying flags and concerns related to accessibility to ensure an inclusive user experience.
UX Recommendations: Providing insights and recommendations to enhance the overall user experience.
Componentization: Suggesting strategies for componentizing the provided designs to improve efficiency and maintainability.
Our audit uncovered several key concerns:
Incomplete Component List: The existing components did not comprehensively cover all design elements, leading to potential gaps in functionality.
Lack of Transition and Micro-Interaction Annotations: The absence of detailed annotations hindered the understanding of interactive elements, impacting user engagement.
Accessibility Challenges: There were significant accessibility concerns that needed to be addressed to meet WCAG 2.1 standards and ensure an accessible user interface.
Complex Class Styles: The designs relied on a total of 79 unique class styles with no discernable logic guiding their usage, creating ambiguity in their application.
The Solution
To tackle these challenges and facilitate collaboration between design and development, we developed a structured solution based on the audit findings.
Roadmap from Audit
We initiated the project by providing the client's design team with a clear roadmap based on the audit. This roadmap outlined an atomic approach to deconstructing the designs, ensuring a more systematic and efficient workflow.
Component-Based Type Rules
While component-based type classes were already in place, further enhancements were needed. We extended these classes to account for various breakpoints, ensuring consistent typography across different screen sizes. This involved breaking down component-based classes into responsive type rules, setting clear expectations for both developers and the client.
Addressing the Complexity of "Inks"
One of the central components in the design, known as "Inks," posed a complex challenge due to its multifaceted nature, involving color, text, images, and illustrations. We addressed this complexity by defining logic and variations for the Inks, working closely with the client to ensure alignment and clarity.
Addressing the Complexity of "Inks"
One of the central components in the design, known as "Inks," posed a complex challenge due to its multifaceted nature, involving color, text, images, and illustrations. We addressed this complexity by defining logic and variations for the Inks, working closely with the client to ensure alignment and clarity.
Optimizing Blog Posts and Stories
The design of blog posts and stories exhibited high variation, prompting us to leverage WordPress Gutenberg for streamlined content management. We meticulously mapped out design variations, identified necessary Gutenberg blocks, determined custom development requirements, and specified elements not included in the minimum viable product (MVP). Our close collaboration with the client ensured the validation of assumptions and the finalization of requirements.
Prioritizing and Deferring Non-Essential Functionalities
In the pursuit of delivering the MVP within a tight timeline, we prioritized essential functionalities while deferring non-vital components, such as search, breadcrumbs, and accordion groups, to a second phase of development.
Global Collaboration
We expanded the project to encompass the development of designs for child sites in India and China. Our primary goal was to maximize the utilization of MVP components to reduce development time for the launch. We identified shared components between the U.S. and India designs, outlined completion timelines for these global components, and addressed any concerns related to varying functionality that might require additional development efforts. Furthermore, we provided invaluable assistance to the client's designer in finalizing the India-specific designs required for the initial launch.
Eyes on the Prize
With the successful launch of the MVP, our efforts shifted to maintaining a well-organized backlog and continuing to address project requirements and timelines. The project's scope expanded to include designs for India and China, demonstrating our commitment to efficient component utilization and streamlined development processes across multiple regions.
LKE My Account
Design Systems, UX, UI, Web App
Work done for Mindgrub - (2022)
LKE My Account
Design Systems, UX, UI, Web App
Work done for Mindgrub - (2022)
LKE My Account
Design Systems, UX, UI, Web App
Work done for Mindgrub - (2022)
LKE My Account
Design Systems, UX, UI, Web App
Work done for Mindgrub - (2022)
The Opportunity
The LKE MyAccount web redesign project was initiated to revamp the My Account website for an improved user experience. This endeavor was rooted in insights gained from stakeholder interviews and validated through user testing. The project's primary objectives were simplifying workflows, empowering users, reducing call volume, enhancing security, and optimizing the point of entry.
The Solution
Our solution was designed to elevate the user experience (UX) across various dimensions. Drawing from key takeaways derived from stakeholder interviews and validated through user testing, the project unfolded in a structured manner.
Simplifying Workflows and Increasing Hand-Holding
User-Centric Workflow Design: We adopted a user-centric approach to workflow design, prioritizing clarity and ease of use. This entailed introducing simplified guided workflows to offer a more welcoming and intuitive experience.
Usability Testing: Continuous usability testing was conducted to ensure the new workflows aligned with user expectations, with feedback driving iterative refinements.
Prioritizing Relevant Features and Creating Custom Experiences
Customization Options: We recommended customization features to allow users to tailor their dashboard to their preferences. This included enabling users to select their most-viewed features for quicker access.
User Type Identification: A user type identification system was introduced to ensure that feature prioritization aligned with users' specific needs.
Empowering Users and Reducing Call Volume
Simplified Language: Content was revised to reduce industry-specific terminology, offering clear, actionable recommendations.
Self-Service Tools: Additional self-service tools were introduced to empower users to complete tasks independently.
Optimizing Point of Entry
Registration Process Improvement: The registration process was streamlined to minimize user frustration and enhance the first-touch experience.
User Journey Mapping: User journey mapping identified pain points in the registration process, guiding iterative improvements.
Optimizing Point of Entry
Registration Process Improvement: The registration process was streamlined to minimize user frustration and enhance the first-touch experience.
User Journey Mapping: User journey mapping identified pain points in the registration process, guiding iterative improvements.
User Testing
We conducted unmoderated user testing with current residential participants, leveraging the UserZoom GO platform (formerly known as Validately). As part of our user testing strategy, we created a fully clickable prototype in Figma, allowing participants to interact with and explore the redesigned website in a realistic and immersive manner.
What Went Well?
Throughout the user testing process, we observed several positive aspects of the redesigned MyAccount website:
User-Friendly Design: Participants consistently praised the user-friendly design, highlighting its intuitive nature.
Efficient Task Execution: Users found that tasks were executed with ease and efficiency, reflecting the improved usability of the platform.
Clear and Concise Information: The presentation of information on the website was commended for its clarity and conciseness.
Visually Appealing Design: Test participants noted that the design was not only functional but also visually appealing, enhancing the overall user experience.
Design Recommendations
Reducing Double Clicks to Initiate Workflows (High Priority): Addressing the confusion related to initiating workflows from dashboard cards by eliminating the need for an intermediate landing page. Users should be able to directly activate related workflows.
Clarifying Move and Stop Service (High Priority): Mitigating confusion between move and stop service requests by emphasizing move service and visually differentiating it from other options. Alternatively, consider simplifying the process with start service and stop service choices to streamline user interactions.
Auto-Selecting Cards with a Single Selectable Option (Medium Priority): Simplifying workflows by auto-selecting options when only one choice is available, speeding up task completion.
Reducing Progress Indicator Size (Low Priority): Addressing potential distraction caused by the size of progress indicators, with slight de-emphasis for a less obtrusive user experience.
Participant Statistics
Tests were distributed using a marketing partner through LKE.
A total of 1,100 participants engaged in the marketing survey.
Out of these, 55 users submitted testing sessions.
42 out of the 55 testing sessions were successfully completed.
Of the 13 users who did not complete testing, 12 noted difficulties with the testing tool or navigating the Figma prototype.
The fastest test completion took 7 minutes and 26 seconds.
The slowest test completion took 51 minutes and 12 seconds.
Main Research Goals
Our primary research goals during user testing were to:
Validate that users could seamlessly navigate the redesigned website.
Identify any design-related issues in the product or service.
Uncover opportunities to further improve the user experience.
Gain insights into the behavior and preferences of our target users.
By conducting user testing with a fully clickable Figma prototype, we were able to achieve these goals effectively and obtain valuable feedback to refine the MyAccount web redesign.
The Opportunity
The LKE MyAccount web redesign project was initiated to revamp the My Account website for an improved user experience. This endeavor was rooted in insights gained from stakeholder interviews and validated through user testing. The project's primary objectives were simplifying workflows, empowering users, reducing call volume, enhancing security, and optimizing the point of entry.
The Solution
Our solution was designed to elevate the user experience (UX) across various dimensions. Drawing from key takeaways derived from stakeholder interviews and validated through user testing, the project unfolded in a structured manner.
Simplifying Workflows and Increasing Hand-Holding
User-Centric Workflow Design: We adopted a user-centric approach to workflow design, prioritizing clarity and ease of use. This entailed introducing simplified guided workflows to offer a more welcoming and intuitive experience.
Usability Testing: Continuous usability testing was conducted to ensure the new workflows aligned with user expectations, with feedback driving iterative refinements.
Prioritizing Relevant Features and Creating Custom Experiences
Customization Options: We recommended customization features to allow users to tailor their dashboard to their preferences. This included enabling users to select their most-viewed features for quicker access.
User Type Identification: A user type identification system was introduced to ensure that feature prioritization aligned with users' specific needs.
Empowering Users and Reducing Call Volume
Simplified Language: Content was revised to reduce industry-specific terminology, offering clear, actionable recommendations.
Self-Service Tools: Additional self-service tools were introduced to empower users to complete tasks independently.
Optimizing Point of Entry
Registration Process Improvement: The registration process was streamlined to minimize user frustration and enhance the first-touch experience.
User Journey Mapping: User journey mapping identified pain points in the registration process, guiding iterative improvements.
Optimizing Point of Entry
Registration Process Improvement: The registration process was streamlined to minimize user frustration and enhance the first-touch experience.
User Journey Mapping: User journey mapping identified pain points in the registration process, guiding iterative improvements.
User Testing
We conducted unmoderated user testing with current residential participants, leveraging the UserZoom GO platform (formerly known as Validately). As part of our user testing strategy, we created a fully clickable prototype in Figma, allowing participants to interact with and explore the redesigned website in a realistic and immersive manner.
What Went Well?
Throughout the user testing process, we observed several positive aspects of the redesigned MyAccount website:
User-Friendly Design: Participants consistently praised the user-friendly design, highlighting its intuitive nature.
Efficient Task Execution: Users found that tasks were executed with ease and efficiency, reflecting the improved usability of the platform.
Clear and Concise Information: The presentation of information on the website was commended for its clarity and conciseness.
Visually Appealing Design: Test participants noted that the design was not only functional but also visually appealing, enhancing the overall user experience.
Design Recommendations
Reducing Double Clicks to Initiate Workflows (High Priority): Addressing the confusion related to initiating workflows from dashboard cards by eliminating the need for an intermediate landing page. Users should be able to directly activate related workflows.
Clarifying Move and Stop Service (High Priority): Mitigating confusion between move and stop service requests by emphasizing move service and visually differentiating it from other options. Alternatively, consider simplifying the process with start service and stop service choices to streamline user interactions.
Auto-Selecting Cards with a Single Selectable Option (Medium Priority): Simplifying workflows by auto-selecting options when only one choice is available, speeding up task completion.
Reducing Progress Indicator Size (Low Priority): Addressing potential distraction caused by the size of progress indicators, with slight de-emphasis for a less obtrusive user experience.
Participant Statistics
Tests were distributed using a marketing partner through LKE.
A total of 1,100 participants engaged in the marketing survey.
Out of these, 55 users submitted testing sessions.
42 out of the 55 testing sessions were successfully completed.
Of the 13 users who did not complete testing, 12 noted difficulties with the testing tool or navigating the Figma prototype.
The fastest test completion took 7 minutes and 26 seconds.
The slowest test completion took 51 minutes and 12 seconds.
Main Research Goals
Our primary research goals during user testing were to:
Validate that users could seamlessly navigate the redesigned website.
Identify any design-related issues in the product or service.
Uncover opportunities to further improve the user experience.
Gain insights into the behavior and preferences of our target users.
By conducting user testing with a fully clickable Figma prototype, we were able to achieve these goals effectively and obtain valuable feedback to refine the MyAccount web redesign.
The Opportunity
The LKE MyAccount web redesign project was initiated to revamp the My Account website for an improved user experience. This endeavor was rooted in insights gained from stakeholder interviews and validated through user testing. The project's primary objectives were simplifying workflows, empowering users, reducing call volume, enhancing security, and optimizing the point of entry.
The Solution
Our solution was designed to elevate the user experience (UX) across various dimensions. Drawing from key takeaways derived from stakeholder interviews and validated through user testing, the project unfolded in a structured manner.
Simplifying Workflows and Increasing Hand-Holding
User-Centric Workflow Design: We adopted a user-centric approach to workflow design, prioritizing clarity and ease of use. This entailed introducing simplified guided workflows to offer a more welcoming and intuitive experience.
Usability Testing: Continuous usability testing was conducted to ensure the new workflows aligned with user expectations, with feedback driving iterative refinements.
Prioritizing Relevant Features and Creating Custom Experiences
Customization Options: We recommended customization features to allow users to tailor their dashboard to their preferences. This included enabling users to select their most-viewed features for quicker access.
User Type Identification: A user type identification system was introduced to ensure that feature prioritization aligned with users' specific needs.
Empowering Users and Reducing Call Volume
Simplified Language: Content was revised to reduce industry-specific terminology, offering clear, actionable recommendations.
Self-Service Tools: Additional self-service tools were introduced to empower users to complete tasks independently.
Optimizing Point of Entry
Registration Process Improvement: The registration process was streamlined to minimize user frustration and enhance the first-touch experience.
User Journey Mapping: User journey mapping identified pain points in the registration process, guiding iterative improvements.
Optimizing Point of Entry
Registration Process Improvement: The registration process was streamlined to minimize user frustration and enhance the first-touch experience.
User Journey Mapping: User journey mapping identified pain points in the registration process, guiding iterative improvements.
User Testing
We conducted unmoderated user testing with current residential participants, leveraging the UserZoom GO platform (formerly known as Validately). As part of our user testing strategy, we created a fully clickable prototype in Figma, allowing participants to interact with and explore the redesigned website in a realistic and immersive manner.
What Went Well?
Throughout the user testing process, we observed several positive aspects of the redesigned MyAccount website:
User-Friendly Design: Participants consistently praised the user-friendly design, highlighting its intuitive nature.
Efficient Task Execution: Users found that tasks were executed with ease and efficiency, reflecting the improved usability of the platform.
Clear and Concise Information: The presentation of information on the website was commended for its clarity and conciseness.
Visually Appealing Design: Test participants noted that the design was not only functional but also visually appealing, enhancing the overall user experience.
Design Recommendations
Reducing Double Clicks to Initiate Workflows (High Priority): Addressing the confusion related to initiating workflows from dashboard cards by eliminating the need for an intermediate landing page. Users should be able to directly activate related workflows.
Clarifying Move and Stop Service (High Priority): Mitigating confusion between move and stop service requests by emphasizing move service and visually differentiating it from other options. Alternatively, consider simplifying the process with start service and stop service choices to streamline user interactions.
Auto-Selecting Cards with a Single Selectable Option (Medium Priority): Simplifying workflows by auto-selecting options when only one choice is available, speeding up task completion.
Reducing Progress Indicator Size (Low Priority): Addressing potential distraction caused by the size of progress indicators, with slight de-emphasis for a less obtrusive user experience.
Participant Statistics
Tests were distributed using a marketing partner through LKE.
A total of 1,100 participants engaged in the marketing survey.
Out of these, 55 users submitted testing sessions.
42 out of the 55 testing sessions were successfully completed.
Of the 13 users who did not complete testing, 12 noted difficulties with the testing tool or navigating the Figma prototype.
The fastest test completion took 7 minutes and 26 seconds.
The slowest test completion took 51 minutes and 12 seconds.
Main Research Goals
Our primary research goals during user testing were to:
Validate that users could seamlessly navigate the redesigned website.
Identify any design-related issues in the product or service.
Uncover opportunities to further improve the user experience.
Gain insights into the behavior and preferences of our target users.
By conducting user testing with a fully clickable Figma prototype, we were able to achieve these goals effectively and obtain valuable feedback to refine the MyAccount web redesign.
The Opportunity
The LKE MyAccount web redesign project was initiated to revamp the My Account website for an improved user experience. This endeavor was rooted in insights gained from stakeholder interviews and validated through user testing. The project's primary objectives were simplifying workflows, empowering users, reducing call volume, enhancing security, and optimizing the point of entry.
The Solution
Our solution was designed to elevate the user experience (UX) across various dimensions. Drawing from key takeaways derived from stakeholder interviews and validated through user testing, the project unfolded in a structured manner.
Simplifying Workflows and Increasing Hand-Holding
User-Centric Workflow Design: We adopted a user-centric approach to workflow design, prioritizing clarity and ease of use. This entailed introducing simplified guided workflows to offer a more welcoming and intuitive experience.
Usability Testing: Continuous usability testing was conducted to ensure the new workflows aligned with user expectations, with feedback driving iterative refinements.
Prioritizing Relevant Features and Creating Custom Experiences
Customization Options: We recommended customization features to allow users to tailor their dashboard to their preferences. This included enabling users to select their most-viewed features for quicker access.
User Type Identification: A user type identification system was introduced to ensure that feature prioritization aligned with users' specific needs.
Empowering Users and Reducing Call Volume
Simplified Language: Content was revised to reduce industry-specific terminology, offering clear, actionable recommendations.
Self-Service Tools: Additional self-service tools were introduced to empower users to complete tasks independently.
Optimizing Point of Entry
Registration Process Improvement: The registration process was streamlined to minimize user frustration and enhance the first-touch experience.
User Journey Mapping: User journey mapping identified pain points in the registration process, guiding iterative improvements.
Optimizing Point of Entry
Registration Process Improvement: The registration process was streamlined to minimize user frustration and enhance the first-touch experience.
User Journey Mapping: User journey mapping identified pain points in the registration process, guiding iterative improvements.
User Testing
We conducted unmoderated user testing with current residential participants, leveraging the UserZoom GO platform (formerly known as Validately). As part of our user testing strategy, we created a fully clickable prototype in Figma, allowing participants to interact with and explore the redesigned website in a realistic and immersive manner.
What Went Well?
Throughout the user testing process, we observed several positive aspects of the redesigned MyAccount website:
User-Friendly Design: Participants consistently praised the user-friendly design, highlighting its intuitive nature.
Efficient Task Execution: Users found that tasks were executed with ease and efficiency, reflecting the improved usability of the platform.
Clear and Concise Information: The presentation of information on the website was commended for its clarity and conciseness.
Visually Appealing Design: Test participants noted that the design was not only functional but also visually appealing, enhancing the overall user experience.
Design Recommendations
Reducing Double Clicks to Initiate Workflows (High Priority): Addressing the confusion related to initiating workflows from dashboard cards by eliminating the need for an intermediate landing page. Users should be able to directly activate related workflows.
Clarifying Move and Stop Service (High Priority): Mitigating confusion between move and stop service requests by emphasizing move service and visually differentiating it from other options. Alternatively, consider simplifying the process with start service and stop service choices to streamline user interactions.
Auto-Selecting Cards with a Single Selectable Option (Medium Priority): Simplifying workflows by auto-selecting options when only one choice is available, speeding up task completion.
Reducing Progress Indicator Size (Low Priority): Addressing potential distraction caused by the size of progress indicators, with slight de-emphasis for a less obtrusive user experience.
Participant Statistics
Tests were distributed using a marketing partner through LKE.
A total of 1,100 participants engaged in the marketing survey.
Out of these, 55 users submitted testing sessions.
42 out of the 55 testing sessions were successfully completed.
Of the 13 users who did not complete testing, 12 noted difficulties with the testing tool or navigating the Figma prototype.
The fastest test completion took 7 minutes and 26 seconds.
The slowest test completion took 51 minutes and 12 seconds.
Main Research Goals
Our primary research goals during user testing were to:
Validate that users could seamlessly navigate the redesigned website.
Identify any design-related issues in the product or service.
Uncover opportunities to further improve the user experience.
Gain insights into the behavior and preferences of our target users.
By conducting user testing with a fully clickable Figma prototype, we were able to achieve these goals effectively and obtain valuable feedback to refine the MyAccount web redesign.
ARSENAL: TAK's Design System
Design Systems, UX, UI, Android Mobile
Work done for Mindgrub - (2020 - Present)
ARSENAL: TAK's Design System
Design Systems, UX, UI, Android Mobile
Work done for Mindgrub - (2020 - Present)
ARSENAL: TAK's Design System
Design Systems, UX, UI, Android Mobile
Work done for Mindgrub - (2020 - Present)
ARSENAL: TAK's Design System
Design Systems, UX, UI, Android Mobile
Work done for Mindgrub - (2020 - Present)
The Opportunity
In high-stress, hazardous environments, situational awareness is paramount for mission success. Originally developed by the Air Force Research Laboratory, TAK serves as a digital system, now maintained by the TAK Product Center, that facilitates real-time data exchange, benefiting military personnel, first responders, and commercial users alike. As mobile capabilities evolve, it's imperative for TAK to evolve in tandem with the ever-changing needs of operators. The TAK interface must remain intuitive and adaptable to diverse devices, scenarios, use cases, and missions.
The Solution
Our journey began with strategic discussions to define long-term objectives and an overall strategy. User experience research formed the foundation for the new system, allowing us to align our efforts with user needs. We fostered close collaboration with the TAK team, engaging in ongoing feedback exchange regarding wireframes, designs, and development implementations. Our primary focus was enhancing the platform's UX/UI, but we also revamped functionality to improve usability and performance. Adhering to atomic design system principles, we established a consistent UX/UI across different properties, ensuring seamless transitions between applications.`
A Cohesive System
The new TAK system aimed to deliver a more robust and intuitive user experience by addressing several key objectives:
Scalability across diverse viewport sizes, device types, orientations, and zoom levels
Inclusive access for partners to contribute to a universal set of TAK developer standards
Shared UX/UI and data flow for seamless transitions between tools
Consideration for diverse user types and their overlapping or distinct needs across various apps
An ongoing feedback loop from users, prioritizing issues and opportunities that matter to them
Enriched, Scalable Features
Our team introduced several enhancements to the TAK interface, elevating map space, functionality, and visibility. The new UX/UI features included:
Customizable, Dynamic Navigation: Maximizing visible map space without compromising functionality
Minimalist Design: Reducing cognitive load for users
Consistent User Interfaces: Optimizing the experience for both operators and developers
Balanced Color Scheme: Preventing glare and extreme contrast
Dynamic Dropdown Menu: Enhancing navigation and map interface visibility
Continued Collaboration
The collaboration between the TAK Product Center and Mindgrub remains ongoing, with a focus on iterative improvements based on user feedback. Additionally, we are actively involved in the redesign and development of takmaps.com and tak.gov, the creation of the TAKX platform, and the development of training and education tools for TAK products. By designing and implementing a best-in-class solution across various interfaces, development teams, and partnerships, we aim to reduce development costs associated with shared components, minimize the need for retraining, and ultimately enhance the effectiveness of our country's warfighters and first responders.
The Opportunity
In high-stress, hazardous environments, situational awareness is paramount for mission success. Originally developed by the Air Force Research Laboratory, TAK serves as a digital system, now maintained by the TAK Product Center, that facilitates real-time data exchange, benefiting military personnel, first responders, and commercial users alike. As mobile capabilities evolve, it's imperative for TAK to evolve in tandem with the ever-changing needs of operators. The TAK interface must remain intuitive and adaptable to diverse devices, scenarios, use cases, and missions.
The Solution
Our journey began with strategic discussions to define long-term objectives and an overall strategy. User experience research formed the foundation for the new system, allowing us to align our efforts with user needs. We fostered close collaboration with the TAK team, engaging in ongoing feedback exchange regarding wireframes, designs, and development implementations. Our primary focus was enhancing the platform's UX/UI, but we also revamped functionality to improve usability and performance. Adhering to atomic design system principles, we established a consistent UX/UI across different properties, ensuring seamless transitions between applications.`
A Cohesive System
The new TAK system aimed to deliver a more robust and intuitive user experience by addressing several key objectives:
Scalability across diverse viewport sizes, device types, orientations, and zoom levels
Inclusive access for partners to contribute to a universal set of TAK developer standards
Shared UX/UI and data flow for seamless transitions between tools
Consideration for diverse user types and their overlapping or distinct needs across various apps
An ongoing feedback loop from users, prioritizing issues and opportunities that matter to them
Enriched, Scalable Features
Our team introduced several enhancements to the TAK interface, elevating map space, functionality, and visibility. The new UX/UI features included:
Customizable, Dynamic Navigation: Maximizing visible map space without compromising functionality
Minimalist Design: Reducing cognitive load for users
Consistent User Interfaces: Optimizing the experience for both operators and developers
Balanced Color Scheme: Preventing glare and extreme contrast
Dynamic Dropdown Menu: Enhancing navigation and map interface visibility
Continued Collaboration
The collaboration between the TAK Product Center and Mindgrub remains ongoing, with a focus on iterative improvements based on user feedback. Additionally, we are actively involved in the redesign and development of takmaps.com and tak.gov, the creation of the TAKX platform, and the development of training and education tools for TAK products. By designing and implementing a best-in-class solution across various interfaces, development teams, and partnerships, we aim to reduce development costs associated with shared components, minimize the need for retraining, and ultimately enhance the effectiveness of our country's warfighters and first responders.
The Opportunity
In high-stress, hazardous environments, situational awareness is paramount for mission success. Originally developed by the Air Force Research Laboratory, TAK serves as a digital system, now maintained by the TAK Product Center, that facilitates real-time data exchange, benefiting military personnel, first responders, and commercial users alike. As mobile capabilities evolve, it's imperative for TAK to evolve in tandem with the ever-changing needs of operators. The TAK interface must remain intuitive and adaptable to diverse devices, scenarios, use cases, and missions.
The Solution
Our journey began with strategic discussions to define long-term objectives and an overall strategy. User experience research formed the foundation for the new system, allowing us to align our efforts with user needs. We fostered close collaboration with the TAK team, engaging in ongoing feedback exchange regarding wireframes, designs, and development implementations. Our primary focus was enhancing the platform's UX/UI, but we also revamped functionality to improve usability and performance. Adhering to atomic design system principles, we established a consistent UX/UI across different properties, ensuring seamless transitions between applications.`
A Cohesive System
The new TAK system aimed to deliver a more robust and intuitive user experience by addressing several key objectives:
Scalability across diverse viewport sizes, device types, orientations, and zoom levels
Inclusive access for partners to contribute to a universal set of TAK developer standards
Shared UX/UI and data flow for seamless transitions between tools
Consideration for diverse user types and their overlapping or distinct needs across various apps
An ongoing feedback loop from users, prioritizing issues and opportunities that matter to them
Enriched, Scalable Features
Our team introduced several enhancements to the TAK interface, elevating map space, functionality, and visibility. The new UX/UI features included:
Customizable, Dynamic Navigation: Maximizing visible map space without compromising functionality
Minimalist Design: Reducing cognitive load for users
Consistent User Interfaces: Optimizing the experience for both operators and developers
Balanced Color Scheme: Preventing glare and extreme contrast
Dynamic Dropdown Menu: Enhancing navigation and map interface visibility
Continued Collaboration
The collaboration between the TAK Product Center and Mindgrub remains ongoing, with a focus on iterative improvements based on user feedback. Additionally, we are actively involved in the redesign and development of takmaps.com and tak.gov, the creation of the TAKX platform, and the development of training and education tools for TAK products. By designing and implementing a best-in-class solution across various interfaces, development teams, and partnerships, we aim to reduce development costs associated with shared components, minimize the need for retraining, and ultimately enhance the effectiveness of our country's warfighters and first responders.
The Opportunity
In high-stress, hazardous environments, situational awareness is paramount for mission success. Originally developed by the Air Force Research Laboratory, TAK serves as a digital system, now maintained by the TAK Product Center, that facilitates real-time data exchange, benefiting military personnel, first responders, and commercial users alike. As mobile capabilities evolve, it's imperative for TAK to evolve in tandem with the ever-changing needs of operators. The TAK interface must remain intuitive and adaptable to diverse devices, scenarios, use cases, and missions.
The Solution
Our journey began with strategic discussions to define long-term objectives and an overall strategy. User experience research formed the foundation for the new system, allowing us to align our efforts with user needs. We fostered close collaboration with the TAK team, engaging in ongoing feedback exchange regarding wireframes, designs, and development implementations. Our primary focus was enhancing the platform's UX/UI, but we also revamped functionality to improve usability and performance. Adhering to atomic design system principles, we established a consistent UX/UI across different properties, ensuring seamless transitions between applications.`
A Cohesive System
The new TAK system aimed to deliver a more robust and intuitive user experience by addressing several key objectives:
Scalability across diverse viewport sizes, device types, orientations, and zoom levels
Inclusive access for partners to contribute to a universal set of TAK developer standards
Shared UX/UI and data flow for seamless transitions between tools
Consideration for diverse user types and their overlapping or distinct needs across various apps
An ongoing feedback loop from users, prioritizing issues and opportunities that matter to them
Enriched, Scalable Features
Our team introduced several enhancements to the TAK interface, elevating map space, functionality, and visibility. The new UX/UI features included:
Customizable, Dynamic Navigation: Maximizing visible map space without compromising functionality
Minimalist Design: Reducing cognitive load for users
Consistent User Interfaces: Optimizing the experience for both operators and developers
Balanced Color Scheme: Preventing glare and extreme contrast
Dynamic Dropdown Menu: Enhancing navigation and map interface visibility
Continued Collaboration
The collaboration between the TAK Product Center and Mindgrub remains ongoing, with a focus on iterative improvements based on user feedback. Additionally, we are actively involved in the redesign and development of takmaps.com and tak.gov, the creation of the TAKX platform, and the development of training and education tools for TAK products. By designing and implementing a best-in-class solution across various interfaces, development teams, and partnerships, we aim to reduce development costs associated with shared components, minimize the need for retraining, and ultimately enhance the effectiveness of our country's warfighters and first responders.
My Ramblings
My Ramblings
My Ramblings
My Ramblings