Bringing Life to Learning
Keeping K-12 students engaged in sometimes dry topics can be a struggle, but guiding their focus to the elements of a lesson that you want them to focus on is critical to keeping them on track with the class.
In my time at QuantHub, designing for this audience was critical, and in that effort I introduced a few key changes to their activities.
- Clear contrasting colors guiding their eye to interactive elements, and de-contrasted treatments for less important elements
- Clear differentiations in scale between elements of importance, keeping them focused on the right content zones
- I introduced key animations on certain elements to bring some pageantry and “fun” to the experience. The gamification elements ceased to be static information readouts and became active parts of the user’s enjoyment.
It was also important to design an interface that could work within an LMS that would crush the interface as small as 768px at times, even on the user’s desktop or Chromebook.
Helping QuantHub Enable Teachers
As a fast-moving startup QuantHub had a lot of spinning plates, one of which was an ever in-progress set of new and updated features for teachers on the platform. Over time that experience had become messy and uncoordinated, with different pages having different look-and-feel, verbiage, and even different branding. I undertook a concerted effort with three objectives.
- Modernize and standardize the pages appearances
- Standardize around user-friendly verbiage that wasn’t stuck using jargon
- Refine the visuals so that these information-dense interfaces become more useful and navigable.
Alongside these objectives we kicked off an initiative to re-think and rebuild the more troublesome feature sets and pages holistically with the user in-mind.
We included our partners in the industry and teachers using the platform in an initiative that we called our “Customer Councils”. In these working sessions we demoed designs, discussed changes in the industry and with students, and collected valuable feedback on the platform and our ideas.
Guardian Preparedness Check
The Guardian Browser is Meazure Learning's custom Chromium-based browser built in Electron and used for high-end test proctoring. It’s a bespoke high-security web browser built to lock down a user’s system while they’re taking an academic or professional test. The app runs a two-way video and audio stream while sharing the user's screen and up to two additional camera angles, all threaded and compressed locally.
In order to ensure this process could run smoothly, Meazure needed a new method of testing a user's hardware and connection that would be future-proofed regardless of new hardware standards.
The new product would also need to represent a substantial upgrade in fit and finish over the previous solution, incorporating new brand standards and accessibility requirements.
Our research led us to a design whereby the user is directed to select their hardware inputs and then undergo a one-minute benchmarking process. Using the information gathered during the selection and benchmarking, we are able to inform the user of their level of compatibility with our software and processes.
While the user is taken through this process, they’re presented with a pleasant amount of color, variety, animation, and information. Even though they’re asked to wait while a benchmark occurs, they never get bored and even learn a few helpful tips and tricks while they sit.
If the user falls below our minimum specification, they’re given ample and well-phrased solutions that they can use to fix their issues and retest. These instructions are also linked to our support systems and information libraries, ensuring that no test taker is left out.
Examity Overhaul Email Redesign & Recode
Following the successful redesign and rebranding of the core Examity product line, I was tasked with overhauling the Examity email library. I sought to bring the same user-centric and component-driven design process to this task that served us so well in the overall redesign. Emails are a tricky beast; there’s no true coding standard, and each email client renders them differently in subtle and not-so-subtle ways. For this project, hardware testing across multiple devices, browsers, and operating systems was a must.
The designs shown here were implemented with success (and some fanfare) as both dark and light mode compatible in all popular clients. The process of coding and QAing them was quite the learning experience.
Forecaster 121
How do you differentiate the brand of a luxury condo complex in a city where a new one pops up every week? Finding an answer was the task when I was asked to handle the marketing for Forecaster 121.
The process of developing the marketing for a building is a pretty amazing process. Not only are you marketing to a prospective public that won't see the home they've pre-purchased for months or even years, but you're marketing to the city itself. Local zoning, air rights, and feature and historicity proposals—there's a lot to consider when building in the heart of a city, and wooing the city board is almost as important as wooing prospective home buyers.
With Forecaster 121, I went with a traditional color combination that speaks to luxury: gold to speak to quality and black to accentuate the gold and provide a contemporary sharp contrast. Combining color identity with a sharply modern sans serif font and a modernist block logo helped to complete the initial identity, but there was a lot left to do.
This project was really fun because I got to stretch my legs in every area of design, from photography to print to digital. I was building a responsive website and mail templates at the same time I was designing 60-foot banners meant to hang from the sides of high-rises. I also got to help make proposals to the city look all the more professional and convincing, which really helped me learn the nuances of designing within the constraints of government needs.
Rapid Prototyping My Own Portfolio
The design process is an exercise in research and understanding as well as design. A design portfolio is meant to be a piece itself, and the experience that it delivers comes across just as strongly as any of the projects or stories it tells. In rebuilding this site, I wanted to make sure it came across as human, striking, and unique. Being personal but also professional is a tough needle to thread, but I decided to try to do it in a weekend.
First was brand identity. I chose a combination of strong, basic additive colors that would be instantly familiar but still impactful to anyone. It was similar to, but more constrained than, the palette used in my last portfolio. I followed up with numerous tests for font combinations as well as some blocking to see how the colors contrasted with imagery and type. I settled on a combination of the tried and true Open Sans and the playful Bebas Neue, which provides a comic-like blocking to my headlines that suits the primary colors.
While researching color and type, I was looking at my "competition." In many ways a portfolio is a statement of fashion, with different professional careers opting to express themselves in different ways. I browsed many award-winning sites from the past few years and mocked up treatments by hand on a trusty dotted mini-sketchbook. This not only helped me determine content flow and layout but also started the process of winnowing down what content I would want to display and how. It also gave me a window into the whys of other professionals, as well as what was working and what wasn't.
There are limits to what can be blocked out by hand; animation and complex navigation styles that don't map 1:1 to a piece of paper exist, but they are fast and can really narrow down scope and provide a basis for further work. In the end I had mocked up 10 sites as well as my own, while notating what worked, what didn't, and what kinds of technologies and features I believed I could work into the process.
Rapid prototyping of designs is a big benefit of modern design software. For this project, I used Adobe XD to do the early blocking. From there I was able to create clickable prototypes that helped me determine scale and flow, as well as figure out a bit of my navigation. There are limits to this kind of prototyping, whether it's technical or structural. For instance, XD is incapable of the kind of within-page links that I use on this site. But, much like the sketch mockups, it helps to further clarify the final design as well as present weaknesses and strengths. With the prototype built, I moved on to a semi-final treatment of the design itself, still using XD but featuring functional placeholder content and text.
The box below is a version of my early clickable prototype. Go ahead and try it out (It's interactive)!
