MBS Portfolio UX

Interaction Design

I was ever-fascinated by Interaction Design. I took help from a colleague and created the Interaction flow for the MBS Portfolio. The animated interaction is at the top of this page.

Background

At HP, I was working for MBS (Marketing Business Services). MBS was an internal Agency with a bunch of Graphic Designers, Copywriters, Programmers and Data scientists. This agency provided specialized services such as Creative design solutions, Web development, Data analytics, Reporting, etc. to various verticals of HP, primarily Marketing.

UX Research

Survey

This was rolled-out to get an initial pulse of the Users.

Sashank Purohit

Bio

Age: 37 years
Gender: Male
Education: MBA in Marketing from Sikkim Manipal University
Employment: HP for 4 years

Pain points

Regularly update/customize Powerpoint slides of MBS services portfolio
Couldn’t share samples (Eg. Videos created by MBS are heavy and difficult to share)
Lacked confidence in client meetings due to absence of appropriate portfolio display

Motivations

Light-weight tool
Ease of Use
Anytime available and easy to access

Information Architecture

With Card Sorting we identified the Primary Services (and later Secondary services). This helped us drafting the Information Architecture of the website.

UI Design

Sketches

Initially I created paper sketches for quick feedback. This was followed by Low fidelity prototypes.

Low Fidelity Mockups

And then.. came in the

High Fidelity Mockups

Impact

Guys.. we are MBS. We do everything.

Hmm.

Problems

Business Developers from MBS ‘emailed’ 20 MB+ Portfolio powerpoints to Prospective Clients. These were heavy files and Outlook wasn't an effective tool to share MBS Credentials.

Solution

User Interviews

I interviewed 7 Users – 4 internal (HR, Finance, Operations) and 3 customer-facing Sales/Marketing employees.

Key insights:

Lack of visibility for MBS employees.
Users had content requirement for which they were hiring external agencies
Heavy ppts (22 MB+) were sent via emails. Choked their inboxes in a slow VPN network

Jessica Bloomberg

Bio

Age: 32 years
Gender: Female
Education: MA Economics, Chicago University
Employment: HP Finance for 4 years

Pain points

Struggling with simple content (Informational datasheets) creations for customers
Unaware of internal content support
Busy work schedule with multiple daily meetings, unable to manage content creations

Motivations

Internal Content support
Quick turnaround
Easy to find internal content-support capabilities

Journey Mapping

How would Jessica's life change with the MBS Portfolio website? To find the answer, I created her User Journey Map.

For few screens, I designed few micro-animated Interaction designs. Can be seen at the top of this page.

Me - “Wait. Why don’t we have our Portfolio website? Let Clients visit this portal to understand our capabilities. All we’ll need is, share the URL along with our best wishes.”

Manager – “Great idea! Let’s do it.”

Who were the Users?
I identified 2 User Groups:

Internal – Managers and executives internal to HP in need of MBS’ services + MBS employees needing a tool to display their portfolio of services
Customer-facing - Sales and Marketing team

Design System

HP has its standard UI guidelines. I created the following Design system for MBS Portfolio website. This was consistently used throughout the UI.

The new Portfolio website provided MBS, a positive traction. I conducted a post-live survey of the website. Following insights were drawn:

MBS Awareness improvement: 37%
Response to queries: 25% faster
Yearly Hiring in MBS increased by: 2%

Personas

To provide definition to the Users and their problems, I defined 2 Personas from the identified User Groups