DTCC C&S DIGITIZATION
UI/UX design
Project Concept
The Depository Trust and Clearing Corporation (DTCC) plays a key role in capital markets, processing stock and bond transactions through its clearing and settlement services.
To provide a better understanding of DTCC and its subgroups, my team and I were tasked with creating an interactive webpage depicting DTCC's clearing and settlement process and values.
Taking inspiration from DTCC's Clearing and Settlement guidebook, we were to translate its content to create something more digestible for users learning about DTCC.
Key Goals
- Modernize visuals
- Engage external and internal users
Scope
3 weeks
Tools
Figma
Role
IT Intern
Tags
UX Design
Interactive Web Design
Our Journey: Working in Sprints
Sprint 1
User Research
Our research began with a kick-off meeting with stakeholders from DTCC's marketing department. We first browsed through the guidebook to gain a better understanding of the processes outlined.
Original Lightbulb Press of DTCC's Clearing and Settlement Guide (Example trade process)
We were then tasked with individually researching 5 websites each, narrowing this down to 5 websites overall based on user functionality and design. Out of these websites, one website served as our main inspiration source for the base concept of our interactive design: a town that the user can explore by clicking through buildings, learning more about the company.
Ideation
After meeting with stakeholders, my team and I took account for specific design and user functionality considerations that we wanted to implement based on the website research that we had conducted.
Audience: Anyone wanting to explore DTCC
DTCC Brand: Clean and minimal design
User Functionality
Sprint 2
Sketches
This sprint began our sketching process depicting the various trade processes such as matching and netting from the guidebook. Once our work was approved by stakeholders, we then began wireframing using Figma.
Wireframing: Iteration 1& Feedback
In order to gamify the learning experience, my team and I designed a DTCC town that the user can navigate through with an avatar.
HOMEPAGE
User starts on the homepage as a student who can click on the school building to start their journey in learning more about DTCC.
User clicks through buildings to visit the interior of DTCC’s subgroups, financial institutions, and the stock market to learn more about trade processes.
User also has option to learn about trade processes by clicking on the processes bar.
SCHOOL BUILDING INTERIOR
When user clicks on school building, they are guided to a chalkboard.
Chalkboard provides an introduction to DTCC where user can choose a field trip to take.
LOADING PAGE
Click "Restart" to begin the Figma animation
STAKEHOLDER FEEDBACK
"The design lacks the sophistication and minimal design we are looking for"
"Our intended audience is financial institutions and professionals;
a school concept may appear childish"
"Not a fan of the loading page"
"This website should showcase DTCC's brand as a first impression
of what our company is all about"
Sprint 3
Wireframing: Iteration 2 & Changes
In our final iteration, we implemented the feedback we received from our stakeholders, while also adding more to our wireframes.
CHANGES
- Standardized color scheme to match DTCC branding
- Scrapped school building concept as well as loading page
- Included hovers to learn about financial terms
- Included NSCC interior and animation describing matching in the financial market
HOMEPAGE
NSCC INTERIOR
MATCHING
Within the NSCC building, the user can click anywhere to view an animation for matching
Click "Restart" to begin the Figma animation
Handoff: Sitemap
As our internship came to an end, we were to hand this project off to full-time analysts as well as an outside vendor, Chappell Roberts, to further develop our design plan.
As a part of this process, we created a sitemap to provide a clear framework of the user flow.
Reflection
Through this design project, we were able to provide our ideas for design and user functionality that we believed would best encourage interactivity and engage users to efficiently and effectively learn more about DTCC. We gained a lot of experience evaluating stakeholder feedback and brainstorming/ideating together in 3-hour sessions every Monday, Wednesday, and Friday.
Key challenges we overcame
- Understanding our audience and specific stakeholder requirements, as we were initially provided vague requirements.
- Aligning our ideas and design thinking process with stakeholder expectations
Key Takeaways we learned about design
- Experiencing the design thinking process through multiple iterations and feedback in a short period of time
- Experimenting with various design tools–such as Balsamiq and Figma–to find the most collaborative one