UI
UX
Product
imBee: Improve app interactivity to increase user engagement
Company
Time
8 weeks
Jan to Feb 2022
Team
Product Designer: Guo
Product Owner: Guo
App Developer: Orion Lam
Tools
Figma, Notion, Jira, Mixpanel
What is imBee?
imBee is an Omnichannel product. Still don't know what this is? Ok, imagine you are a business owner and handling multiple communication apps to chat with your clients, and you may have a partner with you. But here's the thing, you may feel so annoyed that sometimes you have a communication gap between you, your partner, and clients. So, this is going to be a move that you will use imBee to solve the problem. imBee consolidates all your business channels into one account, allowing you to communicate with your 100+ clients using just one app.
We provide three different devices: Web, iPad, and Mobile app. During the three-year pandemic period, our focus was primarily on Web development, as most people were working from home. As a result, the demand for Mobile app usage was relatively low.
Why are we kicking this project?
Somedays, we have noticed that some of our existing and potential users are gradually starting to use the imBee mobile app. However, many of those who have used the app provide negative feedback and then stop using it. Therefore, we planned to address the problem of low usage rate and increase users' dependence on the product.
What have we achieved?
At the end of this phase, we were happy to see positive results from our analysis of Mixpanel data:
🙌 Redesigned the information architecture, which increased team chat usage by 10%.
🙌 Improved tap experiences resulted in a 5.3% increase in tab bar clicks and a 26% increase in chat action tool clicks.
My Key Contributions
  • Defined the project goal, created a product roadmap, identified requirements, create task in Jira, hosted every sprint meeting, and presented them to the Project Lead and CEO.
  • Researched, ideation, low/hi-fi design, mapped user flows, and prototyped interactions for the product.
  • Rebuilt, managed, maintained, and advocated for the imBee App Design System.
  • Planned and executed user testing, then present the findings to Project Lead. Ensure accuracy and clarity in all communication.
  • Quality Assurance for preventing quality failures after launch.
