Summer / Fall 2020 UX Internship at Ingleside Engaged Living.
Ingleside is a non-profit organization which provides management and strategic leadership to three retirement communities.
(Solo UX Designer)
UX Research, Qualitative and Quantitative Data Analysis, UX Auditing, Ideation,
Re-design, Initial Design Testing, Iterations, User Testing, Design Systems
10 months (Summer - Fall 2020)
Team:
UX Researcher, CIO, Engineer, Resident Committee, and me
Overview of the problem
The old Ingleside Resident Portal was overwhelming for senior residents due to many reasons:
• difficult navigation
• difficult flow (of events, dining, resident search)
• unclear terminologies
• lack of guidance
• poor content organization and UI
• accessibility issues
We created an IoT and service-based ecosystem, called
Laundry-as-a-Service (L-a-a-S), that focuses on creating a better laundry experience for University Students and Property Managers, while also creating a service-focused business strategy for GEA.
Outcome
I redesigned the overall user interface and improved the experience for senior living community by re-designing the sitemap, re-defining the flow, re-organizing the content, making the portal accessible, and creating a design system. The new design is easier and appreciated by most of the residents.
Also, I was offered to continue working as a UX Design Co-op for the Fall and Spring 2020.
We created an IoT and service-based ecosystem, called
Laundry-as-a-Service (L-a-a-S), that focuses on creating a better laundry experience for University Students and Property Managers, while also creating a service-focused business strategy for GEA.
The Challenge
To re-design the resident portal of Ingleside at King Farm.
Target Users
•
The target users of this project are the Senior Residents of the Ingleside Engaged Living at Kingfarm. There are 170+ residents living in this community.
•
The users belong to the senior age group. They are 65 years of age or older.
•
Many users were non-techsavvy.
Design Process
Stakeholder's Interview, Survey, Focus Groups
To understand the residents’ pain points, we used two methods of research: surveys and focus groups.
•
I talked to the CIO of the organization to understand the goal of the redesign, overall context of the current portal, expectations from the design, and criteria and constraints for the design.
•
My teams' UX Researcher had conducted the survey with 127 residents of Ingleside. Surveys were conducted online and manually over a period of three weeks.
•
I, along with my other researcher, conducted focus groups with 43 participants in a total of 7 sessions over 2 days.
In-depth UX Audit to see the current usability
I conducted a heuristic evaluation of the entire website to identify usability issues. Next, to assess the flow of each section (for example, searching a resident, checking registerable events, reporting a maintenance issue, etc.), I did cognitive walkthrough. Side by side, I also researched the do's and dont's of designing for accessibility.
Content Analysis
The content analysis involved both researchers reviewing the data and noting website issues mentioned by several residents. We followed our content analysis with an in-depth thematic analysis to solidify common themes and to understand residents' reasonings for mentioning concerns. For this we used Atlas.ti. We met several times to compare and consolidate notes, discuss findings, and decide on initial recommendations. Further, I used the WAVE (Web Accessibility Evaluation Tool) to test the accessibility of the Ingleside Portal.
High-level Problems identified from the analysis
Poor user interface & difficult experience
Accessibility Issues
Lack of guidance & navigational cue
Issues finding information
Delving deeper into each problem / current usability
Issue 1: Poor user interface & difficult experience
•
The overall portal did not look like a dashboard. It had a lot of textual content which were unorganized. The UI looked old and outdated. The design components were inconsistent.
•
The top navigation was not intuitive. Moreover, it contained a lot of menu items with 2-level submenus, which was difficult for residents.
•
Most residents mentioned that the home page design had poor content organization and bad interface.
•
Several residents complained about the difficulty in searching residents and staffs in the resident and staff directory. On auditing, we found that the search feature took the entire view of the page and was difficult to use.
•
The residents had a difficult flow for event registration. There was no way to edit or cancel the registration.
•
Communications page was not intuitive. Several residents had no idea that the link directed them to a video (in a new tab) uploaded on vimeo.
•
The dining reservation flow was not intuitive. However, this was in the least priority for the redesign post COVID-19.
issue 2: Accessibility issues
•
We ran an accessibility check of the IKF web portal using the Web Accessibility Evaluation (WAVE) tool. We identified 12 errors related to missing alternative texts, and 3 contrast errors.
•
Several residents complained about the lack of guidance and navigational cues, which consequently increased the cognitive load. From an accessibility standpoint, clear and descriptive titles and headings help all users navigate and identify components and content easily.
issue 3: Lack of guidance & navigational cue
Residents mentioned lack of guidance or navigation 117 times over the course of the focus group and at least 15 times in surveys, making it the most repeated issue.
•
Many residents were unaware of the presence of some sections on the homepage, and others, who were aware, did not understand the purpose of those sections.
•
This issue gave rise to another issue where residents would describe needing to memorize multiple sections that added cognitive load.
issue 4: Issues finding information
•
Many residents remarked that some of the terminologies used on the website were unclear and not intuitive.
•
Residents mentioned that the website contains a lot of good information, but they were organized poorly in a way which was difficult to find. Also, a lot of sections on the portal were redundant.
•
The general search engine on the portal was not intuitive.
How might we design an accessible resident portal?
How might we organize the content to increase the discoverability?
How might we provide guidance to non-techsavvy residents?
How might we improve the user interface and overall experience?
issue 4: Issues finding information
Renaming the terminologies
Many pages on the resident portal did not have a proper terminology. The terminologies used did not convey the purpose of the page. I discussed with the UX Researcher, CIO, and also the lead representative of each committee (like health, wellness, services, staff and residents) to re-name the terminologies.
Building the sitemap
view full sitemap
Creating the recommendation document for the residents to validate our recommendations for the redesign
After renaming the terminologies and building the sitemap, I collaborated with the UX Researcher to discuss the recommendations and prepared the in-depth Website Evaluation and Recommendation Document.
We prepared the detailed report and shared it to the CIO, IT committee, project manager, engineering team, and the residents, who were our target users. We waited for some time to get feedbacks on the document from them. This was our first step of testing the redesign recommendations with the end-users.
The recommendations were not just about the re-design but also issues that were causing pain to the residents. (I have listed the pain-point as well as our solution on the final design below.)
Constraints for the re-design
•
Due to the limited amount of time for the redesign and testing, we prioritized features based on: residents' complaints and suggestions, most used features.
•
Due to COVID-19, online dining reservation had to be closed. So, the re-design of the dining reservation was not in the priority.
•
COVID updates became the most important topic that all the residents needed to be aware of.
Whiteboarding and wireframes
issue 2: Accessibility issues
First, I defined the visual design that met the accessibility guideline
Ingleside already had a brand logo. The major requirement for the visual design was to create a portal that utilized the brand colors. So, I utilized the current brand colors to re-define the color palette that meets the accessibility guidelines. Here are a list of accessibility guidelines we gathered before creating the recommendation document:
•
While WCAG and WAI do not provide a suggested minimum font and advocate for flexibility that can be tailored to the users needs, there are other suggestions that minimum font should be between 12 and 16 pt to improve accessibility. From our findings, one participant suggested at minimum 16 pt
•
Related to font size, to improve visual presentation of text, guidelines suggest a minimum contrast ratio of 4.5:1 for text and images of text except in cases where the text is larger, decorative, or part of a logo
Design Iterations
The design works spread for a couple of months. I had multiple iterations on different module of the redesign but I will be focusing mostly on the iterations of the Homepage, Events page, and Resident Directory page.
issue 1: Poor user interface & difficult experience
I tested what I designed simultaneously to the CIO, IT committee members, and Engineering team to constantly validate and iterate as per the feedback. Due to constant iteration, I could not complete the entire portal re-design but focused mostly on the important sections and design systems so that I could hand off the design properly.
Given below are the most important pages / sections that I redesigned.
a. Accessible side-bar navigation optimized for usability and findability
b. Bread crumbs to decrease the cognitive load
c. Redesigned homepage as one-pager encapsulating those features which are mostly used by the residents
d. Easy search experience for finding residents & staffs
Easy and convenient search feature to find residents, card view of residents, less waste of space.
Filter staff members based on the department easily on few clicks.
Advanced filter easily accessible by opening the accordion.
e. Seamles event registration & editing flow
All the events are displayed with their kinds, along with the search filter.
Pre-filled registration form to make it easier and faster for senior residents.
Clear confirmation about the registered event.
'Edit' button for modifying the event detail is clear and visible to the residents.
Edit form is the same as registration form to avoid confusion.
Clear confirmation about the modified event.
f. Re-designed the communication page so that residents can view the videos easily
issue 3: Lack of guidance & navigational cue
Tool tip at multiple places to guide non-tech-savvy users & reduce cognitive load
Design Handoff to the developers
As my next step, I will be collaborating with the UX Researcher to test the designs (home, events, staff directory, and resident directory) with 13 residents of Ingleside on February - March, 2021.
