Project Overview
The Company / Product 
Alliance for Saving Energy offers a web application as part of their “PowerSave Schools” Program, which engages students in online and real-world activities to reduce energy consumption in the classroom and at home, with over 1,000 participating schools nationwide. 

The Problem  
The Alliance for Saving Energy wanted to migrate their existing program to EvoText’s “Content2Classroom” platform, optimize their questions for desktop and mobile, and retain their existing visual style. 

My Role
I led UI/UX design for Alliance’s responsive web activities and worked directly with them to help migrate their existing activities to EvoText’s Content2Classroom platform. 

The Result
Launched in time for Fall 2020, to be used by 1,000 schools and over 25,000 students nationwide.
Understanding the Problem
Myself and EvoText’s product team met with 3 stakeholders from Alliance to Save Energy to understand the scope and goals of our project to migrate their program to our Content2Classroom platform:

+   Create new questions types that would allow students to take pictures from their mobile device. 
+   Optimize for mobile. 
+   Maintain and enhance their existing visual style and branding.
Defining Users & Use Cases
I asked questions in our initial meeting with Alliance to Save Energy to help us understand the age range we would be designing for and the scenarios in which they participate in the program.
Activity Audit
An audit of Alliance’s activities conducted by myself and our VP of Product allowed us to better understand the differences between Alliance's current activities and question types and our Content2Classroom question types.

Their current activities displayed all 7 questions on a single page (left), while our Content2Classroom question types are displayed on individual pages (right)

We worked with Alliance to understand these differences. They agreed that separate pages for questions would be better, and knew we would need to design new question types.
Activity Wireframe Options
I created 2 wireframe options of the 7 question activities as a whole, and presented them to Alliance stakeholders to select a layout direction:

Activity Wireframes Option 1: Using Content2Classroom’s default question design, with a large banner at the top and question placed in abundant white space.
Activity Wireframes Option 2 (below, selected): Match Alliance's current site, with background image and question displayed in a floating container.
Take & Upload images on mobile
One of Alliance's activities required students to partake in an “Energy Audit”, where they would take pictures of water heaters or sustainable light bulbs around their home or classroom using their mobile device. I played out the picture taking experiences for apple and android devices. We also discovered the default image name would be intelligible, so I created a re-name field upon returning to the upload question type in the activity.
Optimizing for desktop and mobile 
I troubleshooted orientation and touch-target issues when scaling questions down to a mobile device.
+  Orientation
+  Stacking components.
+  Enlarging touch-targets
Working with an existing design system  
Alliance to Save Energy had an existing design system, which was simple, effective and full of personality: image heavy, colorful, with large touch targets, and a minimal component set. I used these styles creatively to match and elevate their existing activities to highlight the environment for students.
The Result
+  Launched in time for fall 2020.
+  Used by 1,000 schools and over 25,000 students nationwide.
+  Better question for use cases.
+  Different device types.
+  Launched in time for fall 2020.
+  Used by 1,000 schools and over 25,000 students nationwide.
+  Better question for use cases.
+  Different device types.
Back to Top