The Loft Guides

How do you make project based learning simple for students and teachers? Project based learning is an emerging education technique where students take on real world projects to learn directly from experience.

The Loft is an e-learning app designed to facilitate project based learning. Students create their own projects by setting goals and gathering feedback from peers and teachers, while following a guided curriculum. As ForgeWorks’ Design Director and product lead on the Loft, I set out to help define a set of tools for this emerging teaching method which centered around the core offering of Guides. 

Client: Northwestern University

Role: Product Design Director

Skills: Product Design, UX Research, Information Architecture, Visual Design, Team Leadership, DesignOps

Team: Product Design Director (me), Product Designer, Product Manager, Front-end engineer, Architect

Timeframe: 1 year

Guides offers remix-able design frameworks for project teams. The Guides landing page displays a list of current guides you have subscribed to as well as a browsable list of public guides available for download and personizaton.

Drilling down into your organization’s guide library shows all the guides you have subscribed to and personalized. 

The individual guide view has a table of contents tree view, editing and sharing capabilities, and a comment steam for team members. 

When personalizing your team’s version of a guide you have the ability to use your own custom branding to make it your own. 

Goals are an additional project management layer to the full Loft platform. A default set of goals that align with the guide can also be personalized through the guide editing view. 

The Loft platform is a fully responsive SaaS-based application based on Google’s Material design. 

The full Loft platform shares a consistent branding experience through a clear and easy to read set of marketing landing pages. 

Process

Over the course of 6 months I lead a team of product designers and UX researchers through a design process that started with discovery where we landed on a refined problem statement all the way through to ideation, prototyping, and testing. 

Discovery

Working directly with professors at Northwestern University who are currently practicing project based learning was a great resource. We started by creating simple scenarios to define the issues and map out simple ways to address them digitally.

Example outputs:

Explore

These scenarios evolved into paper prototypes that served as the basis for cognitive walk-throughs with undergrads. This was a quick way to suss out problems in the designs without spending too much time.

Example outputs:

Ideate

From there, higher fidelity wireframes were created and continued to be tested and iterated until designs for each feature reached a point where the visual design was defined enough to be developed into a working application.

Example outputs:

Results

Working along with researchers and developers, we integrated design ideas from sketches to prototypes to high-fidelity visual design in Sketch. Our team worked quickly and agile with each member wearing several hats. One day a developer may be suggesting UX, another a researcher may be presenting design ideas. My job was to bring all these design ideas together and create a cohesive digital product.

The Loft is currently in closed beta but several clients have been successfully using it for several years. The project is ongoing and continuing to develop at a rapid pace as the industry changes and becomes more defined.

DFA

Launch of the product initiated a long-term partnership with Design For America.

2 weeks

Loft Guides landed its first customer within only weeks of the launching the beta version of the platform.

EDI

Quickly became the home for the curriculum of several classes in Northwestern’s EDI program.