Nantanaa Mutharasu
Product Designer
Research Driven
Creative Problem Solving
Check out my projects
Background
The leadership team introduced a new design system strategy and guidelines for a new Global Relay product. As they incorporated the new branding, Global Relay app was looking outdated with the previous design system.
Project Overview
As a lead designer, my role was to redesign the Contacts tab and conceptualize the new features; create, read, edit and delete action for a contact.
Business Goal
Deliver a modern, functional and seamless end to end user experience.
Introduce keyboard accessibility
Design Goal
Improve our UX/UI standards and practices
Clear documentation to keep track of various changes and progress
Research
Competitive Analysis
Desk research on Mobbin to see how desktop and mobile apps treat contact management.
User Interviews
With data sensitive clients, we can't directly interact with them. However, the customer representative team is the closest to the users as they gather pain points from them on a daily basis. I ran workshops with the team to dig deeper on what and why users want to manage their contacts and how they would go about it.
Stakeholder Workshops
I also ran various workshops with relevant stakeholders to gather tech limitations, success metrics, build timeline and scope.
Project Planning
There were various new controls to design and build so we phased it into features. Collaborating with multiple teams was the key to a successful high-quality delivery.
Global Office
Worked with both Vancouver HQ and London designers. This means planning my day to run workshops, meetings, and be available for direct communications across time zones
Agile Communication
Over communicate was our motto- setting up weekly check ins with managers, product, devs and design team to clarify scope, organize priority, raise any risks and resolving issues and blockers. Being adaptable enough to pivot was a crucial attitude for this project
Cross Organization
This project had many requirements and long, which meant being up to date with constant communication. I had multiple TPMs who worked on desktop, mobile and web and we worked together to ensure everyone had what they needed to keep the momentum going.
Design Collaboration
Designing mock ups, polishing guidelines, review meetings with design system teams, reviewing copy with tech writers, debating, presenting ideas and getting it signed off was an exciting and great learning experience.
Design
Create
I looked at the strategic placement of the create contact button and its future states. The create contact button is scalable, ie the button triggers the form and when there are more ways to create a contact in the future (Import Contacts, QR Code) then a menu options will come up.
Then I looked at how the contact form modal would behave; I looked at the frequency a user would create a contact. Users had a list of directory contacts at their disposal. We also didn't want users to have multiple create contact windows to avoid losing their work if they have other apps open. I designed a contact form that would appear as a separate window.
Read
Once a contact is created, a user can view/read the virtual card.
Edit
We looked at allowing users to edit through the same create behaviour; in-page modal.
Delete
We designed multiple ways a user can delete a contact; from the contact list, virtual card, then on a later phase bulk delete.
Other Features
There were additional controls needed to make this a seamless experience; Adding to Existing Contact, Improved Contact List, Right-Click behaviour.
​
Add to Existing
Right-Click Behaviour
Keyboard Accessibility
As an accessibility advocate, I pushed the leadership team to adopt keyboard accessibility across the app. This was completely new so documenting progress and guidelines was crucial. I lined up project goals and documented tasks to be done and the outcomes of each meeting. I referenced the WCAG site to ensure standard practice was adopted.
First, I looked at all the keyboard controls available from WCAG, then mapping out each key control to the GR desktop experience.
I kept the guidelines simple enough since designers were working on redesigning other parts of the desktop app. This documentation guidelines will help them weave it into their work even though we are working at different levels and capacity.
Learnings
This was a huge project involving many designers, TPMs and devs. We continued working with the devs to ensure it was built correctly, managing new requirements, feasibility, technical and architectural expectations. Initial launch failed due to the backend server, however it was a success the second time.
Post Release
I was curious about user adoption of the new contact management controls. I teamed up with an UX researcher and we pushed for log tracking analysis. We were given the opportunity to study the user behaviour without getting exposed to their sensitive and personal information. This is currently going through a 90-day study period to measure the success of this project.