From concept to launch in 8 weeks
“We need this yesterday.”
My first project with Medify was to develop the “BMAT Grader”. This would allow users to take past papers of the BioMedical Admissions Test (BMAT), mark them, and get explanations for any questions they got wrong.
We had a total of 8 weeks to launch this—I joined in early September, and the actual BMAT took place on November 2nd, so there wasn’t much point in releasing after that.
This project had 3 parts to it:
- The UX of the app itself, including wireframes and user flows
- The beginnings of a new visual style and branding
- A from-scratch custom CSS framework (their existing CSS was a complete mess—their words, not mine).
Although each part was needed to launch the finished product, they were able to be separated enough to be worked on individually and concurrently, instead of a waterfall approach. This made it possible to get all of this done in the first 4 weeks, leaving the second 4 weeks for development, and successfully meeting the deadline.
We started with wireframes and went back and forth a lot to minimise the number of features needed for an MVP. Although most of the work was remote, I was able to meet the CEO Sajeev in London a couple of times—when possible, I always prefer to do collaborative work in-person.
Since I was designing the visual style and writing the CSS framework simultaneously, as soon as the wireframes were done, we quickly converted them into real code in a couple of hours.
With 5 days to go to our hard deadline, we successfully launched the BMAT Grader.
Crafting a coherent product suite and brand
Bringing everything together
During the BMAT Grader project we had started on a brand refresh, but didn’t have time for a complete overhaul. After we launched, that became our new focus.
Medify, along with everyone else in the healthcare education sector, used a dull blue colour and the font Lato as the main trademarks of their brand.
Spot the difference (hint: there is none).
In distinguishing Medify from our competitors, we wanted to highlight a few traits that defined us:
- High-quality content, despite the cheap price tag
- Useful feedback via data visualisations
- A focus on user-friendly and intuitive design
- Bold, future-facing vision for the digital world
However, we were already serving 1 in 3 UK students, so we didn’t want to throw away the existing brand completely. We launched the new branding in 2017.
-
2016, before I joined.
-
2017, after the brand overhaul.
2016, before I joined.
Coding a custom BEM-based CSS framework
I can’t believe it’s not Bootstrap!
The original Medify website used a modified Bootstrap for its CSS framework—a typical situation for a startup. However, Bootstrap has a couple of problems that make it unsuitable for startups beyond the early stages:
- To veer away from Bootstrap’s visual design, you still need to include all the CSS for their design choices, and then additional CSS to override them. This leads to weight CSS and longer load times.
- Bootstrap was first released in 2011, and has retained pretty much the same syntax since its release. CSS syntax has improved significantly since then, particularly with the idea of Block-Element-Modifier (BEM) syntax.
So in almost every situation I find myself in now, I find writing a custom CSS framework from scratch not only results in better CSS, but is actually faster to develop than using a framework like Bootstrap.
So that’s what we did for Medify.
I wrote comprehensive documentation (ala Bootstrap) so that the devs could implement new features using the framework without needing my help.
Designing insightful data visualisations
Not just a pretty datum
We took a great deal of time and care preparing data visualisations that would be helpful and insightful, not just pretty. Repeated iterations of user testing helped us get closer to our goals. This video demonstrates some of the small UI interactions.
We then began on the complex task of creating the data visualization “widgets,” each with a particular insight as a goal. We began with sketching, wireframing, and prototyping, and then I built the widget templates using HTML, CSS, and JavaScript. The templates were then handed over to the development team to hook into the database.
I actually took the UKCAT last year, and while studying for it I plugged my practice data into the widgets to get feedback even though they weren’t fully developed yet. This dog-fooding let us identify which widgets were most useful, and make some important changes.
The most impressive widget takes the score from a mock paper, and compares it to a matrix of other users scores in that same mock vs. the scores in the real test. The widget then spits out a remarkably accurate prediction of what the user will score in the real test, which gives valuable information about what universities may be available to them (or how much harder they need to practise).