Goal
Before kickstart a project, I wanted to figure out our specific goal. So, I put our target user in the marketing funnel and I learned that our existing and potential users have a low conversion rate and loyalty. Therefore, our goal was to increase user subscription rate and user retention rate, but it's difficult to measure the reason for the final result is due to this design change. Thus, I broke the main objective into smaller ones, which are: Increase feature usage rate at least 5%.
Research
To figure out why our product wasn't really hitting it off with users - why they weren't sticking around. I started exploring the current version 2.0 to learn more about its features. I also conducted a group user interview with three existing users. After all this, I categorized several problems and listed them. As a result, two major categories of issues emerged:
Inconsistencies across platforms
The functions of the mobile version cannot satisfy users
Business impact
Making universal updates to all platforms at once is costly and time-consuming.
Businesses can lose existing customers and hard to gain new ones.
User impact
Customers encountered friction between platforms.
Customers get frustrated and lose trust in the business.
Scope & Define
Due to resource limitations, our App team only had 2 members - Orion (App developer) and myself. Therefore, I prioritized the development tasks by converting the problems into our goals and considering the expected impact and development costs.
Problem
Inconsistencies across platforms
The features of the mobile version cannot satisfy users
Goal
Solve the current UX problems
Add new features
Develop Time
Low
High
Impact
Existing User & Potential User
Existing User
We decided to begin with the tasks that had the greatest impact and required the least development time. These tasks primarily addressed existing issues with the app rather than introducing new features.
Design Principles
Well, design not only solves user problems but also adds value to the business. So i seted out the design principles to follow: Consistency, Quick and Simple - Provide users with a consistent, simple, and smooth user experience. By doing so, increase users' trust in our product to help facilitate its growth.
Ideate
Previous IA
Current IA
Previous Flow
Current Flow
Design
Alrighty! So you've seen how I break down business problems into tasks, but we haven't really dug into what the problem is, right? So let's dive into that. And hey, don't forget, you're the business owner here!
Swipeable Chat Room
Goal: Simple and convenient access to the team chatroom
So, picture this. You're having a chat with your client Lindsey in a place we like to call the "Chatroom". Suddenly, Lindsey throws a question that you just can't find an answer to. No worries! You can just go into another chat space linked to Lindsey's Chatroom, known as the "Team Chatroom", and ask your partner for some help.
However, our users are facing a few challenges with it:
1st problem
It is difficult to understand that there is an exclusive team chat room in the chat room for communicating with customers, because the icon of the team chat room is difficult to identify, making it difficult to find this function.
2nd problem
Users frequently press the icon button by accident, causing them to lose focus in the present moment.
Therefore, I reconstruct the information structure of the chat room. I use a progressive click-through experience to guide users from the top level (Home page - View List) to the lower levels (Chat List → Customer Chat Room → Team Chat Room), so that users can understand the relationship between each page.
Horizontal disclosure:
Previous
Current
Tab Bar Experiences
Goal: Tag bar operation as expected by users
Again! You're over 100+ clients messaging you, but you only have one brain to remember their requirements. That's where the "Tag" feature comes in handy. It can customize the input of any text to helps you remember any relevant information about each client.
Previous
The original tab bar design didn’t have any restrictions on its variations. When users created labels with long words in the web version, the label would extend downwards, obstructing the view of the chat window.
Current
To address this issue, I converted the tab bar into a component that can be expanded and collapsed vertically while scrolling in parallel.
More Accurate Tap Experiences
Goal: Activate the chat action tool
Last picture time! So, you're chatting with Lindsey and you want to reply to one of her messages. Just hit the "Reply" button in the Message Action List by tap the message you want to respond to, and you're golden. But... our user found it a bit tough…
Previous
Because users could only long-press the chat bubble to display a list of action tools in previous versions, this was challenging when the size of the chat bubble was too small.
Current
To address this issue, I re-examined and standardized the tap range to ensure a smooth user experience. I changed the tap area from a chat bubble to a row block, making it easier for users to tap on the target area and access the action tools.
Furthermore, based on user testing, it was revealed that users were spending a significant amount of time searching for specific chat actions. This was due to the most popular actions not being located at the top of the list. To improve the user experience, I rearranged the actions based on click frequency data.
Validation - Improving and Improving
Might sound a little weird, but I didn't really get to do a lot of prototype testing. Time was a bit tight, we put our all effort in testing the UAT environment. That includes the technical side and the user experience part. However, I did manage to conduct user testing with the original 3 users. On top of that, our internal team members have been continuously testing in the UAT environment and sharing their feedback at different time points. Here's the main feedback:
What they love about?
70% of them are like the new tab bar and the switchable chatroom experience. These changes make me feel all refreshed and new!
What they hate about?
30% of they felt a bit confused when they first tried the new chatroom switch feature, since it was a totally new thing for them.
Outcome
Even though 30% of people have given feedback that the new chat room experience still needs improvement, I and the team (including the CEO and product manager) agree and believe that this will not have a negative impact, so we have released all the mentioned experience changes to the users.
Sure thing! We conducted a data analysis on this version using Mixpanel and found that our design changes have had a positive impact:
+26%
Clicks on the chat action tool
+10%
Usage of team chat
+5.3%
Clicks on the tabbar
Additionally, the customer success team provided positive feedback regarding user satisfaction:
"App 2.1 is significantly more user-friendly and intuitive than its predecessors."
We have also received positive feedback from the internal members who experienced this version's update at different times:
Overall, users who visited our app stayed longer and engaged in more conversations on team chat than before.
What’s Next
In the phase 2, we plan to add some new features to the mobile app. Therefore, I need to start planning how to understand what web version features users want to get on the mobile app. In addition, it also include the previously mentioned 30% of negative feedback on the new chat room into the phase 2 plan.
Takeaways
I'm glad I proactively requested to be the designer for this project, as i had worked on many aspects of this project, including UI/UX, product map planning, setting goals for each phase, and ensuring consistency of the finished product and design. I applied my previous experience of working with technical chiefs, project managers, and product managers to this project.  Additionally, I collaborated with app engineers to revise the process for rapid development and effective management of proximity. So, I'm glad that everything turned out great!
Sure thing, I also picked up a thing or two about the fast-paced world of start-ups along the way. This is where designers always have to juggle business needs and development costs. Figuring out what's most important and tackling those tasks first really helped us speed things up and keep our eyes on the prize.
In the end, the whole team and I are very pleased with the positive outcome of our change. This gives us more confidence to move forward with our next phase of revisions.
OverviewGoal & ResearchScope & Define IdeateDesignValidationOutcomeTakeaways