Laptop with a website for company management on the screen. The modern design showed purple text "SHELF COMPANY" and blue text "SHEIAL90" in an ui/ux interface for a big data dashboard of an online shelf company. The black background had a minimalistic style with clean lines, high resolution, and high quality details.

Project overview

Product
Our CRM project streamlines customer information management, ownership transfers, and task management. With a centralized platform, businesses optimize operations, ensuring accuracy, easy retrieval.
Project duration
16 Weeks; Jan 2023 - May 2023
Problem
Businesses seek scalable CRM solutions to manage complex customer relationships. Seamless handling of individuals in various roles is not common in CRM systems.
Goal
Create a versatile CRM system with virtual inventory management for efficient customer information handling. Multiple roles enable seamless management, tailored for shelf companies, ensuring accurate product transfers and traceable records.
My role
As the sole UI/UX designer, I led collaboration with a project manager and programmer, creating impactful user experiences and showcasing synergy in design, project management, and development.
Responsibilities:
  • Define the problem and provide insights to inform the ideation phase
  • Visual design of low-fi and high-fi wireframes, prototypes, and user testing
  • Conduct user research
  • Define personas, user journeys, empathy maps, and user flows

Understanding the user

User research
Persona
Problem statements
User journey maps

User research

Summary
In order to gain a thorough understanding of user pain points, I undertook extensive foundational research for my project. This involved conducting interviews with users to gather valuable insights into their day-to-day business operations.
Considering the time constraints, I chose to focus on qualitative research, enabling me to explore the subjective experiences and perspectives of users in depth. This approach yielded a wealth of rich and nuanced data, facilitating detailed analysis and informed decision-making.
Methodology

Time consumed

The interviews are estimated to last between 15 to 30 minutes each.

# of interviewee

A total of six individuals, including owners, managers, and front-line staff.

Set of questions

A set of 10-15 questions will be prepared to gather their insights and feedback.

location

The interviews will take place at the participants' company in a designated private room.
Question
" What does you expect a CRM system impact your daily workflow ?
" Can you describe any specific functionalities that you find lacking ?"
" What challenges do you  face when using current CRM system ?"
Pain points
1

Disorganized shelf company data

Information and records related to shelf companies are not properly structured or managed. This lack of organization can lead to difficulties in locating specific details, wasted time
2

Lack of draft option when add a new entry

Without this feature, users may feel pressured to complete all required information in one sitting, which can be time-consuming and increase the risk of errors or incomplete entries.
3

An individual has multiple roles

This flexible arrangement allows for versatility and adaptability in assigning responsibilities, enabling the individual to fulfill different roles as needed within a shelf company
4

The sequence for the input field

Information and records related to shelf companies are not properly structured or managed. This lack of organization can lead to difficulties in locating specific details, wasted time

Persona

Problem statement

Calvin lee is a professional businessman working in his trading shelf company business. He is looking for ways to better oversee the company and manage the data of the shelf company and client.

User journey map

Starting the design

Sitemap
Moodbaord
Paper wireframe
Digital wireframe
Usability studies

Sitemap

Use a flat structure and a hierarchy layer sitemap for our ERP for several reasons.
Firstly, making it easier for employees to navigate and access the relevant features and functionalities of the ERP system. Additionally, the hierarchy layer sitemap provides a logical organization of information, with different levels of access and permissions based on roles and responsibilities.

Digital wireframes

Starting with paper wireframes, I captured thr ideas and then moved on to digital wireframes. I focused on three key parts: the company module, inbox module for task assignment, and role module.

By conducting wireframing for these specific parts, I prioritized essential functionality and refined the user experience before proceeding to the final design phase.

Low-fidelity prototype

I have adopted an effective approach by creating a low-fidelity prototype from the user flow diagram and wireframes. This allows me to test the functionality of the system before finalizing the design.

By focusing on key parts such as the task assignment, company module, and role module, I can ensure that these elements are thoroughly evaluated for usability and accessibility.
View prototype:
Low-fidelity prototype

