OpenEd
Individualized Standardized Learning
My Roles
Project management
Research
Information architecture
Product design
Interface design
Prototyping
Branding & visual identity
Visual design

I was the sole owner of this project, managing wide responsibilities from client and project management to final execution and handover to OpenEd's internal engineering team.

Design Team Members
Ana Cintora — Design Intern
Tiffany Hsiang — Design Intern
OpenEd needed a solution to offer their Common Core K–12 teaching resources to teachers in an easily accessible way.
Project Background

Client

OpenEd helps teachers find K–12 educational resources.

OpenEd aimed to help teachers find relevant and appropriate teaching material for the educational standards that they are required to follow.

Product

The OpenEd website was an extensive, searchable library.

OpenEd's website is the largest library of K–12 educational resources aligned with the Common Core standards that teachers are required to fulfill. Their resources ranged from media such as videos and games, to education materials such as lesson plans and tests.

Problem

Teachers had a hard time integrating the resources.

There was no easy method for teachers to bring these valuable resources to their students and classrooms. Finding the resources they needed to aid them in fulfilling certain teaching standards were easy. Managing them, integrating them into existing lesson plans, and sharing them with their students was not. To tackle this problem, we worked to create the Flipped Classroom web app, which gives teachers a way to easily and dynamically use OpenEd resources by giving them a space to assign resources, manage their classroom, create lesson plans, and get recommendations to tailor to & improve student performance based on resource grades. With the advantage of having each resource aligned to their respective Common Core standards, OpenEd could track student progress relative to the standards, and then suggest additional study materials based on an individual student's own strengths and weaknesses.

Constraints

The web app would need to work with an existing database.

Because OpenEd's website was the existing, publicly available resource library, we needed to ensure the new web app would integrate seamlessly with what already exists. The library would also need to be updated to support the functionality of the web app.

Success Metrics

The goal was app completion for the investor presentation.

A successful project meant a fully designed Flipped Classroom app that integrated with the resource library. We were responsible for ensuring the web app's interface was accessible, approachable, and usable for teachers and students. The design would then be handed to OpenEd's internal engineering team to implement. The final app would be presented to OpenEd's investors to ensure their next round of funding.

Our aim was to create an entirely new functional and pleasant-to-use product that integrated with OpenEd's existing interfaces.

Project Process

Project Management

I started and ended the project, managing the entire process including mentoring interns.

From beginning to end, I interfaced with the OpenEd stakeholders and teams directly to create timelines, communicate plans and expectations, and execute the final product. Alongside that, I mentored two of our design team's interns through the design process. We worked closely with the OpenEd team with most of our workdays onsite for extensive collaboration.

Research

Before we started strategizing, we researched multiple aspects of the future web app.

Before we started our Flipped Classroom planning, we reviewed the existing OpenEd resource ecosystem, interviewed a few teachers, and analyzed OpenEd educational competitors to learn about Common Core standards; how teachers integrate these requirements into their course plans as well as their month-to-month, week-to-week, and day-to-day lesson plans; as well as how current competitors differentiate themselves and solve their users’ problems. This included participating in a user interview with a partner teacher to OpenEd.

Information Architecture & Visual Identity

Before we jumped into the interface design, we created a solid foundation for the app.

We brainstormed, reviewed, and refined the functionality necessary for users to reach their destinations and goals. OpenEd was set out to create a new system, so therefore, we had to create a new information architecture to support it.

We also updated OpenEd's visual identity to support their vision of being a more accessible and approachable platform for teachers and students to use. OpenEd at the time had no defined visual identity system, so their materials seemed disparate and unreliable. Due to the timeline, we decided to build a foundation that we could work with as we moved forward with the overall project. We defined OpenEd’s typography and color palette, as well as an image style that communicated factual, authoritative, and reliable. We also cleaned up OpenEd’s existing logo combination mark to read better at smaller sizes, necessary for usage on the web.

information architecture for Flipped Classroom app
Information architecture of Flipped Classroom app, with color coding as a progress tracker

mood board
Mood board to guide development of OpenEd visual style

branding color study
Revised combination mark for OpenEd identity with clearer shapes at small sizes (created by intern Ana and directed by myself)

OpenEd mascot variation
Last rendition of OpenEd mascot to appeal to both young and mature audiences (drawn by intern Tiffany and directed by myself)

OpenEd final logo revision
Revised combination mark for OpenEd identity with clearer shapes at small sizes

 

