Summer 2023
Situation
In the Summer of 2023, I worked as UX Design Intern for Citizens Bank on their internal design team titled Green Pixel Studios. Among two projects, I was tasked with a project related to their design system website. I worked with a team of research, design, and development interns.
Problem
Citizens Bank's internal UX Development team needs a better way to onboard new hires and teach them to use the Citizens Bank Design System (CBDS) website for their daily work.
Team
1 UX research intern, 1 UX design intern, 2 UX developers, 1 Project Management
Timeline
10 weeks: 2+ weeks discovery and research, 4+ weeks design and testing, 4+ weeks development
Task
We aimed to implement a learning experience into the Citizens Bank Design System website to provide new developers with a more engaging and clear way to familiarize themselves with the site.
My role
Conducting secondary research
Facilitating design thinking workshops
Creating low to high-fidelity designs
Managing developer handoff
Tools used
We used tools such as Jira, Mural, FigJam, and Figma during this project.
Action
Research and exploration
We began by leveraging past user research and conducting secondary research methods:
Heuristic evaluation
Used Nielsen's 10 heuristics to evaluate the current site for usability issues
Identified problems such as difficult navigation, lack of learning-specific content, and unintuitive information hierarchy
Comparative analysis
Analyzed highly-regarded design systems (Google Material, Microsoft Fluent, SAP Fiori, Cisco Momentum)
Identified features that elevated UX and noted shared elements
Research findings
Best design systems have sectioned pages and navigation
Interactive components are crucial for the demonstration
Visual-based card-style navigation is preferred for complex design systems
Long pages should be broken up for readability
The ability to edit and manipulate components is important for developers
Developer-specific learning pathways are rare
Seeing and trying out code is the most effective learning method
Ideation
Brainstorming workshop
Conducted a sketching/ideation workshop with the intern team
Generated ideas based on research findings
Sketching
Visualized how ideas would fit together in our design
Design
User flows
Mapped out the learning pathway using the current site map
Iterated on multiple flows before finalizing the design
Wireframes
Created initial screens based on the user flow
Tested with users and made improvements
Results
Mid-Fidelity Prototype
Features
Card-style navigation
3-main steps for each lesson: Overview, Tutorial, and Test
Interactive components for hands-on learning
Live user feedback through a vertical button menu
Success messages upon lesson completion
Interaction Design
Hover and pressed states for components
Linear flow from home to lesson completion
Responsive design
Modified navigation bar
Real code blocks
Video demonstrations
Project Outcome
The project resulted in a comprehensive learning experience integrated into the Citizens Bank Design System website. Key outcomes include:
A more intuitive and engaging onboarding process for new developers
Interactive components that allow hands-on learning of the design system
A structured learning pathway with clear steps: Overview, Tutorial, and Test
Improved navigation and information hierarchy
Integration of real code blocks and video demonstrations for enhanced learning
Learning Outcome
The project resulted in a comprehensive learning experience integrated into the Citizens Bank Design System website. Key outcomes include:
A more intuitive and engaging onboarding process for new developers
Interactive components that allow hands-on learning of the design system
A structured learning pathway with clear steps: Overview, Tutorial, and Test
Improved navigation and information hierarchy
Integration of real code blocks and video demonstrations for enhanced learning