Acerca de
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
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.
01 DEFINE
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.
User login screen from 2020, pre-redesign.
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
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.
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.
Home Screen
Community Dining Screen
Service Request Screen
User Profile Screen
03 PROTOTYPE
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
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.