McGraw Hill Connect Prototype

The Situation

McGraw Hill Connect is a digital teaching and learning platform that saves students and instructors time. The particular goal for this was for studetns to be able to purchase required text books rerior to attending on line class, and log in to class.

Problems

Previous Connect was outdated, complicated and often confused users. The company decided to make Connect better.

McGraw Hill Connect Challenge

The design team in Paris and NYC were working separately, the product had a user testing scheduled for the following week and the team was running out of time and a Figma or Sketch prototype doesn’t feel real enough.

My Solution

During a daily standup meeting, I suggested that we stest with front-end development, creating interactive screens with HTML, CSS, and JavaScript. This meant our team needed to design what the product was actually going to look like, as well as its functionality, in actual code. I wanted to give users real form controls to test our design.

Front-end development Prototype

Prototype

Tools

• Bootstrap
• HTML 5
• CSS
• Javascript
• Sublime Text
• Photoshop

The result

Built a responsive, interactive and realistic prototype. The usability testing team was able to meet the deadline and conducted user testing with remote students. Not only it helped user testings, but also helped developemnt side pulling CSS directly from the prototype.

---

---