Platform Gallery
(Web App Design)
A collection of internal Platforms and their Products to aid development
"Build Upon Great Foundations"
Client: Fidelity Investments
Duration: Oct 2021 - Mar 2022 (6 months)
Design Team Size
3
Role
Design Lead
Reach
~250 users / month
Design System
Providence, Helios
Device Type
Desktop Web
Tools
Figma, Mural
Summary
The Challenge
To enable faster growth, efficiency and scalability, there is a need to reuse Products on existing Platforms, just one problem... where are these Platforms? And how can developers and leaders get started?
Our Solution
To get users from different personas to get started on using a Platform's Product, deep research was done to understand what these personas cared about - these aspects were then crafted into an app store-like view that emphasizes quick-glance understanding and easy discoverability.
Draft Version
Final Version
Skills Applied
Content Strategy, Design Lead, Graphic Design, Information Architecture, Interaction Design, Product Design, UI Design, UX Analyst / Design Ops, UX Design, UX Researcher, UX Strategy, UX Writing, Visual Design
Workflow
Confirmed Project Goal Brief with Stakeholders > Defined Target Personas > 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
To better understand what exactly users wanted to see on the site before they would use a Platform's Product(s), I sought to understand these users via Qualitative research.
Qualitative Research
Conducted a discovery study via 2 User Interviews; One representing an owner of a Platform and the other, a developer - a user of Platforms.
Insights Gained:
Platform owners stored documents of their Platform in multiple intranet sites - these static docs easily got outdated
Platform owners lacked and desired a way to mass advertise their Platforms to gain new customers
Developers, leaders, and other consumers sought a way to easily understand a Platform - to know if it's actively being developed, its reviews, roadmap, and more
2/6 Define
Personas
The users of the gallery were primarily split into 2 groups:
Producers - content providers of the gallery and
Consumers - users of the gallery to find Platforms and their products
Mariah (She/Her)
Category: Decision Maker
Role: Tech Lead
Age: 33
Experience: 12 years
"I need to understand what products are available to use and what they provide so that I can have my team adopt them in order to accelerate the delivery of my product"
Imaan (He/Him)
Category: Decision Implementer
Role: Developer
Age: 27
Experience: 5 years
"I need to find and use detailed enough information to implement solutions"
Maki (They/Them)
Category: Decision Influencer
Role: Chapter Leader
Age: 37
Experience: 14 years
"I need to find available solutions so that I can understand their value for solving my business problems"
Kendi (She/Her)
Category: Solution Author
Role: Product Owner
Age: 44
Experience: 20 years
"I need to be able to provide compelling marketing content that enables potential customers to be able to easily see the value proposition in my product and onboard so that I can acquire customers"
Defined Features to Build
Major Features
Homepage
Platform page
Products page
All Platforms page
All Products page
Minor Features
Platform Gallery logo
Picture Carousel
UI Information blocks
Sticky Header
Grid vs List view
3/6 Ideate
Multiple sites were used to forage ideas for the different types of views we wanted to implement. Ex. ThemeForest - for the homepage grid-view, Visual Studio Marketplace for Platform/Product card inspiration, iOS App Store - for an icon and banner look, and many more.
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 2 individuals to test the Figma Prototype.
Insights Gained:
All users understood the purpose of the site instantly and wanted to begin diving into the Platform and its Product or understand how they could publish their own Platform
There was still a gap in the understanding of what exactly each Platform did; There was still a need to water down each Platform to paint a more succinct picture of what its products did and how it could benefit users
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
Impact
A landing page to house all available internal Platforms was created
Platform owners and consumers alike now had a one-stop shop to view and get started using a Platform
Lessons Learned
There was a big catch-22 in trying to get users to quickly understand a Platform - when and where to use its products
On one hand, users need a succinct summary of a Platform
On the other hand, before a succinct summary can be made much info about the Platform is needed to know what it actually does
Much like AWS (Amazon Web Service), there needed to be a lot of layers on top of the Platforms to advertise what the Platform can be used for
Lastly, Figma's Auto Layout was a huge time saver when working with multiple designers