ONO Case Study
ONO, from Hello xLab, is an online platform that uses machine learning to match needs instantly and accurately with capabilities and resources worldwide, allowing users to propose projects or opportunities, create a remote ream, and have a single-channel collaboration and productivity tool accessible anytime, from anywhere.
As the capstone project for my Digital Product Design program at Sheridan College, my team of 4 was given the opportunity to work with Hello xLab as our industry partner. We were tasked with researching and developing a cohesive user experience for the project workspace to build upon ONO's established matchmaking platform.
My Role:
Facilitation, Research, Writing, UX Design, UI Design
Team:
Aliya Ghare
Taylor Umer
Monika Patel
Fan Wang
Tools:
Figma
Adobe Illustrator
Whimsical
Mural
Notion
The Problem:
Remote collaboration is an immutable reality of contemporary work culture. However, remote work and the tools used to facilitate it can raise several issues and make online co-working difficult. When teams are not working in a common physical location, it becomes harder to sustain accountability and transparency. Project management becomes difficult as tracking tasks and seeing team progress becomes harder to assess. Remote work also inhibits communication and collaboration as teammates are less available to each other online, thus deterring the level of trust and understanding required to achieve common goals. Cumulatively, these issues can result in less commitment from team members, apathy towards projects goals, and an overall lower quality of work.
Design Challenge
How might we improve communication and collaboration between team members and facilitate effective project management?
The Solution:
To facilitate a positive remote collaboration experience, ONO’s productivity tool mitigates the difficulties of online co-working by bringing colleagues together to work as a unified team. The app provides an accessible way to stay in contact with team members via instant messaging, and an activity centre dedicated to building interpersonal relationships through fun conversation and picture sharing. The platform facilitates project management by helping users keep track of project, team, and individual tasks and progress. The application also ensures that collaborators can hold their teammates accountable by providing infographics on individual progress and productivity stats, and featuring a evaluation tool wherein users can anonymously assess their teammates’ performances at the end of a project, thus affecting their ability to get further projects on the ONO platform. Ultimately, combining all these features into one tool allows users to succeed in their goal of working remotely with others while still maintaining the feel of working in a physical office.
The Process
The process of building ONO’s collaboration tool was based on the Double Diamond framework and Design Thinking methodology. The Double Diamond framework allowed my team and I to structure our project from end to end in clearly defined stages while still allowing us flexibility in its application. Design Thinking helped us find the right problems to solve regardless of their complexity or lack of clear solutions by centring empathy for our end users’ needs and wants. While being iterative it allowed us to arrive at human-centred solutions.
Understanding the User
My team decided to focus on recruiting individuals with experience working remotely in Canada and drafted a research plan with the goals of identifying the problems people face when working remotely and what constitutes successful online working and project management. We conducted seven 30-minutes in-depth interviews and 18 surveys with our stakeholders—remote workers. We asked approximately 18 questions to help us understand our users’ needs and pain points and identify a direction for our digital solution.
Both interviews and survey answers provided us with a plethora of information that we clustered and organized through affinity mapping to identify patterns and recurring themes. Key themes that emerged were: communication, setting expectations, networking, disengagement, accountability, problematic teammates, availability, workflow. We used these themes and clusters to draw insights and write user needs statements. Ultimately, we derived three core insights that informed the foundation of our final product:
A considerable amount of the human connection is lost in remote collaboration. This is an issue because effective communication facilitates trust among team members.
Accountability issues impede project progress and team collaboration. People want transparency and accountability to be a core aspect of the virtual workspace.
Project management in online workspaces is less effective when a team is not aligned with goals and expectations.
User Personas and Journey Maps:
My team and I developed user personas and their corresponding journey maps that reflected the pain points, needs, and goals of our research participants who have worked in remote teams. The personas—one a project leader and the other someone hired for their skills and resources—helped us envision the users we were designing for and build empathy for them. Journey mapping helped visualize the processes these users would go through to accomplish a goal and thus helped identify pain points and innovation opportunities to ease them.
Ideation:
Building on our core insights, personas, and journey maps, my team and I brainstormed several ideas and concepts that could tackle our users’ needs and pain points while still meeting the challenge set to us by ONO. Ideas such as virtual coffee and lunch breaks, scheduling tools, a clocking in tool, and in-app support for other productivity and communications platforms were all considered. Using Crazy 8s to further explore these ideas and the MoSCow Method to delineate their importance, we concluded that a productivity platform with an activity centre, instant messaging, task and team progress tracking, and team evaluation capabilities would provide the perfect combination of tools that encouraged team building and communication as well as project management and individual accountability.
User Flow
After establishing our focus areas and the components we would be building, we began to map out the information architecture of our prototype to determine the flow of screens and features. We revisited the user flow several times throughout the design process and updated it along the way to accurately reflect our final product.
Medium-Fidelity Wireframes
From ideation and user flows, we moved into creating low and medium-fidelity wireframes. Low-fidelity wireframing helped us determine the basic composition and components of our interface, as well as map out the overall “blueprint” of our app. In medium-fidelity wireframing, we began to iterate on and refine our screens and components.
Crazy 8s
MoSCow Method
User Testing
User testing was conducted in two rounds on usertesting.com with pre-defined goals for each set. In the first round, we wanted to validate whether our digital product fulfilled its intended purposes, flowed in a logical way, and was easy to use. After revisions, the second round of testing was to confirm that we had successfully addressed user feedback and to rout out any further issues with the app. For both rounds of testing, we drafted testing plans using the DECIDE framework and wrote test scripts and post-test questionnaires for testers. After each session, we sorted feedback into an Importance/Difficulty Matrix to determine which changes we could feasibly make to our prototype, ultimately deciding to make changes that required low effort but had high impact.
Overall, both rounds of testing garnered largely positive feedback regarding the platform’s value and functionality for remote work, its ease-of-use, and overall design, with minor constructive criticism around certain design element and interactions.
Round 1
Round 2
Design Library
First Round:
Feedback:
Inconsistent font sizing leads to a lack of hierarchy and makes text difficult to read
Scroll bars not working
Lack of consistency and logic in colour usage. Palette should reflect existing mental models like red means overdue, green means complete, etc.
Dashboard widgets are all the same width, thus lack hierarchy
Lack of personalization and modularity for dashboard widgets
Activity section is only accessible through the dashboard and not elsewhere
No crop option when uploading images to Activities centre
No usernames in the Activity section, only profile pictures
ONO Asks prompt responses appear at bottom of chat log rather than the top which is confusing
Inability to message team members directly when looking at a selected task
Revisions:
Font sizing made consistent and reflects hierarchy and importance of text
Scroll bars fixed
Colours usage is made consistent and logical across the platform. For example, green means complete and active, red means overdue and offline, etc.
Dashboard widgets follow a “wide, slim, slim” composition based on importance
Activity section is made accessible through the top navigation bar
Usernames added to the Activity section
ONO Asks prompt responses now appear at the top of the chat log
Users can now message team members when looking at a selected task
Second Round:
Feedback:
Users want integration of other tools like Jira and Slack
Activities button is small
Messaging should be available when on other screens and sections
Evaluations should be anonymous to encourage users to do them
During evaluations, users thought the numbers above the questions were actionable and led to the next question
Revisions:
Activities button made larger and more prominent in navigation and dashboard
Evaluations made anonymous, indicated with a message at the start
In evaluations, lines added in between numbers to indicate that it’s a progress visualization and not buttons.
The Final Product
Dashboard
The dashboard showcases various feature remote workers can use to work collaboratively with their team. These features include: Meetings, Calendar, Messages, Projects, Team, Whiteboard, and Activities.
Messaging
Users can communicate with colleagues and entire teams seamlessly, with the added ability to use audio and video, send files, and pin important messages.
Activities
Team members can gather at the “virtual water cooler” to engage in the day’s topics, share tidbits, and get to know one another.
Project Management
Users can manage and keep track of project tasks, view task details, and view team and individual progress.
Team Profiles
Users can view the profiles of other team members and see their bios, schedules, tasks, and productivity stats.
Team Evaluation
Users can evaluate team members after project completion, affecting their ability to further get projects on the ONO platform
Learnings
With approximately 3 months to develop this project, I was able to explore and hone my UX research, writing, and design skills, and became more familiar with the design cycle of a digital product from start to finish. This included speaking to users, understanding their needs, designing a solution that addresses those needs, testing the product, and iterating on it. Adjacent to this was learning how to work effectively within a team. Working with multiple people on a project while trying to balance conflicting schedules, tasks, and various skills was a challenge, however, my team and I invested time in developing processes, schedules, and clear goals to ensure we were meeting our project milestones and staying on task. Effective communication and teamwork also meant that, despite being a team of 4 with our own distinct ideas, we were able to establish a common vision early on and prevent scope creep with unnecessary and uncontrolled changes or add-ons to the product.
Overall, the entire project experience was insightful, stressful, fun, and exciting and I am proud of everything my team and I were able to accomplish.
Next Steps
During our research phase, my team and I were only able to recruit participants who were skilled workers rather than project leaders. While we designed our platform with tools helpful for a leader, with more time and resources for this project I would like to better understand their perspective, conduct more research, and iterate on the app with their specific needs in mind. For example, what does the platform look and function like for the project lead? What tools could we provide them to better manage their team and project?
I would also like to revisit the “Activity” section of the app and see what more can be added to encourage team bonding. While the current components are a good start and reflect the early ethos of Facebook and Instagram, there is room for improvement. Perhaps team games or a rewards program could further promote and incentivise communication.
Additionally, if I were to come back to this project later, I’d like to build more of the features alluded to in our current prototype—including fleshing out the “Projects” section and developing the meeting, calendar, and whiteboard features.
Try the prototype here or below!