top of page
Developer Portal
Website Design 🖥
Overview
As BNY Mellon | Pershing is offering digital products like APIs, this public website is designed for showcasing digital products and allowing all the companies to cooperate and integrate.
2019. Oct - 2020. Mar
Type UX Design, Visual Design, Web Design
Responsibility User Research, Wireframing, Content Strategy, Prototyping, UX Design, Visual Design, User Testing
Introduction
According to Stakeholders, the way Pershing deals with integration requirements today is that the potential clients need to call Pershing's business team and directly ask in the phone if Pershing has integrations methods. This approach is very dated and inefficient.
Goal
-
Build a public website to showcase Pershing's digital integration products with improved brand perception.
-
Have clear communication with prospective clients and current clients about our core service.
-
Allow developers to test products directly in the website.
Approach
Background Research
Challenge
After stakeholders raised the requirements, we found out there will have three challenges in this case that is different in other similar sites.
Target Users
This site would face two main users:
-
Business people who might be potential clients.
-
Developers who will test the digital products on the website.
Navigation
How to guide two different groups of users to easily find what they are interested through a clear navigation?
Pre-login vs Post-login
Due to policy, some content was decided to be totally public, some would need password protection.
Users
-
Business people
-
Developer
User Research
User Interview
Based on the basic background information, we conducted user interviews with 5 of Pershing's potential/former clients.
Persona
Based on two main user roles, we demonstrated two different typical users:
Business People who lead the product:
Developers who implement the product:
Design Brief
After the background research and user interview, we brought the result and conclusion to the design team to have internal meetings. Based on the discussions I created this design brief to clarify the scope, pain points, challenge and the possible evaluation criterion.
Design Iteration
Information Architecture
Based on the scope and content defined in former stages, we created this IA to reflect the structure of the need of different groups of users.
Based on the IA, we held the "connect the dots" meetings to merge the different users' flow in this website.
To achieve the goal to separate different group of users, we decided to grow the website into two branches: "Discover" for business people, and "Develop" for developers.
Simplify Userflow
To better present the flow to the whole product team, I simplified the flow to a cleaner version.
With several rounds of discussion, I designed this final sitemap to clarified the structure of the website which divided each page level into pre-login or post-login clearly.
Sitemap
User flow
Layout Ideation & whiteboarding
To find out better layout for the page, we did competitor research to see what is the strategy in the financial industry nowadays.
Click Here to view the report.
1/1
Wireframing
Branding
Content for Business Strategists
Registration Guidance
Content for Business Strategists
Related Content Guidance
Registration Guidance
Content for Business Strategists
Registration Guidance
Content for Developer
Registration Guidance
Content for Developer
Registration Guidance
Content for Developer
Related Content Guidance
Registration Guidance
Content for Developer
Registration Guidance
Level 2 Personal Center Dashboard
Content for Developer
Content for Developer
In Conclusion
To wrap up the IA and layout strategy, these are what we did:
1. Broadness and Depth
As the product faces two main groups of users, we built up two flows based on different user's needs and habits. The flow offers more broadness to the Business People as they would need to check information in different categories, while they don't need the technical details.
For the Developers, they are directly assigned a specific function to implement, the more they want is the technical documentation and the ability to do in site testing. So from the structure diagram, it's easy to tell the difference between the Business flow and the Developer flow.
2. Templatize
For the layout of each page, we separated contents into different levels, and templatize every level. This reduced the time for the developing team to implement the product, as well as easier to manage the content in the CSM system.
Design Challenge: Navigation
Debatable: Mega Menu vs. Side Menu
As the structure of the website was decided, how to navigate through each level became the upcoming problem to solve. Here come two different methods to implement navigation:
Case study: Plaid.com
Mega Menu
Case study: citi.com
Side Menu
.jpg)
Mockup & User Testing
After the cases study of competitor websites, I mocked up both ways to better analyze user flow and to do user testing to collect result.
Mega Menu
.jpg)
Nav Structure
Nav Path Analytics
Side Menu
.jpg)
Nav Structure
Nav Path Analytics
In Conclusion
"Lighten" the site
Comparing the two approaches, the mega menu differentiates the navigation structure from the site structure, while the site menu follows the site structure. From the diagram, it's easy to tell that the mega menu frees the users from the idea of level, and reduce useless clicks.
Structure wise, Mega Menu wins.
Visual Ideation
Visual Research
We conducted visual research among the users, to define the direction of visual approaches. Click to view the reports:
Visual Ideation
bottom of page