HUDDLE: TRACKING DOCUMENTS
UX Research l UX Design l UI Design l 2018-2019
Huddle - a cloud collaboration SaaS product - empowers its clients and users by setting "actions" from the beginning of client engagement to the end of the project, at different levels. Due to the system's legacy, there are restrictions and inconsistent rules that make a product not user-friendly and cannot fulfil the initial goal.
Project goal
-
Increase client revenue and unblock the business opportunities
-
Improve user retention rate
-
Align the product vision, information architecture and backend tech improvement (microservice) at the same time
-
Increase user usage rate of a single document, and ease the pain of duplicated workflow
-
Create Beta to ensure that the function can support customer groups in different industries
My role
My job is to re-design the information architecture, fill the gap in the user flow and design the features based on previous usability testing.
As a designer, I try to answer two questions:
For the short term:
How can I transform current project management knowledge into a seamless digital process?
For the long term:
How can we improve the known collaborative and task management more sustainable for the future generation? Especially when we consider that: money and productivity will not be the only goal and motivation.
I don't have an answer for the second question yet, but I want to move the company vision closer to the solution by solving the first question.
Research + Design Process
Rapid prototyping testing
I spent time on both remote and face-to-face clickable prototype testing, following with open questions to understand the way to align software processes and clients' business processes.
Information architecture
By using the insights of industry wording, the team re-structured the proposed task and approval functions across workspace, folder and file.
Each level has its unique process to fulfil the lifecycle, but function and logic need to be reusable across the entire product.
Design system
A new project defaults as part of the design system upgrade. I design a new system by atomic design approach for entire relevant features. UI needs to find a balance between 3 versions (10 years of history), while the logic and function can only deliver project by project.
RESEARCH
Tools
-
Marvel for clickable prototyping
-
Silverback for recording screens
-
GoToMeeting for remote testing
-
Amplitude for gathering data
FINDINGS FROM PROTOTYPE TESTING AND END USER INTERVIEW
The wording and feature naming are misleading.
The first thing I realised was: we didn't agree on the meaning and expectation of "Task" internally and externally. Users have different expectations by merely reading the label, and it takes a learning curve to educate the users. So we interview the users and ask what will they expect to see when reading some vocabulary.
Hofstede’s Culture Dimensions Theory
Users' behaviour and mindset toward tracking their day-to-day jobs are varied. However, there's a pattern due to personality and culture. I studied Hofstede's Culture Dimensions Theory and realise that behaviour can associate with "Uncertainty avoidance" and "Indulgence vs restraint".Since Huddle has worldwide users, we needed to design the same functions in multiple levels of setting or view.
Competitor analyst
Users consider using Monday, Jira, Google keeps, and email to replace Huddle's current task function. Interestingly, the above products all have different goals and use cases.
It led to the fact that Huddle's task function was not clear on purpose, and currently didn't fulfil a need.
Inconsistent business logic on notification and alert
The user relied on the notification for overdue tasks. However, we received feedback that the logic of setting time and expecting notification is different between file request, task and approval features.
"'Job' sounds like things I need to do in the work, but not necessarily have a deadline. 'Action' sounds like things I need to do after a meeting."
End user, Project Director
Concept iteration based on user's end to end flow
DESIGN
Tools
-
Sketch for UX, UI design and accessibility testing
-
Zero Hight for components library and style guide
-
Marvel for prototype and handoff to the front-end team
-
Storybook for aligning design system with front end team
Moving design system forward alone the project
There are at least three different design systems and legacies at Huddle during that time.
Ideally, all action-related pages need to upgrade to the new design system. The reality is, some projects need to wait until the Front end team has the capability and move the code to the new framework, other projects had a dependency on the backend to make flow and notification possible.
For those reasons, I designed multiple generations of design systems just for this function. Starting with the final goal and cutting back each generation to align with the product roadmap. The UI can be updated, but behaviour and interaction might need to wait.
UI Design and Design System
Card sorting workshop for buttons
There was limited space to add buttons on the side panel, but at the same time, side panel buttons are one of the highest used functions.
To understand the priority of all buttons but make sure it's consistent across different pages and layouts, I ran a workshop and asked scenario-based questions, later choosing to display the highest scored buttons. The rest hid behind the more button, same as the pattern of the file side panel.
Creating alignment
-
The wording in the system needs to match the user's mindset and expectations.
-
Setting less business restrictions but the logic and UI components are consistent across file requests, tasks, and approval.
Related projects:
Multiple task version for best suiting all pattern
Tasks and actions components need to fit in both full-width list view (Action list), 2/3 card (Workspace overview) and side panel (File and folder view).
Create and assign a task
Complete a task which is assigned to me
The overall challenges
-
To let the company buy in the U-turn, I relied on my manager and Senior Product Manager to present the idea to the board. Meanwhile, I still need to design multiple versions with different scopes to support the project priority decision, which cost a lot of effort. However, it is still one of the most exciting projects I've ever worked on.
-
Same as the business decision, the design phase is sequential and depended on other tech projects. We spent a lot of time re-scope design flow and function so design changes and tech changes can release at the same time.
My learning
Due to the difficulty of recruiting B2B clients' end-users, this project also leads me to improve the ResearchOps process. Together with the Growth team, I built the early access programme by inviting selected clients and users to test the design concept and beta features. It also opens up business opportunities by showing transparency and involving large clients in the product evolving process.