The ONO platform from Hello xLab allows users to propose projects or opportunities, create a remote workspace, and have a single-channel collaboration and productivity tool available anytime, anywhere. ONO uses machine learning to match needs instantly and accurately with capabilities and resources worldwide.
Our team of four from Sheridan College's Digital Product Design course had the opportunity to work with Hello xLab as our industry partner on the program's capstone project. For the project workspace, our task was researching and creating a cohesive user experience that would expand on ONO's already-established matchmaking platform.
"How might we improve communication and collaboration between team members and facilitate effective project management?"
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.
As a result of our research with participants who had worked in remote teams, we created user personas and the journey maps that went along with them.
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.
We used Crazy 8 to explore these ideas further and the Moscow Method to outline their importance.
We concluded that a productivity platform with an activity center, 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.
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.
We moved into creating low- and medium-fidelity wireframes from ideation and user flow. Low-fidelity wireframing helped us determine the elemental composition and components of our interface, as well as map out the overall "blueprint" of our app. We began to iterate on and refine our screens and components in medium-fidelity wireframing.
User testing was conducted in two rounds on usertesting.com with pre-defined goals for each set. 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.
.png)
We moved into creating low- and medium-fidelity wireframes from ideation and user flow. Low-fidelity wireframing helped us determine the elemental composition and components of our interface, as well as map out the overall "blueprint" of our app. We began to iterate on and refine our screens and components in medium-fidelity wireframing.
The dashboard showcases various features remote workers can use to work collaboratively with their teams. These features include Meetings, Calendars, Messages, Projects, Teams, whiteboards, and Activities.
The dashboard showcases various features remote workers can use to work collaboratively with their teams. These features include Meetings, Calendars, Messages, Projects, Teams, whiteboards, and 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.
Users can manage and keep track of project tasks, view task details, and view team and individual progress.
Team members can gather at the "virtual water cooler" to engage in the day's topics, share tidbits, and get to know one another.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla,
People need to pay their bills or track how much they spend quickly and sometimes on the go since it is all moving fast nowadays. When the flow and hierarchy of features do not satisfy user needs and expectations, users are still puzzled when using the app.
As a user of the CIBC mobile app, I want a better experience paying and tracking my bills so that I can do the tasks effortlessly and promptly.
Through my research and design, I decided to simplify the user flow by removing contradictory information and prioritizing what would appear on the screen using information hierarchy concepts.
Deposit and Credit account card slider with horizontal scrolling and transaction history screens with vertical scrolling
Expense and income tracker and category-wise list of spending and interaction of graph with respect to month
Through secondary research regarding Health in Canada, we learned that 12.9% of Canadians report 2+ chronic diseases. We used Empathy Maps and Personas to identify some critical challenges for patients & caregivers.
Picking up prescriptions from their 'regular' pharmacy can take time, depending on how many people are in the queues.
Picking up a prescription from any other pharmacy can be 'arduous' as many documents, insurance & IDs need to be shared.
There was no central way to manage and track medications over some time. Or a way to keep track of when refills are due.
We devised solutions for these problems through a digital service 'MedWell' through a design sprint. MedWell is a mobile app designed to improve medication management for patients & caregivers via three key offerings :
To reduce processing time, we devised a simple 5-step approach for scheduling pick-ups.
A one-time on-boarding process to collect personal details, insurance & IDs allows users to pick up medicines from any pharmacy.
A complete view of all currently taking medications, with options to schedule reminders.
We used the design sprint, a time-based iterative process using a six-step approach, to design solutions to the problem. Outlining the step-by-step method to arrive at our solution
In the first phase, we explored problems in the healthcare industry and created a shared knowledge base across our team. Using a team mural board, we articulate the problem from the users and business perspectives.
We shared ideas about challenges in the healthcare industry based on secondary research & experiences.
We chose to explore the issue of managing healthcare & medication by talking to patients & pharmacists.
We created Personas and Empathy maps to understand the user's needs better, challenges & motivations.
Once we understood our users & their challenges in medicine management, we worked on defining the fundamental problems we would solve through this sprint. We identified three main issues we worked on solving in our MVP.
This process of picking up prescription medicines and refills involves driving to a preset pharmacy and standing in queues.
Users find barriers to picking up medicines from different pharmacies due to the arduousness of sharing health cards, insurance and all documents.
Due to busy schedules and many responsibilities, users sometimes forget to take the medicines or give them to the patient they are caring for.
“As a working mom of a child who has diabetes, I want to check availability and schedule pick-ups for my child's medication online, so I can quickly pick them up from the pharmacy.”
“As a working mom of a child who has diabetes, I want to check availability and schedule pick-ups for my child's medication online, so I can quickly pick them up from the pharmacy.”
In this phase, we generated and shared a range of ideas with the help of sketching. We looked at inspiration, such as similar features for other industries. Finally, we discussed merits and demerits, and each team member chose directions to explore further.
We looked for inspiration from similar features in other products and shared ideas via a mood board. We discussed these before sketching.
Each team member sketched out screens to visualize our solution as a product design and went on to discuss ideas and vote for key concepts.
We discussed the most voted ideas and elements we would like to explore further in the next stage.
We generated a lot of ideas in the Ideate stage, but it was essential to focus on some key features in our MVP. In this stage, we finalized the main idea and features we would be prototyping in the next step. In this stage, we completed the Information Architecture & User Flow.
We finalized the overall Information Architecture of the app by narrowing down features: Schedule picks up, Set reminders, dashboard & profile for adding personal details.
In this stage, we finalized the user flow for the app with a focus on the Scheduling feature. We identified the steps in the process that we would prototype.
We reviewed sketches and finalized the layout and information for each screen, along with inputs and call to action for each step in the process.
We only focused on the scheduling process in this project using a design sprint method.
In the Prototype phase, we worked together to create a prototype of our concepts based on decisions from the previous stage. As our mid-fi MVP, we created a mid-fidelity prototype with crucial functionality and working interactions.
In this stage, we created the main components for the mid-fidelity wire-frames, such as the bottom navigation bar, including four key pages.
After several iterations, we designed the screens for the entire scheduling flow and finalized layouts, design and content structure, such as input fields.
We incorporated the feature to Set Reminders as a separate feature accessible in the main navigation while providing an additional choice to set reminders post-scheduling.
We conducted usability testing using usertesting.com to validate our mid-fidelity prototype. We used this opportunity to get feedback from users to observe how they interact with the product & identify challenges they might face.
We conducted usability tests on usertesting.com. We created a test plan, including test scripts, to observe how users interact with the mid-fidelity prototype for scheduling pick-ups.
After testing, we noted user findings and assessments based on how they interacted with the app. Together our team interpreted the results & core insights.
Based on core insights, we decided on changes in wire-frames and well-executed visual design elements to refine and create a high-fidelity prototype.
For this test, imagine you are Mr. Robert Mathew, diagnosed with heart disease. Your doctor has provided you with a prescription you want to pick up from a pharmacy. You have a busy day and want to schedule the pick-up before visiting the pharmacy to save time. You'll be reviewing an early prototype for an app to schedule the pick up of prescription medicine from your choice of pharmacy.
The calendar view did not indicate what month it was, which confused the test taker. So, we added the month's name to the top right of the calendar.
Adding an additional path to schedule pick up for medicine via banners from the dashboard.
Removed 'Number of pills' from the 'Confirm Details' page because the users didn't know what it meant and replaced that with 'Before Meal/After Meal' information.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla,
