top of page
Functioning Real Time Data Display

Hopecamconnect.org

Designed and developed Hopecam's custom application 

OVERVIEW
Designed and developed a fully secure custom web application for Hopecam, a nonprofit headquartered in Reston, Virginia.
TEAM
Full-stack Engineers, Back-end Engineers, UX Designer/Front-end Engineers, AWS Architects
TOOLS & LANGUAGES
Figma, HTML/CSS, JavaScript, Django, Python, AWS
Live Analytics
CONTEXT
About the Project

Hopecam is a non-profit charity that helps children with cancer overcome the burden of isolation by connecting them virtually with their classmates. The directors of Hopecam needed a technical team to build them a new, completely customized application Hopecamconnect.org, with a forums page for students and an admin portal to manage the posts. Lansdowne Technology Consulting took on the task of designing the website and developing it from the very beginning. 

 

From Scratch Software Creation of a Calendar
Technical Profile Entry
Profile Database
Technical Chat Room Function
Understanding Hopecam's Mission 

Hopecam's mission is to provide children battling cancer with a way to connect with others while being treated. Hopecam already had an existing website (Hopecam.org) with a Style Guide for us to use while building their new dynamic website.

 

SUMMARY
The Problems

1. Administrators needed efficient and intuitive access to student accounts and user analytics.

2. Administrators required a straightforward, efficient way to manage and stay informed about events and resources.

3. Busy administrators struggled to remember important dates and needed quick decision-making tools.

 

The Solutions

1. Built an enhanced user interface, where any part of a student row is clickable along with data visualizations, ensuring quick and efficient access to student information and insights.

2. Consistent, easy-to-navigate designs for the Admin Resources and Registrar pages, and an unobtrusive event banner, ensuring seamless access to crucial information with minimal effort.

3. A live, editable calendar and a design providing monthly and yearly data analytics, aiding in effective decision-making and keeping important dates front and center.

DESIGN DECISIONS
How Each Feature Will Be Utilized

After brainstorming potential features, we analyzed how users would utilize each feature. This helped us understand which features would be most impactful.

Organizing events and dates 
A problem we foresaw was administrators not always being able to remember the dates upcoming events. 

This design addresses this problem by providing a live calendar that admin can access and edit from their home page.
Event Hosting and Creating Page
Live Data Analytics
Viewing data and analytics 
Having user data is pivotal in making product decisions.

To assist Hopecam's decision-makers, we provided them a design with monthly and yearly data based on student information and posts. 
Seamlessly searching through student accounts
A primary goal of administrators/staff is to manage student accounts and view/delete accounts when necessary.
 
The design allows admin to easily view student accounts with search and filters while also displaying their information.
Admin Function of Database
REVISIONS
Visual Feedback & New Features

Even though the design process had ended and we had began developing, there were still changes that needed to be made to improve the user experience and help users achieve their goals with even less friction. 

Technology Solution for Database

The admin experience was enhanced by allowing any part of a user row to be clickable when hovered over, and highlighted for clear visual feedback. 

The Admin Resources page mirrors the design of the Registrar page, with resource rows highlighted in light blue when hovered over, aligning with Hopecam's secondary colors from their style guide. 

Live Database Scrolling Function
Database with Search Filter

The event banner at the top of the screen effectively alerts users to upcoming events. Once it is clicked, it reveals a modal with detailed event information.

 

This design bridges communication between admin and users, allowing admin to communicate important details to all users unobtrusively.

Style Guide

Hopecam already had an existing website (Hopecam.org) with a Style Guide for us to use while building their new dynamic website.

 

Colors

FF6C42

2180A4

000000

FFFFFF

E9E9E9

Type

Quicksand,

Bold, 30px

H1

Quicksand,

Medium, 25px

H2

Quicksand,

Regular, 20px

H3

Quicksand,

Bold, 15px

H4

Componenets
Hopecam Logo
bottom of page