top of page
iPad_iPhone.png

Recovering
in Place

Website

 

 

ROLE

TYPE & TIMELINE

 

 

 

UI & Visual Design

Branding

Logo Design

Web Design

4 months

 

 

TOOLS USED

TEAM

 

 

Blue Yolk (website building platform)

Roni Sherby


PROJECT MANAGER APP | UI/UX DESIGN
 

PROJECT OVERVIEW

Recovering in Place website showcases the research of Dr. Victoria Burns. 

Dr. Victoria Burns, an Associate Professor at the University of Calgary, wanted a website that showcases her life's work. She wanted a website that reflects her research, publications, and contributions. Recovering in Place 

HOW WE GOT STARTED
 

I met with the client and gained clarity on the business model, goals, and user base, and we discussed the scope of the project. INOVA wanted to replace their outdated client portal, improve existing infrastructure, and create a much more user-friendly website for their clients. Some of the questions that came up:
 

  • What are the problems INOVA's clients are currently facing when using the existing portal?

  • How can we make users' experience smoother and easier?

  • What infrastructure on the website is helpful to users, and what needs to change?

DELIVERY & SCOPE

Redesigning INOVA's client portal involved four stages:

  1. Discovery – Establish client goals 

  2. Exploration – Brainstorm, finding what works 

  3. Implementation – Ideas come to life 

  4. Delivery – Deadlines met, objectives met 

Implementation of the new client portal involved two aspects - the first is building a new front-end user interface, and the second, implementing the new UI into a back-end CMS (content management system).

Front-end: Redesign of the front-end UX/UI and improvement of existing infrastructure, while staying true to the company's branding.

Back-end: Development of  a CMS (content management system) for the portal, where admin can manage users'

 permissions, such as:

  • notifications

  • contact and company information

  • provide access to specific training courses

  • respond to service and support requests 

 

By understanding users’ current problems and pain points we set the following objectives for the new client portal:

  • Login page – user access control 

  • Home page with access to the following pages & features:

    • Access to all site forms (service repair, equipment rental, customer support)

    • My Account

    • Clients’ private files 

    • Product news 

    • Notifications 

    • Documents 

    • Videos

    • Resources 

    • Training Courses & videos with secure access  

    • Chat bot 

  • Client feedback survey

  • My Account - easy personalization of company & contact info, notifications, and alerts

  • My Documents - clients can upload/download personalized files such as quotes, certificates, forms, and any other documents pertaining to their purchased products

  • Training Courses - secure access to training solutions for each company product

END USERS

Companies who have purchased a product or products through INOVA, receive user access to the client portal. Each company receives a single user name. 

  • User needs to be able to completely personalize their portal (notifications, alerts, documents)

  • User needs to have quick and easy access to all product and software info

  • User needs to be able to chat with a representative from anywhere at any time

  • User need to be able to submit a form for service/repair/training/support from anywhere at any time, with quick turnaround times

  • User needs to be able to upload/download documents at any time

Expected Outcomes

  • Enhancing user satisfaction and providing a simple and intuitive use for each user

  • Ability to upload documents such as certificates, quotes, purchase orders, etc.

  • Ability to download documents such as software versions, product specs, user manuals, etc.

  • Improved visual and aesthetic elements throughout the site

  • Ability to chat with a representative in real-time

RESEARCH OVERVIEW

The goal of our research is to uncover and understand users’ current problems and pain points while using INOVA's client portal. The research phase will be conducted using the following methods:

  1. Heuristic Evaluation and walkthrough of current portal 

  2. Competitive Analysis 

  3. Stakeholder Focus Group 

  4. User Interviews & Surveys  

HEURISTIC EVALUATION & WALKTHROUGH

The heuristic evaluation and walkthrough shed light on the usability problems in the user interface, and provided a deeper understanding of how INOVA's users interact with the website. The evaluation helped determine what areas need to be reworked and the severity of each issue that arose.

Main findings:

  • Aesthetic and design: visual inconsistencies throughout the website; the menu appears 2 or 3 times on pages    

  • User control & freedom: no clear BACK button throughout website pages 

  • Consistency: multiple 'contact' buttons leading to different links, no button hierarchy

  • My Account: hard to find and edit information, no ability to personalize alerts/notifications

  • UX: overall experience was not user-friendly due to information overload, clutter, and visual inconsistencies in the design

COMPETITIVE ANALYSIS

The competitive analysis helped us determine the strengths and weaknesses of INOVA’s competitor. Through this analysis, we were able to see how INOVA’s client portal compares to its competitor’s client portal.

Another walkthrough helped determine how the client portals compare.

Main Findings:

  • Aesthetic and design: website is easily navigable between the different menu items 

  • Consistency: consistent design across the website 

  • Clear site hierarchy 

  • Easy reversal of actions: users can easily return to the main page from any page within the website

  • My Account: quick access through homepage, users can easily personalize alerts, notifications, and information

1

Users should receive in-site notifications (new software releases, new documents, etc.)

2

Easier user access to documentation and software 

3

