Member Experience
I led the redesign of the Member app. I upgraded the existing feature that users liked and added a new feature to improve the overall user experience. Besides, I focused on making the app more visually attractive and user-friendly so that users could easily and quickly navigate through it.
Role
Design Lead
OVERVIEW
The Member app is a handy digital wallet that keeps your information in one place. The Member app redesign enhances user-friendliness and provides a seamless experience, focusing on the Home Screen based on user feedback. The main focus was to create a delightful user experience that facilitates easy actions and comprehensive access to information, including digital credentials and QR codes for efficient site check-in/out, benefitting users.
PROBLEM
Difficulty Locating QR Code
Users reported difficulty finding the QR code within the Member app, leading to delays and frustration, especially when queuing at sites for scanning. Supporting this issue in a long cue inconveniences many users in a timely manner.
Lack of Information
The merit (credential) details page could be more informative. If users want information data, they must seek assistance from the organization and provide detailed information to the members. This process is time-consuming for both users and the organization.
Notifications
One of the major issues with the Member app is its notifications system. The app requires more effective communication regarding updates and notifications. This areas for improvement prevents users from being promptly informed about crucial app changes and actions, which could cause them to miss important notifications or updates.
GOAL
Improve Home Screen
Redesigning the Home screen helps enhance the user experience by making the QR code easy to find and scan, reducing wait times and user frustration during site check-in and check-out processes. Additionally, the new home screen can also offer other features that users frequently use. For example, it can display the action items, dashboard, notifications, etc. This not only adds value to the user experience but also encourages users to return to the application and use it more frequently.
Informative Details
A single page that contains all the necessary information is more user-friendly than separating it into different sections. This way, users can easily find what they're looking for by simply scrolling down. Additionally, including frequently asked questions can save users time and prevent them from needing to contact the organization to receive the information.
Enhance of Notifications
Providing users with timely information about app updates, new features, and relevant actions prevents missed information. This can include reminders about incomplete tasks, upcoming deadlines, and other relevant actions. Users can also manage their notification settings on their devices to receive push notifications for immediate alerts, in-app notifications, SMS, and email.
BRAINSTORMING AND RESEARCH
After several brainstorming sessions and categorizing the high-level features, the design team defined the users' insights and decided on the desired design direction. In this process, I helped define user behaviors and establish the user journey, analyzing improvement areas from our old app. In addition, I researched other business models similar to ours to understand broader user behaviors and shared inspiration from similar industries. After the research, I worked with the team to organize the ideas and collaborated to prioritize with the product manger to start the initial design.
INITIAL DESIGN
I laid out the entire flow and explored several design directions, focusing on prominently displaying the QR code and high-level elements based on the most common use cases and user flows. I have also considered edge cases to ensure that the design covers the majority of users and helps a few unique use cases. After exploring the UI in different ways, such as keeping the card layout styles on the Home Screen and placing the user profile at the top, I shared various options for future development with the design team and product manager based on their feedback.
USER TESTING
After receiving feedback from the team, I narrowed down the design options and chose two to test internally. The first design displays images and files as line items, while the second design shows them as thumbnails. I collaborated with the product manager to prepare questions and met with the engineering team to test user behavior and confirm technical feasibility. Additionally, we discussed accessibility considerations such as text, color, responsive screens on devices, and customized colored QR codes.
Through user testing, I discovered that the thumbnail layout (dashboard on the top with button option) was more comfortable for users to view at once, making it easier to understand the overall images. This option also aligned with our timeline for delivering the final product. This early testing and feasibility check was instrumental in developing the design for the next version and managing our timeline to reach our goals.
DESIGN ITERATION
I met regularly with the product manager and design team to get feedback, which helped me narrow down the options. We built a prototype and shared the final options with the customer service team to ensure we covered our users' needs and initial assumptions about use cases.
DESIGN DECISION
Key design decisions included making the QR code easily accessible, adding notifications for merits, and placing important information and buttons at the top of the screen. These decisions aimed at improving user experience and streamlining the app's usability.
FINAL DESIGN
OUTCOME
The new Member app reduced the average time spent finding key features and enhanced visual appeal, as tested through user testing.
The redesigned Member app offers a visually appealing interface and significantly improves user experience. This will save users time and reduce their pain points. I delivered the final design to the team within the allocated timeframe. To ensure a smooth handoff, I compiled a comprehensive specification document that details every design aspect. This document serves as a guide for the development team, outlining the necessary components for implementation.
Streamlined the design handoff process, delivering specifications early and enhancing the development team's readiness to start work without further clarification.
As we have another product launch as our priority this quarter, the implementation of the new member app has been delayed. However, I have taken the initiative to research how we can improve the design for the next version. One of the potential improvements is the ability to customize the information displayed on the details page. This will allow users to easily select what information they want to see and hide any unnecessary items. Furthermore, users can also mark their frequently used credentials as favorites on the Home screen, making them easily accessible.
KEY TAKEAWAY
Takeaway 1
Having discussions with engineers to determine the technical feasibility of a project early on proved to be very helpful. This collaborative approach not only sped up the timeline of the project, but it also gave us a chance to examine how users interact with mobile devices. Furthermore, it made me more aware of the accessibility needs of specific user groups. This collaboration taught me how crucial it is to work together from the beginning to ensure that all requirements are in line across the team, which can lead to a successful outcome.
Takeaway 2
Initially, I leveraged our existing design system as the foundation for the Member app’s redesign. However, I realized that mobile devices have specific requirements that demand particular components. To address this, I developed a set of mobile-specific components, which enhanced our design system and enabled it to fully support the mobile user experience. These additions were not only useful for the ongoing project but also shared with the team for future mobile products.
© 2024 Jungmin Lee.