top of page
portal-skeleton.png
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
New Approach.png
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.

Avatar 20.png

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.

Interview_Kit.png
Persona

Based on two main user roles, we demonstrated two different typical users:

Business People who lead the product:

Persona_Biz.png

Developers who implement the product:

Persona_Dev.png
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.

DesignBrief.png
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. 

Proposed.png
userflow.png

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.

simplified flow.png
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
sitemap.png
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.

Wireframing

Branding

Content for Business Strategists

Registration Guidance

Content for Business Strategists

Related Content Guidance

Registration Guidance

Content for Business Strategists

Registration Guidance

wireflow.png

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
wholeFlow.png

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:

plaid menu.png

Case study: Plaid.com

Mega Menu
citi side menu.png

Case study: citi.com

Side Menu
Brainwriting (1).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
Home Copy 16.png
Brainwriting (2).jpg
Nav Structure
Nav Path Analytics
Side Menu
Capability Detail Side Nav.png
Brainwriting (3).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
test3.png
landing test1.png
detail test1.png
Explore my other projects 👇

One more sip?

Let's hang!

Designed and implemented by Eva.

2020. 03. All rights reserved.

Or you can explore my

bottom of page