Technology Strategy
(Web App Design)
A landing page to understand the vision of the organization
"Build, Reuse, innovate"
Client: Fidelity Investments
Duration: Oct 2021 (1 month)
Design Team Size
2
Role
Design Lead
Reach
<10 users / month
Design System
Providence, Helios
Device Type
Desktop Web
Tools
Figma, Mural
Summary
The Challenge
There is a need to communicate a consistent message to leaders across the firm for them to be aligned and move the needle against the firm's unified technology strategies
Our Solution
Another designer and I built a mock-up to communicate the firm's technology strategies in a way that focuses on the top-level initiatives but also provided resources to dive deeper into the strategy's details
Before
After
Skills Applied
Content Strategy, Design Lead, Graphic Design, Information Architecture, Interaction Design, Product Design, UI Design, UX Analyst / Design Ops, UX Design, UX Research, UX Strategy, UX Writing & Visual Design
Workflow
Confirmed Project Goal Brief with Stakeholders > Defined Target Personas > Created a User Journey Map > Conducted Qualitative Research (Persona User Interviews) > Identified Information (UI features) Important to Personas > Created Low then High Fidelity Mock-ups > Conducted Intermittent Mock-up Research > Verified and Presented Design to Stakeholders > Approved UX Handover to Developers
1/6 Empathize
UX Research
For potential customers, there was a gap in the knowledge of the org's strategies; To better understand what these gaps were, we conducted a couple of user interviews.
User Journey Map
Leader's Journey Map:
Scenario: "As a leader, I have an idea and I want to make a new technology feature. I want to easily know how to do this the right way"
Developer's Journey Map:
Scenario: "As an associate/developer, I just got approval to implement a new technology feature. I want to know the official place with easy-to-understand information to build this the right way"
Qualitative Research
Conducted a discovery study via 2 User Interviews; One representing a leader that would seek out inspiration from published Strategies and the other, a developer - an implementer of the Strategy.
Insights Gained:
Both the leader and the developer had heard of and had an idea about the org's strategies but neither was 100% sure
Greater context about the Strategies was missing - users wanted to know how it affected them specifically
2/6 Define
Personas
The users of the Strategy site were primarily split into 2 groups:
Leaders - users looking to find inspiration and confirm alignment
Developer - users looking to find solutions/implementations related to the Strategies
Brooklyn (She/Her)
Leader
"As a leader, I need to understand the updated Technology Strategy so I can communicate to my team- new directives that align to the Strategy"
Courtney (She/Her)
Devel
"As a developer, I need to understand the overall tech Strategy so that I am intentionally driving my work to enable the objectives of the Tech Strategy"
Defined Features to Build
Major Features
Homepage
3 Strategy pages
About Us page
Minor Features
Strategy site logo
Content information block
3/6 Ideate
Ideas for the site layout were simultaneously generated on a Mural wireframe. This served as a set of low-fidelity mock-ups before being converted to high-fidelity
4/6 Prototype
A set of high fidelity mock-ups to bring the creative ideas to life
5/6 Test
Qualitative Research
After high-fidelity mock-ups were drafted, more Usability Studies and User Interviews were conducted with 3+ individuals to test the Figma Prototype.
Insights Gained:
All users quickly understood the intent of the site and its content
Since the site was text heavy, although users found value in the content, their interaction was geared towards "I will bookmark this now and read it later"
6/6 Implement
Launch
Multiple handover meetings were executed to walk the developers through the Figma mock-up designs - empowering them to inspect and download needed assets to develop the web app
After about one month of development, the alpha version was launched to gather more feedback
After the launch, I performed a Heuristic Evaluation of the site to correct minor usability issues
Impact
In a short turnaround (1 month), the team and I created a centralized landing zone -rich with links and information about the organization's strategies
Leaders and Developers had a single location to get an overview of the org's current and possibly future direction
Lessons Learned
Summarizing information in a way that is easy to understand by all is difficult but extremely rewarding
Creating appealing web designs in Figma was easy, but making the said designs as interactive as desired was difficult and a bit inflexible
Lastly, Figma's Auto Layout was a huge time saver when working with multiple designers