CIBC - App Redesign

Interaction Design
Client
Academic Project
Project type
Interaction Design
project year
2022

Project Overview

We were given a task to re-design any feature of our choice of an existing app. In this we have to submit problem, current app analysis and the new design including wireframe.

The primary goal of this redesign project is to help users with their online banking experience so that they can not only complete necessary activities but also find them enjoyable.

"How might we improve communication and collaboration between team members and facilitate effective project management?"

The Problem:

  • Online co-working can provide several challenges due to remote work and the tools needed to support it. It is more difficult to maintain accountability and transparency when teams do not share a physical workspace.
  • As teammates are less accessible online, remote work hinders communication and collaboration by lowering the trust issues and understanding needed to accomplish shared objectives.
  • Collectively, these problems may cause team members to be less dedicated, less interested in the project's objectives, and produce work of a poorer calibre.

The Solution:

  • By bringing coworkers together to work as a cohesive team, ONO's productivity tool minimizes the challenges of online collaboration and promotes a positive distance collaborative experience.
  • The platform facilitates project management by assisting users in keeping track of the project, team, and individual duties and progress. The application also makes sure that collaborators can hold their teammates accountable by offering info-graphics of productivity stats and an evaluation tool that allows users to rate their teammates' performance confidentially after a completion of project.
  • In the end, by merging all these characteristics into a single platform, users can achieve their aim of collaborating remotely with others while retaining the atmosphere of a virtual office.

Primary and secondary research

Understanding users

  • We decided to focus on recruiting individuals with experience working remotely in Canada and drafted a research plan to identify the problems people face when working remotely and what constitutes successful online working and project management. We conducted seven 30-minute in-depth interviews and 18 surveys with our stakeholders—remote workers 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 emerged: communication, setting expectations, networking, disengagement, accountability, problematic teammates, availability, and workflow. We used these themes and clusters to draw insights and write user needs statements.

We came up with three core insights that formed the foundation for our final product:

01

A considerable amount of the human connection is lost in remote collaboration. This is an issue because effective communication facilitates trust among team members.

02

Accountability issues impede project progress and team collaboration. People want transparency and accountability to  be a core aspect of the virtual workspace.

03

Project management in online workspaces is less effective when a team is not aligned with goals and expectations.

After generating insights

User Personas

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.

Brainstormed several ideas

Ideation

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.

How will it work?

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 Wire-frames

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

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.

Round 1
Round 2

Design Library

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 final product

Heading

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.

Heading

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.

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.

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.

Prototype

Let's work together

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Problem Statement

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.

User Story

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.

User needs and expectations

Analysis of a current app

Feature: Scrolling between accounts

  • 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.
  • To switch from a debit to a credit account, you must scroll through the current app, which can be confusing. In addition, an info-graphic can make tracking spending and incomes in an existing app with data easier to understand.

My proposed solution

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.

Updated use flow

Low Fidelity Wire-frames

Mid Fidelity Wire-frames

Final Design

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

Prototype

Click here to try the prototype

Problem

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.

Three key challenges

01

Time Consuming

Picking up prescriptions from their 'regular' pharmacy can take time, depending on how many people are in the queues.

02

No good options

Picking up a prescription from any other pharmacy can be 'arduous' as many documents, insurance & IDs need to be shared.

03

No Central management

There was no central way to manage and track medications over some time. Or a way to keep track of when refills are due.

Solution

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 :

Three key features

01

Schedule pick-ups online

To reduce processing time, we devised a simple 5-step approach for scheduling pick-ups.

02

One time on-boarding

A one-time on-boarding process to collect personal details, insurance & IDs allows users to pick up medicines from any pharmacy.

03

Central Dashboard

A complete view of all currently taking medications, with options to schedule reminders.

Our Process

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

01 Understand

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.

Brainstorming

We shared ideas about challenges in the healthcare industry based on secondary research & experiences.

Research

We chose to explore the issue of managing healthcare & medication by talking to patients & pharmacists.

Empathize

We created Personas and Empathy maps to understand the user's needs better, challenges & motivations.

User Personas

02 Define

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.

Time consuming errand

This process of picking up prescription medicines and refills involves driving to a preset pharmacy and standing in queues.

Pharmacy access

Users find barriers to picking up medicines from different pharmacies due to the arduousness of sharing health cards, insurance and all documents.

Taking the medicines

Due to busy schedules and many responsibilities, users sometimes forget to take the medicines or give them to the patient they are caring for.

User Personas

  • 5 W’s method helped us derive user stories for both personas.

Caregiver

“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.”

Caregiver

“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.”

03 Diverge

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.

Inspirations

We looked for inspiration from similar features in other products and shared ideas via a mood board. We discussed these before sketching.

Low fidelity sketches

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.

Further explorations

We discussed the most voted ideas and elements we would like to explore further in the next stage.

04 Decide

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.

Information Architecture

We finalized the overall Information Architecture of the app by narrowing down features: Schedule picks up, Set reminders, dashboard & profile for adding personal details.

User Flow

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.

Finalizing Screens

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.

Information Architecture

We only focused on the scheduling process in this project using a design sprint method.

05 Prototype

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.

Main Navigation

In this stage, we created the main components for the mid-fidelity wire-frames, such as the bottom navigation bar, including four key pages.

Schedule Flow

After several iterations, we designed the screens for the entire scheduling flow and finalized layouts, design and content structure, such as input fields.

Set Reminders

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.

Mid-fi Wire-frames

  • We moved forward with mid-fidelity scheduling flow sketches during the testing phase. The scheduling flow with the possibility to add reminders was the prominent feature.
  • Key ideas include 5 step scheduling process starting from : Select patient -> Add prescription -> Confirm details -> Choose Pharmacy -> Choose Date & Time.
  • The main idea was to allow users to pre-schedule their medicine pick-ups and also give them the option to set reminders to take medicines on time daily.

06 Validate

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.

Conducting Testing

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.

Analyzing Test Results

After testing, we noted user findings and assessments based on how they interacted with the app. Together our team interpreted the results & core insights.

Refining Prototype

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.

Scenario for test

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 list of medications was confusing for test takers.
  • The calendar view did not indicate what month it is, so that complicated the test taker to avail the feature.
  • The test takers' first instincts were to look for a way to schedule the test directly from the banners on the main dashboard.
  • The test takers' first instincts were to look for a way to schedule the test directly from the banners on the main dashboard.

Revised wire-frames

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.

Let's work together

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.