MBE QBank (Multistate Bar Exam) is a web app built to help students significantly improve their MBE score.

Littera velit nibh autem notare est. Duis parum dignissim in usus sed.

UX/UI Design

Front-end Development

Overview

Ashley Heidemann and Klaudia Psari own and operate JD Advising. They offer pre-law services, law school tutoring services, and bar exam services. Together they’ve worked with several law schools to offer these services free of charge to the students. To help augment there services and expand there reach they decided that they wanted an application that would distribute there tools to the masses.

qbank-study-guide-builder

My Role

How I fit into this project

Projects like this are what keep me excited to work everyday. I was part of a small team tasked at designing and developing a web app. The decision was made to build the app with React JS and so because I float comfortably from UX to development I was able to work on many facets of this project including:

  • Site mapping
  • Information archcitecture
  • Wireframing & Prototyping
  • UI design
  • Front-end development
MBE-notes

The Challenge

Find a solution

JD Advising had already been offering an in-person course to help improve MBE scores. They're course covered important MBE topics and strategies. Over time they’ve built a large user base ready and primed for an online version. The first steps included really digesting the many nuances around the MBE test.

MBE-wireframes

The Approach

The solution is here

JD Advising had already been offering an in-person course to help improve MBE scores. They're course covered important MBE topics and strategies. Over time they’ve built a large user base ready and primed for an online version. The first steps included really digesting the many nuances around the MBE test.

MBE-question-desktop-mobile

Front-end Development

Considering that the bulk of the designs had already been finalized, my first steps were to setup a proper development environment to begin building the system. I decided on an array of JS plugins to be built on top of the HTML5 foundation.

Front-end development tools

After discussions with Philip we decided to use Bootstrap, a widely popular boilerplate framework that will allow us to rapidly construct the various components. Bootstrap comes packed with tons of CSS3 and javascript-based interactions. To achieve more complex animations and animated interactions I used Greensock.js or GSAP / TimelineMax and ScrollMagic.

See the Pen Build Lineup Map - Lineups.io by Chris Samuels (@anycircle) on CodePen.

Lineups home page

After my portion of the project was completed Lineups then entered the heavy development phase. The app is being built with React and is currently still under development. Lineups has not officially launched yet but the marketing site is live. Visit Lineups.io