Connec+ is a messaging application that lets you communicate securely with other users. Text, make calls, share screen, access devices remotely and record conversations, all in one place without any hassle of switching multiple. applications/devices.
🤹♂️Role: Solo UI/UX Designer
🧰Tools: Figma, pen and paper
🕐Duration: March-July ‘22
👨🏫Background
During the peak lockdown of 2020, my best friend and I wanted to reach the masses with our hilarious (or so we thought) podcast aka hours-long calls. Only if it was possible to record WhatsApp calls After several trials and tribulations, and hoping multiple platforms and devices, we released our first season. During the whole process, we wished that one mobile application had it all. Wouldn’t that be nice?
Yup, I am going to redesign WhatsApp. 💪
Or maybe I can use the liking of WhatsApp and make something new, something better.
This should be easy, right? 🙃
👨💻Research
After researching within my close circle, confronting my personal biases and a google search later, I decided to take a more serious approach.
I started with user interviews which were conducted in person for better understanding. The intention was to understand the users’ needs and attitudes and to find out their pain points.
I interviewed 12 diverse users who actively use WhatsApp and related applications.
📊Insights:
- All the users use WhatsApp since most of their contacts use them.
- Most of them are open to using the alternative application if the user interface and functionality are familiar with what they know. So, I’ll borrow the liking of WhatsApp to make users feel more comfortable.
- They would prefer features like call recording, screen sharing and remote access over “payment” and “status” features since they prefer to use some other specific applications to conduct these particular tasks or operations.
🎭Personas:
Based on the user research, I identified two personas with different needs
🎢 User Journey:
In addition to personas, I created their journey maps to help me empathize with the users.
📊Insights:
- Users wanted to record their calls
- Users wanted to have the opportunity to save the recording long after the call ended.
- Instead of payment/money transfer, users prefer screen sharing and remote access.
🧘♂️User Flow:
And for the last part of the research, I focused on user flows to make the design more user-centric — and therefore, more successful from the users’ perspective.
In my research, it was clear that users wanted to have the option to record their calls, even long after the call ended.
Findings from research also indicated how there was a safety/trust issue with the payment/money transfer option since most users prefer different applications for money-related tasks/operations. So, I decided to remove this feature and instead give users much-requested screen share and remote access features.
🗺Sitemap:
After researching, I moved on to the next step of the design process, Ideate. I created a site map to organize the structure of the app and have a clear visual representation of the screens and how they would relate to each other.
🖇Wireframes:
With a clear idea and data, I started sketching the core features and designs in the low-fidelity wireframes with pen and paper which later graduated to high-fidelity wireframes on Figma.
🚂Prototype:
For usability testing, I used high-fidelity wireframes on Figma to make a clickable prototype.
👨🔬Usability Testing:
For usability testing, I created a test plan and test script for an easy and smooth experience for our users. I decided to moderate the testing remotely to get the most out of this exercise.
- Users got stuck in the endless loop due to the limitations of the Figma prototype feature, so I decided to add “connec+” as a home button (for which small A/B testing was conducted).
- Users didn’t want to search the contacts in order to start a conversation with them, so I introduced the contacts tab as the home default.
- Users wanted a shortcut to stop/revoke the remote access in case of emergency. So, I introduced a shortcut, the lock button on the phone that would revoke/stop the remote access instantly without ending the call.
✨Final Screens:
🎨Visual Design:
🌈Colors:
- During my research, I found that blue is the most-used colour among competitors (Skype, Telegram, Facebook Messenger, Signal, etc.). Blue denotes professionalism and security, and It is associated with trustworthiness. So, I decided to use 4F7ED9 as my primary colour.
- Replaced the pure black with 262C38 for accessibility.
- I also used fffff (white) as the background colour.
- Followed the 100–70–40–10 rule to have a wide variety.
👨🎓Learnings:
- Getting attached to your designs is not the best practice as that can quickly change after user testing and iterations have to be made solely prioritizing users’ needs.
- Feedback from peers is equally important as the user’s, in order to become a better designer.
- Getting side-tracked is very easy, so keeping the problem in sight is very important.
- Users are always above personal biases when it comes to design.
📱Prototype:
If you want to check out the prototype, here’s the link:
🥺Thank you so much for giving my case study your time.
🐣Feel free to reach out to me on Instagram, Behance or Linkedin or even here for any feedback or to discuss anything.
Later .😙✌
