UX/UI Design
GroupLife
Product Type /
Web/Mobile
Role /
UX/UI Design
Year /
2023
MY ROLE
As the only Designer leading this project, I was responsible for multiple UX tasks, including collaborating with the researchers to conduct user research and validation testing, structuring the information architecture, and creating wireframes and final prototypes for various features like search filters, dashboards, privacy setting, mark attendance and etc. The design process lasts 4 months. I successfully helped the PO and engineers deliver a functional product to be presented to ministry partners.
DESIGN PROCESS
-
Problem Brief
-
User Research
-
Understanding Pain Points and User Stories
-
Market Research
-
Broad Exploration
-
Define Scope and UX Outcomes
-
Design Execution
-
First Design Draft(Wireframes)
-
Design Review-First Round
-
Prototyping (Hi-fi)
-
Validation Testing and Iteration
-
Final Design Review
-
Implementation
-
Review and Improve
-
Finish
DISCOVER
Collaborated closely with the PO and UX researchers to understand the users and market by analyzing the research data, conducting survey and user interviews, and competition analysis.
DEFINE
Define the scope of the project based on the research findings and the roadmap of the parent project. Structured the information architecture, and prioritized the features for design and launch.
DEVELOP
Created the user flow, and designed the interface for both group leaders and congregates (main users), desktop and mobile versions, which are iterated based on internal discussion and user testing.
DELIVER
Used Figma to deliver the final design, followed the existing design system, and handed the design file with a detailed guide to the engineering team. Help them access the CSS assets and provided suggestions for the live version of the platform.
CONTEXT
ACST has been working towards a portal replacement for quite some time. The portal was the original solution for MinistryPlatform congregants to interact with their church. This is currently being replaced with Widgets and LifeApps. While the strategy executive team decided to officially sunset this Portal, we recognized there is valuable functionality that currently only exists in the Portal that does not yet live in Widgets or LifeApps. This has become a blocker for churches to officially move off of the Portal.
USER PROBLEM
Lack of engagement for the group events and limited interactions between the group members. The participants have no way to learn more about the group and other participants except talk with the leaders in person. Group leaders urgently need a platform for them to manage their groups easily.
CHALLENGES
Most current MinistryPlatform users have gotten used to the current product. However, the current product is not user-friendly enough and the interface is outdated. So it’s hard to attack new adopters. So when designing GroupLife, I have to consider both current and future users' behavior and preference.
PROJECT GOALS
-
Identify all relevant functionality that exists in the Portal that does not yet exist in the current GroupLife App
-
Ensure that the identified functionality is available in GroupLife App
OUTSIDE OF SCOPE
-
Impersonate Portal User
-
Background Check Authorization - this is being handled within Tools
USER RESEARCH
To inform the design process, I conducted a mix of primary and secondary research. The primary research surveyed 20+ MinistryPlatform users on the biggest pain points of the group management process.
We identified “get group and members information“, “send RSVP“, and “privacy customization” as the major pain points that the product aims to solve in this early stage.
-
Arround 70% of participants not using GroupLife frequently because of they couldn't find the functions they need.
USER PERSONA
I created three user personas (for both group leaders and congregants) based on our own user research results, and feedback from other internal stakeholders.
Users' main pain points:
Group participants need the ability to see additional information about the groups that they are a part of and interact in multiple ways. And it’s a problem that there’s no way for them to indicate that they planned to attend or did not plan to attend an upcoming meeting. In addition, they worry about the safety of their personal information that explored in all groups that they participated. At the meanwhile, for the group leaders, marking attendance is an important task and they’re not satisfied with the function in the Portal.
WIREFRAMES
​
After brainstorming with my PO, I created wireframes that visualize our initial solutions. After reaching agreements with the Tech lead about the information structure and rough user flow, I started creating the first draft of Hi-fi prototypes and tested it with potential adopters.
VALIDATION TESTING AND ITERATION
​
It took me and the PO two months to ideate, iterate and finalize the design. We evaluated the design and detail each time by considering users’ need and behavior, also worked with the UX researchers to conduct user testing to testify to the usability of the interface with the target audience, whose feedback was adopted in the future iteration.
The target group is both congregants and group leaders that manage small groups in different sizes of churches. A mix of non-Catholic & Catholic users would be beneficial but they don't necessarily have to be MinistryPlatform users.
The Goal of the validation sections is to understand what is the ideal experience for both group leaders and congregants about their group life, whether the design concept for the group leaders to manage groups is usable enough, and whether we need more functionality to support the management of users’ group life. And it’s also important to observe whether the new UI is easier for all the target users to navigate and whether the privacy setting flow is reasonable.
INFORMATION ARCHITECTURE - GROUP LEADERS
FINAL DESIGN
Home Page (User: Group Leaders)
This is the first page when both group leaders and congregants accessing to GroupLife. Listed the Group Names, Pictures, Event Time, Participants Numbers, and Last Meeting time which are the info that both group leaders and congregants most frequently check.
Info Page (User: Group Leaders)
This is the first page when users get into a specific group they joined. The congregants would have the same content as the leaders. The content listed on the left card and its order are tested in the validation sections. More important information to users is listed at the top.
Users could add the regular event time to their calendar by clicking the text link "Add to Calendar", find the location by "See Map", and reach out to their group leaders by clicking the leaders' names.
Since this is the most frequently browsed page, I added the nearest upcoming event on the right card so that the congregants can send an RSVP as soon as they see it. They don't have to go to the event tab every time.
Participants (User: Group Leaders)
Group leaders have the right to remove participants from their groups or add any new participants. And they often need to send emails or text messages to their participants, so it'll make the task easier if we allow them to select all. Besides, there could be multiple roles in some groups, so I added a filter on the tool bar.
Sign-ups (User: Group Leaders)
When the group leaders process the user's sign-up requests in batches, and they decline all requests, there will be a pop-up modal to confirm the action, because usually, churches welcome any people to participate in their group events, unless they find that there are suspicious accounts, or the group is full. Once all the requests are processed, a zero state will be shown.
Upcoming Activities (User: Group Leaders)
Both group leaders and congregants have this activities page. They can access every group activity with details from here. But group leaders have more rights such as: Adding/editing/canceling activities, and marking attendance for past events...
Mark Attendance (User: Group Leaders)
The mark attendance function is related to past events, which means group leaders can go to either the Past Events page or the Attendance tab to mark attendance for a specific past event.
For some scenarios like a group leader marked attendance for a group but they realized that a participant actually was not there but marked as attended. They can go to the mark attendance history and redo the task, and also they can leave a comment there for anyone might review it.
Past Activities (User: Group Leaders)
For past events, the group leaders could mark the events cancel as "Did Not Meet".
Mobile Version (User: Group Leaders)
Medium Size
Small Size
INFORMATION ARCHITECTURE - Congregants
FINAL DESIGN
Pre-set Privacy (User: Congregants)
The user flow for CONGREGANTS has some differences with Group Leaders since those two user groups have different needs.
For congregants, there are only three tabs which are Info, Participants, and Activities. The Sign-ups and Attendances tab are hidden, and some editing functions are reduced such as Add/Edit/Remove Participants, Add/Edit/Cancel events since they don't have permission to do those types of things.
In addition, the congregants have a chance to pre-set their privacy before joining any groups.
