Designing a community connection application prototype for student
residential apartment communities in Webflow

woman at desk viewing website on imac imac viewing the KSU Edge website

Date Completed

January, 2021

Overview

American Campus Communities (ACC) is the nation’s largest developer, owner and manager of high-quality student housing communities.

Completed as the test project for Toptal onboarding this initiative was organized and carried out to meet the requirements provided by Toptal representatives who are also senior UX designers.

Working remotely as a team of one, I managed all aspects of research, design and development.

Team Goals

Design a responsive web dashboard that connects residents that live in the same private community.
The target audience is students (18-21) who are tuned in to social media and the latest technologies.
Provide an easy way for residents to connect and communicate with each other, book a parking space, stay informed about community events, and complete their basic profile.
Develop additional features that would take this concept to the next level.

A screen grab of the entire landing page.

Entire landing page shown at a smaller size

View Prototype

Process

learn

To better understand American
Campus Communities as a business
and a brand, I started the initiative
with domain research and business
model analysis.

Business Model Analysis

American Campus Communities is an asset heavy business whit 203 communities throughout 93 campuses totaling 11 billion in market value. They compete by maximizing throughput, however their business model is driven by student outcomes. ACC operates as both a real-estate development business and a consultancy; creating new developments, upgrading acquired communities, and partnering with universities to develop or manage on-campus housing. The companies stated goal is to deliver the best possible experience for students in the form of great living spaces, great amenities, and resources that support academic and personal success.

Primary model, knowledge based

American Campus Communities has a business model focused on ideas. Their brand is working to deliver resources, environments, and experiences that lead to positive student outcomes. The primary logic for ACC is generating revenue by cultivating desire in their audience. They accomplish with visible outputs such as: architecture and interior design, web and mobile services, and organizing community events and programs.

Secondary model, pricing to demand

American Campus Communities works through partnerships to reduce costs of delivering on their cultural commitments to students academic and personal development while expanding their offerings. ACC partners with several community-based and national organizations and academic associations, supporting their efforts to develop youth, assist families in crisis, reduce environmental impact, promote academic success, and maintain desire for their services.

understand

With a better understanding of ACC's business I continued domain research looking at current solution strengths and weaknesses before connecting with Edge community staff and developing user personas

KSU Edge

To learn about online portals for existing student off campus housing I spoke with a staff member at Kent State University Edge. Edge uses Instagram to advertise event programming to Edge residents, in addition to email. They do offer a dedicated third party app to facilitate roommate matching.This platform allows incoming residents to create profiles and chat with each other.The Edge website does offer residents a login and portal where residents can manage property related issues such as: payments, utilities, parking, and maintenance requests.

Strengths

The Kent Edge residents are offered a number of events every month that encourage and support community.

Weaknesses

Instagram and email are each congested information channels where announcement for events are easily overlooked. There is no resident based forum or platform for real-time communication.

Value proposition

Tools that help you make the grade. And community events that keep you connected. All make University Edge the premier student housing choice at Kent State.

Problem Definition

Academic achievement
Offerings beyond, lab & WIFI — programming, events
Social development
Develop event programming & social platform
Professional development
Develop event programming & social platform

Edge Community Staff Interview

A phone interview with Edge student housing staff confirmed that the only media driving engagement between residents as Instagram and email event announcements.

define

To begin designing features and functionality I set out to define the end goals for the initiative, amplify existing benefits and create new benefits for key behaviors

What’s the real problem we’re trying to solve?

I personally have lived in several apartment buildings, including my current building where few if any interactions take place between resident over the course of years.

It is not that the problem is unfriendly people or a deficit in social norms in need of remedy. And when attempts are made to intercede and manage social norms, even when well intentioned, things often go wrong.

A screen-grab from an episode of Seinfeld where Jerry's picture in the lobby is defaced because he has not enjoyed serial extended personal greeting with neighbors.

Not social profiles, but events and engagement

To develop an application that changes behavior we want to clearly define thriving in this context, identify the behaviors that support it, and design around those behaviors.

Engaging in social activities that provide opportunities for feeling a sense of belonging and relatedness.
Striving to develop the emotional intelligence and social soft skills that contribute to successful personal and professional outcomes.

Desired behavior change

Attend community events and participate in programs.

Supporting behavior change

Download and allow lock-screen notifications for edge community app and website.

Strategy

Monthly incentive for direct deposit and application configuration. Truebill like rent, utility, lease, parking and maintenance functionality helping to drive mobile app application download configuration and use.

ideate

With key behaviors and strategy defined
I produced a sitemap of pages

The initiative objectives included providing an easy way for residents to connect and communicate with each other, booking a parking space, staying informed about community events, and completing their basic profile.

I a site-mapping application Flowmap to build out the pages needed to meet the needs of users. Flow map has a library of pages with basic page patterns that is helpful for considering UI patterns.

Proposed taxonomy

Billing and services

Lease
• Lease Download
Parking
• Space selection
Rent
• Rent payment
• Payment history download
Utilities
• Utilities payment
• Utilities payment history
Maintenance
• Maintenance requests

Community

Resident forum
• Chat
Events
• An event
     • Event Forum
      • Chat
      • Event registration
      • Event ticket purchase
• Create an event
     • Create tickets & payment
          • Send invites
Activities
• An activity
• Activity forum
• Chat
• Create an activity
Groups
‍•
• Group forum
• Chat
• Create a group
Resident services
• Services
• Chat

About

Units
Gym
Computer Lab
Pool
Community Kitchen
Lounges
Courtyards

prototype

With a sitemap complete I was prepared to begin prototyping the landing page and dashboards

Community Dashboard

The community dashboard provides residents with a space to communicate with other residents as form participants and within forums specific to community events, activities, groups, and resident services. The popular forum platform "Discourse offers chat integration within the forms were it to be used.

Implementations for resident programming of events, activities and groups, work to overcome the ever-present concern of 90-9-1 online participation. Including a platform for student businesses and services working to encourage both community engagement, the development of life skills, and income.

The revised information architecture was prototyped in Webflow allowing for animated interaction design to play a role in further users testing

The billing and services page uses the same format as other dashboards.

The platform provides a documented history of payments, maintenance, and online communication with staff and management.

Test

With the sitemap, landing page and,
dashboards complete I conducted
tree testing to identify any issues
users may have with the taxonomy
and labeling

Treejack

To test the proposed taxonomy and labeling I configured a remote unmoderated tree test using Optimal Workshops Treejack.

Results

Participants found their way through the taxonomy without frustration and error. The errors shown would not happen with the implemented forum where chat is integrated into the forum itself. Additional testing would be needed to determine how usable the forum, Discourse, will be for users.

Reflections & takeaways

Toptal UX designers found the initiative to be thorough and onboarded me as a Toptal UX designer shortly after submission. They particularly enjoyed the humorous observations borrowed from Seinfeld used to make the distinction between a social media platform and a set of dashboards designed to support the brand goals of American College Communities.