top of page

Optimize
The Media
Portal

Client: QBank 
My role: UX/UI Design
The team: Lead of Project, Project managers, Fullstack developers
Duration: 3 months (2022)

Project summary:

QBank is a DAM (Digital Asset Management) SaaS solution that enables enterprises to work more efficiently, get control and easier distribution of digital assets to any digital channel through integrations. I created the media portal for the front-end, and I prepared mockups and prototypes in dialogue with the customers based on their design guidelines. To optimize the Media Portal for faster implementation while keeping the consistency on the basic functionality.

The problem:

  • + 200 clients with a wide range of industries

  • 90% have media portals with customized layout and design

  • Implemented by different developers and different frameworks

  • Difficult maintenance

portals small.gif

The goal:

  • Standardise Media Portal with human centred solution

  • Implementation with React

  • Components Library

  • Design System

  • Efficiency

  • Accessibility


 

Central hub-11 1.png

Design process:

  • Brainstorming

  • Collabration with across teams

  • Mockup & prototype

  • Feedback from clients

  • User testing (Interviews, Observations)

  • Evaluation

  • Iterate the process

​

Tools:

Group 34149.png
Group 34150.png
Group 34151.png
Group 34148.png
Group 34153.png
Group 34152.png

Brainstorming

Brainstorming​ in the project team in 4 steps:

1. Wrote own ideas

2. Each participant has a few minutes to present their ideas

3. Categorized all ideas

4. Prioritized ideas of feasibility and importance together

Hence we can identified a priorities list together

​

Group ideas.png
Prioritize.png

Analysis

Quantity survey with questionnaire

  • Work with marketing specialists to gather feedback with our existing customers. 

  • Questions such as which year group, estimated technical competence. When and how often they use media portals. What functionality do they want to improve or add?

Competitive analysis

  • Compare with 3 competing companies
    gathered information about competitors to better

  • Understand how competitors were addressing similar user needs today.

​

​

​

Empathy map

A summary of the feedback from our current customers into an empathy map, break down into each considered area and gain a deeper understanding of the environment, behavior, problems, and aspirations of your users to design a user-centric solution.

​

Empathy map QBank.jpg

Synthetic data

Design system 5.png

Collaborated with Marketing to create a new style guide for QBank.

login.png
Search.png
Action buttons 1.png
Function list.png
Function btn 2.png
Dropdown.png

Design

​Discovered sketches to try out different ideas quickly.

login copy.jpg

Created wireframes on all pages and discussed with developers

White wireframe.jpg

Handover to developers

Handing over to developers with Zeplin. In the iteration stage, our team will continue to make updates and improvements as needed, closely monitoring how these changes affect the product experience.

Zeplin 1.png

Implementation of the Standardized template
with customized branding

  • Feedback from developers and discuss missing details

  • Iteration continues to make improvements as needed, closely monitoring how those changes affect the product experience

The result

We have managed to reduce                      time for implementation

50%.png

Apply the latest technology has

  • Increased the speed of loading assets

  • More satisfied customers

  • Easier for troubleshooting and maintenance

bottom of page