Haewon Song

HCL Verse Contacts

HCL Verse is an enterprise email and calendar solution designed to help teams collaborate seamlessly, manage tasks efficiently, and stay organized across devices. However, it lacked a native Contacts feature.

This project involved designing the first-ever native Contacts app for Verse, transforming HCL's legacy contacts solutions into a modern, seamless, and integrated experience.

My Role

Lead Designer

Team

1 Lead Designer(Me), 7 Developers, and 1 Product Manager

Year

2022

Duration

6 months

Problem Statement

HCL aimed to replace its legacy mail, calendar, and contacts solutions (iNotes and Domino Notes) with Verse. However, the lack of a native Contacts feature in Verse created a significant gap, making it challenging for users to manage their professional relationships and fully transition into the new platform. Instead, users had to rely on legacy apps, disrupting workflows and causing friction in the overall user experience.

To bridge this gap and enable a seamless migration to the HCL Verse ecosystem, we initiated the development of a new Contacts app.

Problem Statement

To bridge this gap and enable a seamless migration to the HCL Verse ecosystem, we initiated the development of a new Contacts app.

iNotes Contacts and Contact form

Domino Notes Contacts and Contact form

Outcome

The HCL Verse Contacts app was a success. It enhanced functionality and encouraged users to migrate fully into the Verse ecosystem. The new native Contacts app seamlessly integrates with existing Verse mail and calendar.

By leveraging existing APIs from the legacy products, the solution minimized development time while delivering an intuitive user experience and secure data integrity. Post-launch, customer feedback indicated a 25% increase in user satisfaction.

Outcome

Landing Page

Features a 'Sort By' dropdown menu and a search bar, enabling users to quickly find contacts.
Displays both individual and group contacts in a unified list.

Create/Edit Contact vs View Contact forms

Contact forms open in a modal overlay, enabling users to stay focused on their tasks and complete them without distractions. To enhance clarity and prevent accidental edits, I implemented two distinct variants of the text field component: one for view mode and another for edit mode

Group Contacts

Users can also create and manage group contacts to handle multiple individuals simultaneously.

Integration

Allows users to send a email or schedule a meeting directly from the Contacts app with one click.

Notification, confirmation and edge-case handling

Notifications and confirmations take over the modal form to capture the user's attention and ensure critical actions are acknowledged without interruption.

Keyboard accessibility specs (7 written specifications)

Beyond visual color contrast, detailed keyboard navigation specifications ensure inclusivity for users with motor impairments.

Mobile PWA

Designed a responsive interface for seamless use on mobile and tablet browsers, extending accessibility to a wider range of devices.

Process

Competitive Analysis and Benchmark

I conducted a heuristic analysis of Microsoft Outlook and Google Workspace to examine how they integrated contacts with mail and calendar. This analysis helped identify familiar conventions for our target audience and areas to differentiate our solution.

Microsoft
Strength: Advanced features like Contact Lists and Group Contacts. The use of modals for creating/editing contacts enhances focus.
Weakness: The interface can be overwhelming, especially for users who don’t utilize advanced features. Keyboard navigation is unintuitive, disrupting accessibility.

Google
Strength: Clean, intuitive interface with commonly used features. Seamless integration with mobile OS enhances workflow by syncing contacts across platforms.
Weakness:While functional, it lacks advanced features. Inconsistent use of modals creates a disjointed user experience.

Microsoft
Strength: Advanced features like Contact Lists and Group Contacts. The use of modals for creating/editing contacts enhances focus.
Weakness: The interface can be overwhelming, especially for users who don’t utilize advanced features. Keyboard navigation is unintuitive, disrupting accessibility.

Google
Strength: Clean, intuitive interface with commonly used features. Seamless integration with mobile OS enhances workflow by syncing contacts across platforms.
Weakness:While functional, it lacks advanced features. Inconsistent use of modals creates a disjointed user experience.

Competitive Analysis and Benchmark