Usability study

Methodology

Time consumed

The interviews are estimated to last between 25 to 30 minutes each.

# of interviewee

A total of three individuals, including owner, manager, and front-line staff.

Study type

Moderated usability study will be held in this usability study

Location

The interviews will take place at the participants' company in a designated private room.
Questions
" There is modules from the navigation bar for the left side, would you open a company profile call "test" ?"
" Can you add a new role in to the system with all the access right except the edit right in inbox module ?"
" In the inbox module, there are two types of view for the task assigned. Can you try to view both ways?"
Findings
1

OverwhelMing field

Interview participants raised concerns about the overwhelming number of fields and the difficulty of inputting information correctly while understanding the relationships between them.
2

A character have more than one role

While the usability test didn't highlight this issue, participant interviews revealed concerns regarding selecting individuals with specific roles.
3

Draft function

To address the challenge of extensive fields and incomplete information during the entry process, implementing a draft function can be beneficial. This feature allows users to save their progress and return to complete the entry at a later time.
4

A status bar

Participants in the interview expressed feeling lost while filling out the company entry form due to the extensive fields. To address this, they suggested implementing a status bar for navigation and progress tracking.

Refining the design

Mockups
High-fidelity prototype
Going forward

Mockups

Overwhelming field
Based on the usability study findings, I have made several redesigns to enhance the user experience. One example is the addition of dividers and placeholders in fields.

By adding dividers, I visually separate different sections or groups of related fields, improving the overall clarity and organization of the form. The inclusion of placeholders provides users with hints or examples of the expected input, guiding them in filling out the fields correctly.

These design enhancements help users navigate the form more easily, reducing confusion and improving the overall usability of the interface.

This status bar allows users to easily navigate to specific parts of the entry form. By providing a clear visual indicator of the user's progress and current location within the form.
Individual with multiple roles
To address cases where a character may have more than one role, I have introduced a search field with category tags in the ERP system.

This feature allows users to search for specific characters and filter the results based on their roles. By typing in the search field and selecting relevant category tags, users can quickly find and access characters with multiple roles.
Draft function
To address the pain point of users having numerous fields for each role in the ERP system, I have designed a draft function that allows users to input information at different stages.

This feature enables users to stop entering data at any stage and resume later without losing progress.

High-fidelity prototype

In the high-fidelity prototype, it is important to leverage the logo's lively colors while also incorporating grey tones to create a professional image. By using vibrant shades from the logo's color palette, the design can exude energy and capture attention.

Meanwhile, the strategic use of grey color adds a sense of sophistication and professionalism. The prototype should also ensure the inclusion of all necessary important parts, such as key features, essential functionalities, and relevant user interactions.

By combining lively logo colors, a touch of grey for professionalism, and a complete representation of crucial elements, the high-fidelity prototype can effectively showcase a visually appealing and functional design.

Going forward

Impact
As I design the first phase of the CRM system, I have focused on building the fundamental design and flow. I am considering the future expansion of the system and the incorporation of additional functions.

To ensure a seamless integration of these new features, I am prioritizing a flexible and scalable design architecture. By creating modular components and well-defined interfaces, I can easily accommodate future enhancements.
What I learned
Through designing the CRM system, I learned the importance of focusing on form design and flow, prioritizing user needs and paying attention to detail.

Creating intuitive and well-organized form layouts ensures a seamless experience for users when inputting information. Additionally, user feedback emerged as a crucial insight, guiding improvements and enhancing the system's usability.
Next step
1
Obtain valuable feedback from senior stakeholders to gain fresh perspectives and identify potential improvements. Incorporating their insights refines the CRM system to better meet stakeholder needs and expectations.
2
After design approval, prepare clear documentation with instructions, design assets, and guidelines for programmers. This ensures their understanding of specifications and facilitates a smooth and efficient development process.
3
Plan a usability study to assess whether the outcome meets user expectations. This study involves observing users interacting with the design to gather feedback.
Thank you for watching my entire project portfolio.
Your interest is greatly appreciated.