iMember

We provide exceptional solutions that enhance business and strengthen customer relationships.

Desktop Web

Timeline

Jul. 2022 - Feb. 2023

My Role

UI/UX Design, Prototyping, A/B Testing, Information Architecture (IA)

Tools

Figma

Team

UI/UX Designer, UX Researcher, UX Writer, PM, FE/BE Developer

Background

iMember, a Provider-as-a-Service (PaaS) project, has been kick-started by our business users. These users span seven teams: Marketing, Customer Service, Security, Reward, Payment, Compliance, and Business Operation.

The Research Methods/ Steps

Customer Service Burden from Hard-to-Find FAQ

We worked with UXR to conduct research through Focus Groups and Online Surveys, gathering key insights from users across departments.

Additionally, we observed users in real-life scenarios through Field Research to better understand how they interact with the system.

The problem

Speed is too slow , Usability is difficult , Learning curve is too high

The decade-old system currently in use is too outdated and slow for daily operations.

Most interfaces are not intuitive or user-friendly. For first-time users, there is a significant learning curve.

Survey Questions and Result

How did the designer kick things off in this project?

Discuss function scope and design with the Project Manager and User Experience Researcher.  Draw Information Architecture diagrams to clarify structure and facilitate communication.

Simplify and consolidate feature diagrams & IA diagrams for the iMember system

Design goal

Enhancing Data Management and User Experience

Upgrade the old member center to iMember for  better user experience.
Reduce learning time for new users. 
Develop features for various team needs and scenarios

Design solution-1

Streamline Functional Flow

Simplify the existing functional flow to reduce complexity, making it easier for users to navigate and complete tasks.

Part of Simplified Page States and Components: Upload Files

Design solution-2

Improve User Guidance

Adjust the wording and labels throughout the interface to help users adapt more quickly to various functions, enhancing overall usability.

Standardizing Terms with UXW and UXR Diagram

Design solution-3

Modernize with a New Design System

Develop a new design system to update and simplify the overall interface, providing a modern and cohesive user experience.

New UI and Components (Left) / Old UI (Right)

Feedback

After iMmeber launched the first version, it has been 3 months. Here are the feedbacks we have collected from the users

Enhanced User Experience
iMember reorganized the information layout by categories and utilized tabs to easier switch between

30% Conversion Increase
The conversion rate increased by 30% in the first quarter.
5% Time Saved
As they usually need to manually process the test account once in three months. This enhancement helps to save their working time by 5%

And that's not all !

Beyond Design Systems: Empowering Frontend Teams with Robust Guidelines

When executing new features, the development team, guided by these rules, can craft them in harmony with the overall design.  This strategy confidently slashes development time and remarkably enhances communication efficiency.

UI Guidelines for the Front-End Team

Behind the project

How do we bring this plan to life? Embracing Agile: Optimizing Workflow with Sprints and Scrum

As the iMember scope is huge, we've opted for Scrum as our project management approach. Our Daily Standups ensure everyone's in sync, fostering transparency and teamwork. Every two weeks, we hold Sprint Meetings. During these, designers present new mockups to the Front-End team and review previous ones. This method enhances flexibility and allows us to continuously improve our work. In essence, Scrum and our Sprint Meetings help us manage our complex projects effectively, keeping us agile, transparent, and always improving.