Project overview

Product
Resident Engagement and CRM System is a comprehensive solution that combines resident engagement and CRM functionalities. It empowers residents to provide feedback and participate in surveys, while also facilitating seamless communication of news and activities.
Project duration
12 Weeks; Nov 2023 - Jan 2024
Problem
Addresses several challenges in community management. It provides a platform for residents to easily share feedback, enhancing understanding of their needs and fostering a collaborative environment.
Goal
Create a thriving and connected community by fostering resident engagement, improving communication, and enhancing community management processes. By providing residents with a platform to share feedback, participate in surveys, and stay informed about news and activities, the app aims to empower residents and promote a sense of belonging and involvement.
My role
As the sole UI/UX designer, my focus was front-end design. I collaborated with the project manager and programmer to create visually appealing and user-friendly interfaces, ensuring alignment with project goals.
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
To gain deep insights into user pain points, I conducted extensive foundational research for my project. This involved interviewing users to understand their business operations.
Due to time constraints, I focused on qualitative research, allowing me to explore users' subjective experiences and perspectives in depth. This approach generated valuable and nuanced data, enabling thorough 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 four individuals, including managers and officers

Set of question

A set of 10 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 kind of questions will be consist for the survey ?"
" How the residents to join the activity in the app ? need to be approved ?"
" How to identify who are the qualified resident to join the app? How many type of resident in the app?"
Pain points
1

Types of resident has to be identified

The system need to have a mechanism to accurately categorize residents based on criteria such as property type to target specific communication and engagement strategies effectively.
2

The activity must be approved by backend

To maintain control and ensure appropriate content, the system should incorporate a backend approval process for activities, allowing administrators to review and authorize events, news, and announcements before they are published to residents.
3

Some survey need to be open with access right

Certain surveys may require restricted access, such as surveys targeted to specific groups or demographics. The system should provide the ability to set access rights, ensuring that only eligible residents can participate and provide feedback.
4

A terminated service option on the app

To streamline resident management, the app should include a feature for terminating services, allowing residents to easily unsubscribe or discontinue specific notifications, thereby providing flexibility and control over their engagement preferences.

Persona

Problem statement

Mary Kwong, a property manager, seeks solutions to optimize property data management, streamline operations, and improve client service in order to drive success and growth for her property management company.

User journey map

The purpose of creating a user journey map for Mary Kwong is to visualize and understand the entire experience and interactions she has as a property manager. It helps identify pain points, opportunities for improvement, and gaps in the current process.

Starting the design

Sitemap
Moodbaord
Paper wireframe
Digital wireframe
Usability studies

Sitemap

We use a flat structure and hierarchy layer sitemap. Survey, news, and activity are prioritized. Identification is the initial step for users. It enhances navigation, access, and permissions based on roles, ensuring an efficient and secure experience.

Digital wireframes

Following the paper wireframe, I have created digital wireframes for the main functions: news, activity, and survey, as well as the identification process.
These digital wireframes provide a more refined and detailed visualization of the user interface and interactions. They showcase the layout, content organization, and user flow within each function, ensuring a seamless and intuitive user experience.

The digital wireframes serve as a valuable reference for further design and development stages.

Low-fidelity prototype

Using the digital wireframes as a foundation, I have developed a low-fidelity prototype that emphasizes user identification and the display of news and activity. The prototype showcases the user identification process, allowing users to select their user type or role.

It also demonstrates the interface for viewing and interacting with news and activity, presenting a basic representation of their layout and functionality.
View prototype:
Low-fidelity prototype

Usability study

Methodology

Time consumed

The interviews are estimated to last between 30 minutes each.

# of interviewee

A total of three individuals, including managers and officers

Set of task

A set of 3-5 tasks will be prepared to gather their insights and feedback.

Location

The interviews will take place at the participants' company in a designated private room.
Tasks
" You have to register the type of user you are then to browse the certain news and activity, can you do it ? "
" There is a different survey for you, please try to do one of the surveys. "
" You can join any activity that is displayed on the app, please try to join an activity."
Findings
1

Emphasis the survey module

Particularly interested in emphasizing the survey module. They have high expectations for its functionality and performance in the project.
2

An additional function is been updated

The ability to label news articles with tags and enable user filtering. This additional function enhances the user experience by allowing them to categorize and easily access relevant news content based on their preferences.
3

The client is looking for a logo change

The client is seeking a logo change that reflects a more energetic and lively feel. They are looking to revitalize their brand identity with a logo that exudes vibrancy and captures attention.
4

A publisher profile page

The client has a requirement for a publisher profile page that allows users to access more detailed information about publishers. This feature will enable providing them with a comprehensive understanding of the content they are engaging with.

Refining the design

Mockups
High-fidelity prototype
Going forward

Mockups

Emphasis the survey module
Given that the survey module is the primary focus of the app, it is important to accommodate the customer's request to display news and activities on the home page.

To strike a balance, a solution could be to include a dedicated button in the navigation bar specifically for accessing the survey module.

This approach ensures the prominence of the survey module while still providing convenient access to news and activities, creating a well-rounded user experience.
Labeling news
Designed the UI for the filter and label features in the news module, enhancing the user experience. Users can now personally categorize news articles with tags and conveniently filter the content based on their preferences.

This functionality allows for a personalized and tailored news browsing experience, ensuring users can easily access relevant articles aligned with their interests.
Page for publishers
I have addressed the client's requirement by designing a publisher profile page with a user-friendly interface. This page allows users to access detailed information about publishers, providing them with a comprehensive understanding of the content they are engaging with.

Additionally, I have integrated a filter and label feature, enabling users to search for specific information published by a particular account. This functionality enhances the overall user experience and facilitates easy access to desired content.

High-fidelity prototype

I have created a high-fidelity prototype that encompasses all the essential modules of the application. This prototype will facilitate further iteration and usability testing, allowing us to gather valuable feedback.

I'm excited to explore the interactive user experience and gather insights to refine the design and ensure an intuitive and user-friendly final product.

Going forward

Impact
In the first phase of designing the system, I have successfully completed the front-end UI development. The focus was on establishing a solid foundation for the design and flow of the application.

Additionally, I have confirmed the app's flow and created a comprehensive sitemap, ensuring a clear and logical navigation experience for users. To incorporate business design elements, I have carefully considered the integration of key features and functionalities, aligning them with the overall purpose and goals of the CRM system.
What I learned
During the design process of the CRM system, I gained valuable insights into the significance of confirming the business design elements to avoid future redesigns. By thoroughly understanding the business requirements and goals, I ensured that the design aligns with the specific needs of the organization.

Additionally, I incorporated a user-friendly survey UI for the first-time setup, allowing users to provide essential information and preferences in a streamlined manner. This approach enhances the user onboarding experience and sets a solid foundation for the system's functionality and customization.
Next step
1
To gain fresh perspectives and identify potential improvements for the system, we will invite external individuals to test and provide feedback on the application. By involving outsiders, such as users from the target audience or industry experts, I can gather valuable insights from a different viewpoint.
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.
Thank you for watching my entire project portfolio.
Your interest is greatly appreciated.