Microsoft
Strength: Advanced features like Contact Lists and Group Contacts. The use of modals for creating/editing contacts enhances focus.
Weakness: The interface can be overwhelming, especially for users who don’t utilize advanced features. Keyboard navigation is unintuitive, disrupting accessibility.

Google
Strength: Clean, intuitive interface with commonly used features. Seamless integration with mobile OS enhances workflow by syncing contacts across platforms.
Weakness:While functional, it lacks advanced features. Inconsistent use of modals creates a disjointed user experience.

Initial User Flow

I worked with the product manager to define the MVP (Minimum Viable Product) use cases and kick off the design process. Customer feedback from surveys and the Aha idea portal guided our decisions.

Initial User Flow

I worked with the product manager to define the MVP (Minimum Viable Product) use cases and kick off the design process. Customer feedback from surveys and the Aha idea portal guided our decisions.

Prototype and Usability Testing

I created a clickable prototype and conducted usability testing with five external customers who used Verse daily. The testing included task-based interviews where users performed actions like creating a contact or sending an email.

User 1 : Marketing associate working with international clients; prioritizes accurate contact information.
User 2 : Director with 10+ years using HCL Notes, recently transitioned to Verse.
User 3 : Startup founder managing 10+ employees.
User 4 :Product manager at a Japanese firm, values hierarchical and title-specific contact data.
User 5 : Design operations lead managing multiple meetings and discussions.

Prototype and Usability Testing

User 1 : Marketing associate working with international clients; prioritizes accurate contact information.
User 2 : Director with 10+ years using HCL Notes, recently transitioned to Verse.
User 3 : Startup founder managing 10+ employees.
User 4 :Product manager at a Japanese firm, values hierarchical and title-specific contact data.
User 5 : Design operations lead managing multiple meetings and discussions.

Key Feedback and Adjustments

Corporate Directory (Landing page) and Personal Contacts pages with 'Suggested' feature

Contact Form with Event, File, and Task Management Integration

Modifications

Based on user feedback and technical feasibility, we refined the MVP use cases and user flows.

Eliminated Corporate Directory.
Added 'Add sender to contacts' feature allowing the user to save sender's contact information from emails or calendar invite.
Removed 'Suggested Contacts' feature due to concern over spam mail sender.

Implemented Design

Reflection

This project was my first end-to-end design initiative, offering valuable insights and growth opportunities.

Communication - Enhanced cross-functional communication with product management and development teams. This ensured prioritization of tasks to meet release schedules effectively.
Technical Insights - Gained technical knowledge about web development practices, such as grid and stack systems, which helped in delivering clear design specifications for developers.
Web Accessibility - Deepened my understanding of accessibility principles, ensuring an inclusive design approach.
Design System - Recognized the importance of leveraging a design system. Implementing components into the Contacts app reinforced consistency and efficiency across design and development.

This project was my first end-to-end design initiative, offering valuable insights and growth opportunities.

Communication - Enhanced cross-functional communication with product management and development teams. This ensured prioritization of tasks to meet release schedules effectively.
Technical Insights - Gained technical knowledge about web development practices, such as grid and stack systems, which helped in delivering clear design specifications for developers.
Web Accessibility - Deepened my understanding of accessibility principles, ensuring an inclusive design approach.
Design System - Recognized the importance of leveraging a design system. Implementing components into the Contacts app reinforced consistency and efficiency across design and development.

Reflection

This project was my first end-to-end design initiative, offering valuable insights and growth opportunities.

Communication - Enhanced cross-functional communication with product management and development teams. This ensured prioritization of tasks to meet release schedules effectively.
Technical Insights - Gained technical knowledge about web development practices, such as grid and stack systems, which helped in delivering clear design specifications for developers.
Web Accessibility - Deepened my understanding of accessibility principles, ensuring an inclusive design approach.
Design System - Recognized the importance of leveraging a design system. Implementing components into the Contacts app reinforced consistency and efficiency across design and development.

Go Back To Top