Acerca de

laptop resident network 2021.png

Resident Network

UI/UX Design - Web Application

The Resident Network, is a web-based application portal that provides senior living residents a convenient way to access community information such as menus, event calendars, photos, directories and more. An integral part of the full Connected Living technology suite, the portal gives seniors who may not have access to smart devices a way to connect and engage with their community through web-enabled devices including laptops and desktops.

Design Toolkit

Icon__Photoshop icon.png
Icon__XD Icon.png

PHOTOSHOP

ADOBE XD

The Challenge

Update the existing resident web portal to align with the UI and UX established in the Connected Living mobile app. New functionality should be designed to encourage measurable user engagement including the ability for residents to "quick view" today's information, take a profile survey to identify interests and backgrounds, generate a service request, and view and RSVP to events. Generate backend data within the CMS that would allow admins to track and measure resident preferences and create programming accordingly. 

My Role

As the sole designer on this project, I was responsible for adhering to the UI Design System I had previously established for the CL mobile app. I created the wireframes and developed the unique web navigation and interactions (such as hover and animations). I was also responsible for building the full working prototype to convey these unique design aspects to the team engineer. I worked closely with engineering to solve bugs, iterate on functionality and design additional elements as needed.

Resident Network 2021.png
01 DEFINE
Screen Shot 2022-03-18 at 9.57.19 AM.png

The pre-existing Connected Living Resident Network, originally introduced in 2007 as My Way Village, was extremely outdated and in serious need of updates and improvements both visually and functionally. The initial offering was poorly designed and extremely clunky to use. Customer satisfaction was poor and user engagement was severely suffering. The primary goal for the portal’s complete redesign would be to advance the user experience to align with the other, more modern, products in the current technology suite. The complex project would involve complete overhauls to both the front and back-ends of the platform and would require a collaborative effort between creative and engineering.

RN desktop 2021.png

User login screen from 2020, pre-redesign.

RN desktop 2022.png

User login screen from 2022, post-redesign.

Research and evaluation of the existing portal was conducted to identify features and functionality to retain as well as areas that required improvement. The newly updated mobile app was used for comparison and as the objective for the redesign. Utilizing the internal investigation to generate the product roadmap, the team elected to not conduct a formal competitive analysis.

In addition to integrating the new features,
functionality and UI, an overall warmer and more user-friendly experience were critical for the redesign.

02 IDEATE
Screen Shot 2022-08-15 at 12.15.11 PM.png

UI Design System
 

Building on the existing product suite UI design system, an additional color palette was added for the new Resident Network portal.  Colors were identified for each of the primary product features such as: dining, calendars, photos etc. Fonts and font sizes were optimized for the primary senior user group. Iconography from the Connected Living mobile app was also incorporated for product continuity.

Screen Shot 2022-08-11 at 1.18.12 PM.png

Screens were designed using AdobeXD and shared internally for collaboration and team feedback.
Iterative changes, based on team input, were made within the XD project.

RN_home.png
RN_Dining.png
RN_worxhub new request.png
RN_Profile.png

Home Screen

Community Dining Screen

Service Request Screen

User Profile Screen

03 PROTOTYPE
Screen Shot 2022-08-13 at 8.12.42 AM.png

With many highly complex web-specific interactions and animations throughout the design, a fully  functional interactive prototype was generated using AdobeXD components, states, triggers and transitions. The prototype was shared internally to present and test the proposed interactivity and for collaboration and iteration among the teams.

Personal Sequence

The video below presents a user login, view their "day-at-a-glance", enter personal data into their profile, complete the "About Me Survey" and then view their survey selections within the resident directory.

Community Engagement Sequence

The video below presents a user view today's lunch menu selections, view today's calendar & RSVP for events, view a community photo gallery & slideshow, and review the activities information document within the Community Resources repository.

05 CONCLUSION
admin panel 2021_sm.png

After a successful relaunch of the Resident Network, customer engagement increased drastically and customer satisfaction improved. The enhanced Resident Network is currently used by all Connected Living customers. Based on positive customer feedback, similar changes and improvements were applied to the administrative network portal for community staff content entry.