HCL Verse Contacts
Team of
Lead Designer
Developers
Product Manager
My Role
Lead Designer
UX Researcher
Skills
Competitive Analysis
Usability Testing
Prototype
Web accessibility
Background |
Before introduction of Verse Contacts,
Customers had to switch to HCL Notes or iNotes to store and manage contact information.
Below are screenshots of their Contacts UI, which appears outdated and cluttered, with many unused input fields and features inherited from the 1980s Lotus Notes.
Since our team planned to re-use existing API with introducing few additional features, I conducted deep investigations of existing apps and had conversation with the internal employees who actively uses those Contacts app whiling using Verse for mail and calendar tasks.
Interface of iNotes Contacts List and New contact form
Interface of Domino Notes Contacts List and New contact form
Research |
Competitive Analysis
After the investigation of Notes and iNotes Contacts app, I conducted a competitive analysis of Microsoft Outlook and Google Workspace, since they both integrated Contacts with existing Mail and Calendar. This analysis focused on their user experience, workflows, and feature sets.
Microsoft Outlook
Strengths
Outlook Contacts seamlessly integrates with the Outlook Mail and Calendar. Also Compatible with MS 360 platform apps such as Teams and Planner.
Provides advanced features like Contact List and Group Contacts.
Outlook uses modal for new / edit form of Contacts which help the user to focus on the task and information.
Weaknesses
The interface of Outlook may overwhelming for some users especially those who doesn’t use much of advanced features.
The keyboard navigation is not intuitive when the user is moving from the action bar to list of contacts which interrupt keyboard users.
Google Contacts
Strengths
Simplicity and ease of use. Google Contacts has clean and intuitive interface that the user can easily find commonly used features.
Google’s seamless Integration with Mobile device provides convenient user workflow to access the contacts saved in mobile device.
Weaknesses
While Google Contacts offers essential contact management features, it lacks some of advanced features.
Inconsistent use of modal. Google is using modal for creating Multiple Contacts while creating individual contacts is happening on the same page.
Design proposal |
Initial user flow and design proposal
I created the user flow chart explaining pages and actions available to the users to prepare a design proposal. Then presented the initial design to the developers and product manager show casing the new features that can improve user experience of Verse Contacts.
Chart for user workflow and actions / features that the user can take
Example screens for initial design proposal
[Some initial ideas I proposed]
Corporate Directory: a place where the user can search and find internal corporate contacts.
Personal Contacts: a place where the user can manage their saved contacts.
Suggested Contacts: a section that shows people with whom the user has recently interacted.
Create/Edit Contact form: allows the user to add or edit contact details.
Design feedback from the stakeholders
Below are some initial designs, including call outs of an element that I got some feedback on.
Collapsible Navigation Bar: An early design I included a collapsible navigation bar, but user testing showed that having multiple pages for contacts led to unnecessary clicks.
The Corporate Directory was deemed unnecessary, so I eliminated the horizontal nav bar.
Suggested Contacts: This feature, based on email interaction data, was removed due to challenges in filtering spam and technical complexity.
Alphabet Bar Sorting: Initially proposed when only display name sorting was feasible.
This was later replaced with a "Sort by" dropdown when developers could implement sorting by email and company name.
Contact Display Style: Mixed feedback was received regarding card versus list style. I opted for a list, as it offered better readability and accommodated more contacts per page.
Files Tab:In the earlier design, I proposed a tab that shows the list of files that the user has shared with the contact, but removed due to complexity.
Integration with Mail and Calendar:
I proposed a integration with Mail and Calendar within the Contact, showing the email and event with the contact.
Initially, additional features in contact form were considered, but these were omitted from the MVP due to code complexity and tight release timelines.
After the discussion with Devs, I came up with a design of the Contact form and view without any additional features. However this approach unnecessarily taking up the space on the page, and concern the user get lost context in multi-tasking scenario.
Interviews and feedback |
User Interviews
Then I conducted usability testings and interviews with 4 external customers who is using HCL Verse.
I wrote a script describing a given scenario, displayed static screens to the interviewees and asked them to take certain actions or find features.
Meanwhile, I asked them question about their expectations what will happen next and explained what would actually happen and get their feedback.
User 1
He works for international clients.
-He liked overall design of the interface and thinks it is consistent with existing Verse.
-Wants ability to export contact in CSV or vCard file.
-Wants ability to mark favorite contacts and sort contacts by the locations.
-Wants to have a quick way to save a contact from the mail.
-Wants ability to forward the contact in email.
User 2
10+ years experience
using Notes Contacts.
-Like the feature to send an email and meeting invitation to a contact by one click.
-Prefers search a person than scroll through the list.
-Prefers to have personal contacts as landing page.
-Doesn't like the concept of 'Suggested people' because he worries about spam mail senders be in the list.
User 3
Operates start-up company
with 10+ employees.
-Thinks it is unnecessary to have Corporate Directory for size of her company.
-Suggests category feature.
-Wonder if there could be integration with Calendar. For example, she saved person's birthday info in Contacts and able to see on her calendar.
User 4
Works at the Japanese company.
Only used HCL Verse.
-Suggests to show corporate hierarchy information. (ex:person's department, co-workers, and boss).
-Suggests to have other search criteria. (Not just name and email address)
-Would like to see availability icon for internal contacts.
-Really liked group contact and ability to compose a mail to multiple people in one-click.
Adjustment |
Minimum Viable Product
After the user interview and iterations on design, I had extensive discussions with PM and Devs to share user feedback and assess technical feasibility for the features. After conducting thorough investigations and considering our release schedule, we made a strategic decision to prioritize essential features for the initial MVP(Minimum Viable Product) release. This approach allows us to efficiently address core user needs and pave the way for future enhancements based on user feedback and evolving requirements.
Modified MVP flow chart based on the feedback
Outcomes |
Contacts landing page
We Decided to support only the Personal Contacts for MVP.
The landing page includes a "New Contact" button and a search bar for finding contacts by name or email.
"Sort by" feature also allow users to easily arrange contacts based on category.
Form and View
User can create or edit a contact by clicking the button or click on a contact in the list. The form opens on a modal on top of the page.
Modal allows the user to focus on the task and quickly get in and out of the form and get back to the work they were doing.
Notifications and confirmations take over the modal form that the user is working on make it easier for the user to take action or go back to the working form.
Integration
Verse contacts provides various integrated features with mail and calendar apps efficient for the users' daily communication tasks.
Mobile PWA
Web Accessibility |
Keyboard Navigation
+5 written specification
Providing clear keyboard navigational is essential for users with motor impairments, so specification and documentations were delivered to developers to ensure effective keyboard accessibility.
Implementation |
Video of current implantation
Reflection |
What I learned from this project
Communication
I enhanced cross-functional communication skills through collaboration with Product Management and Development teams to set priorities effectively to ensure the best outcomes in promised release schedule.
Technical Insights
I learned valuable technical insights throughout this project including use of grid and stack, expanding my understanding of web development and able to deliver the design spec with more clarity for developers.
Web Accessibility
I Gained a deeper understanding of web accessibility principles and best practices, ensuring inclusivity in design.
Design System
I recognized the power of utilizing a design system, particularly through contributions to building a design system for HCL Digital Products. Successfully implemented the components into the user interface for the Contacts app, demonstrating its effectiveness in maintaining consistency and efficiency in design and development processes.