City Map Live
(Web App Design)
A visual dependency map to accentuate strategic thinking
Client: Fidelity Investments
Duration: Jan - May 2023 (3 months)
Design Team Size
1
Role
Design Lead
Reach
n/a (Prototype Only)
Design System
Providence, Helios
Device Type
Desktop Web
Tools
Figma
Summary
The Challenge
Solution Architects have to create blueprints for software solutions across a large techno-infrastructure of Fidelity Investments.
To be successful in setting up resilient systems, there is a need to know already existing architectural patterns, app-to-app dependency, and more technical details of the current digital ecosystem
Our Solution
To promote strategic thinking around architectural and business decisions made regarding app creation and connection, we aimed to showcase the scale of the interconnectedness of apps via a visual map
Before
After
Skills Applied
Content Strategy, Design Lead, Graphic Design, Information Architecture, Interaction Design, Product Design, UI Design, UX Design, UX Research, UX Strategy, UX Writing & Visual Design
Workflow
Met with Stakeholders regarding Goal Brief > Defined Target Audience > Conducted Additional Research > Identified New Features/Pages to Design > Created Low then High-Fidelity Mock-ups > Delivered Interactive High-Fidelity Mock-ups to Stakeholders
1/6 Empathize
UX Research
To better understand the Solutions Architecture, Business Architects, and leaders, I and the team conducted fresh Qualitative research.
Qualitative Research
The team and I found a key sample of users to interview. I conducted 8 User Interviews to discover their pain points.
Insights Gained:
Most users struggled to find needed architectural-related info, found-info was based on organic past experience and who they knew
All interviewees had a goal "to communicate" but who they communicated to, the level of details they communicated, and the outcome they desired varied
2/6 Define
Personas
The desire to see a top-level view of dependencies and connections across teams and apps to make strategic decisions are for 4 main personas:
Ben (He/Him)
Category: Builder
Role: Solutions Architect
Age: 45
Experience: 15 years
"I help teams design the architecture for projects using the preferred Platforms"
Ingrid (They/Them)
Category: Innovator
Role: Business Architect
Age: 40
Experience: 20 years
"I help workshop and visualize Business leaders' goals through new Business Capabilities or existing ones"
Connie (She/Her)
Category: Connector
Role: Team Member
Age: 37
Experience: 10 years
"Given the objective of the org, I help connect the IT Strategy to the Business Strategy and help teams align to them"
Sam (They/Them)
Category: Spectator
Role: Squad Leader
Age: 32
Experience: 7 years
"I want to better understand the context of the current state and see options for how to achieve a better future"
Defined Features to Build
Major Features
Connections Map
App to App Dependency page
Product to Product Dependency page
Asset to Asset Dependency page
Dependency details Sidebar
Connections and About Assset Panel
About Us Page
And more
Minor Features
Welcome Modal
HeaderNavbar and NavModal
Loading Screen
Search bar enhancements
User Settings Menu and Modal
Feedback Modal
Footer
And many more
3/6 Ideate
A set of sketches to represent generated creative ideas for the low-fidelity prototype
4/6 Prototype
A set of high-fidelity mockups to bring the creative ideas to life
5/6 Test
Qualitative Research
After high-fidelity mockups were drafted and demoed to the working team, feedback and further refinement were gotten from the Product manager.
Insights Gained:
The initial 3 oval-connection containers of assets needed to be simplified to a Venn diagram along with the need to incorporate arrow vectors - since dependency arrows are recognizable by the primary customer
The was also a need to incorporate multiple views like an Asset to top-level Asset view
6/6 Implement
Handover
A change in my role resulted in an early departure from the City Map Live team, but I was still able to complete my task. I handed over an interactive high-fidelity prototype to Stakeholders
Impact
The project's ideas and speculations were able to be actualized via a prototype/mockup
Leaders were able to play around with the interactive prototype to help realize the intent of the City Map Live tool and some possible greater uses
A development team was initiated to start building the product
Lessons Learned
A complex diagram with lots of arrows looks rich in information but it can dissuade novice users. Pivoting to a condensed form of just 3 arrows enabled a more digestible user experience
Users value...
Understing complex connections at a moment's glance
being shown the right level of data at the right time
ease of navigation and the ability to be shown more details when needed