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

Design Lead 

n/a (Prototype Only)

Design System
Providence, Helios

Device Type
Desktop Web



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 



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


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:

2/6 Define


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

Minor Features

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:

6/6 Implement



Lessons Learned