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.

Design Process

Ideation

  • Meeting with PM

  • Problem identifying

  • Solution determining

Day1

Wireframe

  • UI/UX redesign​

Feedback

  • Confirm initial ideas with PM

Final Design

  • Final modification

  • Visual Style

Day7

Problem

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. 

Homepage
  • 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.

Posts
  • 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 design of the posted issues page was similar to the posting page. This might confuse users and lead users to edit other's original posts accidentally. 

  • The replies textbox was not obvious enough below the posted replies.

Goal

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

Solution

WIREFRAME
overviewWF.png
Overview Dashboard

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. The administrator could send the invites of some tasks to encourage users to provide feedback.   

Homepage

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.  

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
Posting Ticket

The three 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.

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. 

Posted Issues

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
My View

Instead of distinguishing self's posts from all of the posts by the filter on the homepage, I suggest having a separate page to record all the posts and replies created by the individual.  

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
My View
MacBook Pro 3.png
Home page
Posting Ticket
TicketForm.png
Posted Issue
Issues.png

©2018 by YUNG CHIA YUN.

© COPYRIGHT 2020 by YUNG CHIA YUN.