Easy access to all PDF documents, that can either be viewed or downloaded 

4

Option to give out client rewards for filling out surveys 

5

Adding a sign-up option in the login page 

6

Ability to see the latest documents and software on the main page 

7

Upon log-in, a user should get an updated license notification 

8

Ability to send link for downloading / uploading heavy files

9

Adding a chatbot to website 

10

Drag & Drop option for file upload

11

Adding 3D images of products 

 

STAKEHOLDER FOCUS GROUP

Focus groups use group dynamics to get shared experiences of people with similar characteristics. We held a focus group with employees who interact with company clients on a daily basis, who have admin access to the portal, to get feedback and insight into the client portal website.

FINDINGS & KEY THEMES

USER INTERVIEWS & SURVEYS 

Some users were sent a survey while other users were interviewed. A 10 closed-ended questionnaire was sent out to users to get their honest feedback and to better understand how the user experience can be improved. All interviews were conducted using Google Meet and were audio recorded. Recordings were then digitally transcribed and the data was reviewed and thematically analyzed.

All users managed to navigate through the portal and contact support if and when needed. Users agreed the portal functions the way it is, but improvements can and should be made. There were some areas in the portal, however, they found to be more confusing than others.

 

KEY FINDINGS

1

Sign in/Sign up

Users mentioned email only as a sign in option

2

Navigation

Users found the navigation more difficult than easy, claiming its time consuming and hard to find the latest software version or patch

3

Help/support

Users mentioned contacting help or support is neither easy nor difficult. One user said he knows who to turn to for help “just as long as you get them in the right time zone”

4

Preferred notification style

Users would like to be able to receive notifications in their user account and to their email, specifically regarding new software versions or patches

5

Search

Difficulty finding a specific product or document depends on if the user knows specifically what they are searching for. The client portal needs to be more organized and easier to search

6

Accessing PDF documents

Accessing documents can be difficult. One user mentioned that with new versions/patches there should be a readme file readily available so that each user can read the info first and not have to download the whole zip file. Another user said not all files are readily available where you expect to find them

FINAL

FINDINGS

  1. The client portal is used mostly on a project basis, rather than daily 

  2. It can be difficult to find specific files on the website 

  3. The preferred sign-in pathway is email 

  4. The client portal needs to be more user-friendly and easier to navigate 

  5. The client portal needs to be more organized and easier to search 

  6. The client portal needs to be more responsive to help and support requests 

  7. Users would like to receive email notifications & in-site notifications (new software releases, new documents, etc.) 

  8. Easier user access to documentation, software, and products 

  9. Users would like better navigation through the different software versions and patches 

  10. Users would prefer easier access to PDF documents, that can be easily viewed & downloaded 

FINAL RECOMMENDATIONS 

  1. Adding a sign-up option in the login page 

  2. Easier navigation across website that can be achieved by:

    • Providing a better search tool 

    • Consistent design across website 

    • Clear site hierarchy 

    • Adding BACK buttons throughout website pages, allowing users to return to the previous/home page from anywhere within the website 

  3. Users can opt to receive in-site and/or email notifications (for new software releases, new documents, etc.) 

  4. Ability to see the latest documents and software on the main page 

  5. Easier user access to documentation and software, that can be easily viewed or downloaded 

  6. Drag & Drop option for file upload 

  7. Adding a chatbot to website to allow quick and easy support, help, and search options 

  8. Ability to send link for downloading/uploading heavy files 

  9. Better navigation through the different software versions and patches 

SKETCHING THE INTERFACE

SITE MAP

A user journey and site map were developed from the insights gained through conducting research. Following the user journey and site maps, I was able to sketch some interface ideas. The first step was to sketch out the homepage, which should contain the most pertinent information to the user, and allow for quick and easy access to all features across the website.

Inova_site_map.png

MID FIDELITY WIREFRAMES

HOMEPAGE

Following the user journey and site maps, I was able to sketch some interface ideas. The first step was to sketch out the homepage, which should contain the most pertinent information to the user, and allow for quick and easy access to all features across the website, while staying true to the look & feel of INOVA's external website.

 

From the insights gained through research, I was able to gather, together with the client, what the user needs the easiest and quickest access to. I was able to build out what features the homepage should contain, (features such as documents, training courses, software versions, notifications, my account, etc.)

1

Inova_homepage-02_edited.jpg

2

3

Inova_homepage-04_edited.jpg

4

Inova_homepage-05_edited.jpg

SITE PAGES

Once I presented the homepage options to the client, we decided together which features should be present on the page, and on the hierarchy of all features. From there, I was able to sketch out wireframes for the rest of the site's pages.

Sign-in

Inova_WIREFRAMES-18.png

Request Account

Inova_WIREFRAMES-22.png

My Account

Training Courses

How-to-videos

Inova_WIREFRAMES-04.png

Service + Support

Documents

Products

Forms

DESIGN CONCEPT & STYLE GUIDE

The client wanted to adhere to the company's existing branding, and implement a similar look & feel to their external website. Below are the company's colour palette, primary and secondary colours, and the font that would be implemented in the final product.