Wireframing & Visual Design

With the foundation set, we proceeded with the screen-by-screen design of the app.

After OpenEd signed off on the infrastructure, I flushed out the Flipped Classroom’s various pages & states with wireframes first and visual design after. In addition, I created a few prototypes to align with the stakeholders and engineering team to communicate the ideas accurately.

whiteboard screen wireframe
Wireframe of teacher view of whiteboard screen

whiteboard screen visual design
Visual design of teacher view of whiteboard screen

Whiteboard Screen

The whiteboard screen is the first screen a teacher would see after selecting a classroom. It provides an overview of the lesson plan and students in the class as well as the "whiteboard" feed where the teacher would be able to drag & drop and assign resources for the students from the lesson plan. Students can then view & use the resources and ask any questions in the comments section. Lesson plan resources can be set to auto-post on a designated day and the teacher can created a new post at any time related or unrelated to the lesson plan and resources.

whiteboard screen wireframe
Wireframe of mastery chart screen

mastery chart screen visual design
Visual design of mastery chart screen

Mastery Chart Screen

The mastery chart screen displays the grade and/or completion status for assigned resources to each student. It also shows the summary and average numbers per resource and per student. Teachers can filter and sort, as well as change to Common Core standard view, which shows each student's mastery of each standard. The information here can be used to assign individual students custom resources to target weaknesses in performance in a certain standard. The color code can be used to scan and understand a class' or student's general performance.

students screen wireframe
Wireframe of students screen

students screen visual design
Visual design of students screen

Students Screen

The students screen allows teachers to view the list of students and their invitation status for a particular class. There are options to invite students via group code (from which students can join the class themselves), via email, and create student accounts (for younger students). From here, teachers can select individual students to view their profiles.

lesson plan screen wireframe
Wireframe of lesson plan screen

lesson plan screen visual design
Visual design of lesson plan screen

Lesson Plan Screen

On the lesson plan screen, teachers and view and edit the source of Common Core standards that apply to their selected classroom. When there are no resources listed under a standard, OpenEd's Flipped Classroom web app will recommend resources for the teacher to add. On this screen, teachers can filter and sort their resources, add notes and resources, and edit any resources or notes and their assign & date dates.

resource library screen wireframe
Wireframe of revised resource library screen

resource library screen visual design
Visual design of revised resource library screen

Resource Library Screen

The resource library was OpenEd's primary product at the time. It was updated to the new look & feel and allow teachers to filter more effectively and intuitively. New funtionality to complement the Flipped Classroom product was also added.

blog screen visual design
Blog screen visual design

Blog Screen

OpenEd releases news updates and other educational tidbits through its existing blog. This screen was updated to the new visual design to match the Flipped Classroom web app and provide an coherent experience across OpenEd's different sections.

student mobile view wireframe
Wireframes of mobile view for students

Student mobile view visual design
‍Visual design of mobile view for students

Student Mobile View

A mobile view of the whiteboard and grades were designed for students to use the assigned resources from a phone or tablet. It gives them a way to view and join classes, add comments and questions to resources, use the resources, and view their grades & completion statuses afterwards.

Conclusion

Results

OpenEd's Flipped Classroom design was delivered to their internal engineering team.

The finished project gave OpenEd a complete overhaul of their existing product. Their extensive K–12 resource library was redesigned to work with the new Flipped Classroom web app that would give teachers a way to use, plan with, assign, and integrate Common Core-aligned assignments in their day-to-day teaching and it allowed students to consume the resources on-the-go. In addition to creating the new web app, other existing interfaces were redesigned with a more usable and consistent interface.

final visual design
OpenEd's Flipped Classroom whiteboard screen interface

Learned Lessons

When push comes to "pull"…, choose empathy.

Businesses sometimes get stuck in the mindset of selling a product and pulling customers in order to survive and grow. However, this mindset doesn’t account for the problems that users and customers actually have that motivate them to use a product. In consequence, certain ideas were implemented to force sharing, which potentially could demotivate a teacher from using the product, rather than an internal motivation to share a great product. OpenEd had a lot of unique value to offer its users that competitors did not have, but if we had focused on understanding the user and their problems, we could have made a stronger product that fit even more seamlessly into the lives of the teachers and students. Overall, I learned that working on stronger communication skills, suggestion of testing, and providing alternatives rather than passive lack of support and logical defense for ideas could lead to better results.

back to Project List
Other Projects
User Experience Projects
Visual Communication Projects