Case Study: Lexile Tracker for Achieve3000

The Lexile Tracker was a feature that was pulled out from a larger project called the career center which was unfortunately deferred. The product team decided the Lexile Tracker would still be an impactful feature and wanted to at least build that since the rest of the project was deferred. Just for some context, a Lexile score is a numeric representation of a student’s reading ability.

The Lexile Tracker gave the students a visual representation of their current Lexile and a way to track their progress. We ended up making two different versions of the Lexile Tracker. One was a more simplified version to give the student a quick view of their current Lexile when they log in to their account. Then when they clicked an overlay, they would get an expanded/detailed view of the Lexile Tracker in a modal. We also included important milestones that the students could toggle on or off to see where they need to get to. We also gave the students the ability to click on the Lexile adjustment dots to see what activities they completed and their scores for that month.

The initial design was done by an outside design agency, and I took what they had done and used that as our starting point. Based on some internal feedback and discussions I went through several iterations of the design. Then once we felt like we had something to show we conducted several design validation interviews with external and internal participants.

The design went through some more iterations after the interviews and once it was ready for development, I did the front-end work for it by hand.

The biggest challenge for me was figuring out how to create the graph portion of the Lexile Tracker. I ended up using SVG graphics to build them which I had never used before so there was a lot of trial and error and tinkering to get it right.

Once I completed the front-end work, I handed it over to the dev team so they could work their back-end magic and make it functional. There were still some tweaks along the way as there always are and I was heavily involved in the entire process to make sure it was reflecting the design correctly.

This was the original design of the Lexile Tracker designed by the external design agency that we used as a starting point.

These are the early concepts I designed which evolved over time.

I went through quite a few iterations as I tweaked things along the way and figured out what to include and what to leave out based on user feedback. One issue we came across was that the early designs used a darker ui but based on feedback we heard, students and teachers wanted the ability to print it out so the dark ui wasn’t going to work so we switched it to a lighter ui to make it legible for printing.

This was the simplified version that the student first saw when logging in to get a high-level glance of their current Lexile. Then if they clicked the ‘Click for details’ overlay the were presented with the full version:

These are screenshots of the HTML files that I handed off to the developers. I built all the individual pieces the dev team needed, and they took them and made it functional.

These are screenshots of some of the front-end code that I handed to the developers.

I initially designed the Lexile Tracker in Photoshop and then ended up switching to Adobe Xd which I had just starting using as my primary design tool. I used Dreamweaver to do all the front-end development and the inspect tool in the browser to tweak things as needed.

This was the first project I had ever done where I had to visualize data in a graph so that was challenging.

There were a lot of pieces, and it was a technical project but I’m happy with the result and it was also a great learning experience. When it was released, it received a lot of praise from the teachers and students which we were very excited to hear.