Native task app
Ⅰ. The Overview
My Role : Product Designer
Discovery, UX/UIDesign
Tool : Miro, Figma, Mixpanel
Duration :09.2023 ~ 11.2023
- About Native task app
Following a mobile-first approach, the company created a native task app and planned to transition all task management experiences to the mobile app. The initial stage in transitioning the mobile app included creating the chat and notification page on mobile app .
- The challenges
Provide seamless experience on mobile chat
Develop a notification page for the mobile app which maintains a consistent experience with our responsive website
Ⅱ. Design Process
The objective of this project was to smoothly transition users’ experiences to native mobile app.
This feature mostly followed responsive web design but adjustment and creation of new components were necessary to ensure optimal mobile experiences. Another consideration involved collaborative efforts between backend and mobile developers to address technical requirements. Regular catch-up sessions with developers were essential to keep pace with the implementation of this feature.
Discovery
We examined the usage of our responsive website using Mixpanel, to gain insights about the most frequently visited pages, peak usage times, etc. To gather more detailed information, we conducted user interviews with our customers accessing our website via mobile devices, aiming to comprehend the specific content and times they engage with the web app on mobile. Following this, we had meetings involving the Product Owner, Developers, to define the project scope and determine the overall implementation plan.
2. Design Solution
We have deployed notification page on mobile app. Basically, we followed responsive web design for the consistency but the components and structure was adjusted for users’ convenience. Since we have technical considerations & user flow for navigating to the task, we discussed with developers to find solutions. Our next step will be monitoring the data and gathering feedback from users to reflect to the next phase.
Chat page
Communication with teams posed a significant challenge in the responsive web on mobile devices. Users relied on mobile platforms to engage in chat-based communication with team members, seeking information or tracking tasks. However, issues arose in locating menus and identifying where to access detailed information. Additionally, there were complications related to chat delays, hindering effective communication among coworkers.
To address these challenges, we undertook several improvements. Firstly, we restructured the menu to enhance user accessibility, making it easier for them to navigate. Simultaneously, we optimized mobile performance to ensure a smoother experience. Another notable concern was the difficulty users encountered when sending media on mobile. Prior to the enhancements, users struggled to attach multiple photos at once. In response, we revamped this feature, streamlining the process and introducing a feature that allows users to designate the order of selected media. This enhancement facilitates a more organized presentation of media, thereby improving overall communication within teams.
Notification page
Due to users having multiple workspaces and projects, Some people had difficulties to find unread notifications among others. Therefore, We put the unread only toggle button at the top, ensuring that mobile users do not miss the important notifications.
We mostly followed responsive web design for the consistency. However, we received feedback from users expressing difficulty in looking for mentioned tasks within various updates. Therefore, we introduced dedicated “Mention” tab positioned immediately before “All updates” tab, which can help users easily find tasks which mentioned them.
Transition to the task
we discussed with developers to ensure a smooth transition for users with the introduction of the new mobile app. Until the integration of task functions into the mobile app, tapping on a notification to check a task would direct the user to the web app. In cases where the web app was logged out, users would initially encounter the login screen. However, after logging in, they would be redirected to the specific task.
Push notification
How to implement push notification was one of our consideration. We categorized the types of push notifications and discussed with developers to determine the appropriate number of notifications to send to users. Given the multitude of notifications available, the key was to selectively ping users with only the crucial notifications, aiming to avoid any inconvenience or annoyance.