Client Feedback:

  • A modern and clean design

  • Usage of the primary and secondary brand colours

  • Usage of type standards, specifically the primary font, DINOT

  • All site images (products, training videos, services, etc.) were o be provided by the client

BRAND COLOUR SCHEME & FONTS

INOVA uses three primary colors to represent its brand: PMS Cyan Blue, PMS 376 C Green and PMS 430 C Gray. The primary and secondary colors represent the main color choices for the INOVA brand and should be used as the focal colors in marketing communications. Headers should be in black, while the body in INOVA gray. 

INOVA’s preferred font, DINOT, should be used as the primary font, and Officina Serif as the secondary font.

Secondary Brand Colours

e36f1e

cd1543

eeb111

Primary Brand Colours

8dc63f

00aeef

808285

Tertiary Brand Colours

ebe72a

8b6900

387c2b

7e4300

8b0e04

005581

231f20

Type Standards: DINOT

Design_Guide_FONTS.png

 

HIGH-FIDELITY WIREFRAMES

Multi-Device-MOCKUP_2400x1600px.jpg

DESKTOP

Desktop_Mockup_HOMES.jpg
Desktop_Mockup_CONTACT.jpg
Desktop_Mockup_SUPPORT.jpg
Desktop_Mockup_LOCATIONS.jpg
Desktop_Mockup_ACCOUNT.jpg
Desktop_Mockup_PRODUCTS.jpg
Desktop_Mockup_VIDEOS.jpg
Desktop_Mockup_DOCS.jpg

MOBILE
 

After I began building out the desktop wireframes, I discussed together with the client, which pages should be available on the mobile version of the client portal.

Client Feedback: 

  • Login

  • Homepage

  • Contact form & locations

  • Access to contact & service request forms only

  • Limited access to document pages (the desktop version allows access to all document pages), with the ability to view and/or download

  • Quick access to upload files, such as photos

  • Ability to browse and watch the latest How-To-Videos

1-Mobile-CONTACT.jpg
5-Mobile-LOGIN.jpg
3-Mobile-HOME.jpg
7-Mobile-FORM.jpg
9-Mobile-MESSAGE.jpg
6-Mobile-DOCS2.jpg
8-Mobile-VIDEOS.jpg
2-Mobile-LOCATIONS.jpg
4-Mobile-ADDFILES.jpg

IMPLEMENTATION, VALIDATION, & DESIGN ADJUSTMENT

The next phase was implementation of the user-interface, and development of a content management system (in Wordpress). At this phase, we sat down with the development team to go over the desktop and mobile prototypes' user flows and interactions. While the development team started working on the back-end, we started doing validation and design adjustments on the front-end. This allowed us to find any usability or UI issues.    

This phase created a lot of back & forth between everyone involved. Each page that was done on the back-end, was also tested and validated.

KEY FINDINGS

1

Forms

  • To eliminate user errors, all fields in all forms were converted to *required

  • An error message was added to each field if no input is filled by user

2

Contact Page - Desktop

  • Contact was split into two pages - a contact form, and contact locations

  • To simplify navigation, both pages were combined into one page with a contact form and buttons to help users navigate through different site pages - office locations, sales, service, and training request

3

My Account

  • A validation to phone number and email was added, along with an error message if incomplete, or if a user added extra/unnecessary characters 

4

Contact Page - Mobile

  • The same design change was made to the mobile version

  • On the mobile version, users only have access to locations and service

5

Sort & Filter Buttons - Desktop

  • Initially, there were Sort and Filter buttons on the documents pagesThe sort button sorts by dates/alphabetical order, while the filter button filters between product types

  • As users are able to filter between product types in the left hand menu, we left only the sort button

6

Sort & Filter Buttons - Mobile

  • In the mobile version, both the Sort and Filter buttons appear

  • In the mobile site, the left hand menu doesn't appear, so users can use the filter button to filter products

FINAL SOLUTION

DESKTOP

MOBILE

REFLECTION

Managing expectations, deliverables, and timelines

The first phases of the project - discovery and exploration, were client-facing. These phases were very structured and straightforward, with weekly client meetings and smooth timelines.

The third and fourth phases of the project - implementation and delivery, introduced the development team into the project as well. Managing timelines and deliverables were more complicated than the first phases, as there were more people and timelines to navigate and be considerate of. 
 

Strive for synergy - with the client and the development team

Throughout the project, not everybody were always on the same page, whether it was timeline issues, or a disagreement about scope of work. It was imperative to address any issues that arose in a timely manner.

 

Communication, communication, communication 

Communication is key in this project. A lot of individuals were involved in this project, from the client's team to the development team, and almost each individual living in a different time zone and country. Weekly Teams meetings were held to keep track of the progress and for any questions and clarifications. 

Besides the weekly video calls, we also utilized Figma to add in comments on the UI, a group chat for urgent matters, a shared Google Drive folder, and a Trello shared workspace for any site fixes, bugs and inquiries.

bottom of page