Untitled_Artwork 2.png

Insider Customer Portal Redesign

Redesigning the UI and UX of the web platform for collecting feedback about the company's products from the clients.

Project Detail

Project Type: UX/UI design

Timespan: 1 week

Team Size: 2

My Role

UX Designer

UI Designer

Method

Information Architecture

Wireframing

Prototyping

Tool

Figma

Introduction

The system is a platform for exchanging ideas and problems about the products between the IT department and the clients. Clients could report the issues they found or provide some new ideas to the development department to improve the products. However, the PM claimed that the usage rate was low and the team also thought the system was not polished enough to present to the clients.

Design Process

process.png

Problem

Lacking in temptation

There is little temptation for clients to provide feedback on the products proactively. 

Exept for the motivation, the layout and the hierarchy of the system were not clearly presenting the information. The design might confuse users and discourage them from providing feedback. 

Uncommon UI components
  • The 3 main features, report bugs, ask questions, and share ideas, were not presented like buttons but links. Users might not be able to click them intuitively.

  • The design of the filter for the table below was not consistent with how users have learned from other systems. Besides, it did not approximate to the table to help users associate the filter with the table.

Invisible hints for inputs

There was no instruction for each textbox on the posting tickets page that might lead to confusion about what to input for first-time users.

The comment feature is not noticeable 

The replies textbox was not obvious enough below the posted replies. Users might ignore the feature and lessen the opportunity of engaging.

Little distinction after posting tickets

The "posted issues" screen was similar to the "creating ticket" page. This might confuse users and lead users to edit other's original posts accidentally. 

Persona

Frame 4.png
persona1.png

Goal

To engage users in the improvement of the products by encouraging them to provide feedback with a seamless interface and entertaining ecosystem. 

Solution

Desktop - 1 (1).png
WIREFRAME
overviewWF.png
Centralize information

In the previous design, the first page after login was just a dropdown to select the project (product) they were involved in. 

After discussing with the PM, I designed an overview page for users to know the global information for all the related product updates. 

Proper buttons UI with CTA

To have a better grouping, I separated the homepage into two areas. The three buttons on top with more convincing calls to action could encourage users to complete the tasks more efficiently.  

Simple controls to locate items on the list

The tabs on the top of the table and more filter next to the search bar replace the previous filter to provide simpler interface.

Home.png
TicketForm.png
Consistency between screens

The 3 tabs for the posting features on the top are exactly at the same place as the 3 buttons on the homepage. This could reduce the requirement of learning after users have familiarized themselves with the interface on the previous page.

Specific guide for the inputs

Provide a format for specific information could not only guide users to finish the task but also simplify the process of collecting data for the IT department. 

Conversational experience for discussions

Based on the PM's request, he hoped there could be more like interactive conversations than just leaving a comment on the post as a reply. To create the interaction of mutual conversations, I replace the replies table with a chat window for the clients and the administrator to have discussions. 

Issues-1.png
MacBook Pro 3.1.png
Individual page for personalized data

Instead of distinguishing self's posts from all of the posts by the filter on the homepage, I suggest having a separate page to file all the posts and replies created by the individual. It would help users locate the wanted information quickly and make users have the sense of belonging by owning their own space.

Scoring system for contribution

The PM wanted to include the concept of gamification to stimulate users to give feedback for raising the achievement score.

Final Design

Overview Dashboard
overview.png
Home page
My View
MacBook Pro 3.png
Posting Ticket
TicketForm.png
Posted Issue
Issues.png

Takeaway

I had a chance to talk to several developers in this project. It is important to view things from different angles by working with cross-functional teams. Exchanging our rationale of decisions is an essential step to develop a product that meets both technical constraints and usability principles.