Wireframing for Healthier Teeth
Beginex Design Hackathon
September 21, 2019
CLIENT: Spurheal was founded in 2016 as is a growing health app leveraging mobile-technology to bring free dental and medical services for millions of people in underserved areas.
CHALLENGE: Create an intuitive and efficient way for potential patients from underserved communities to sign up, search, explore, and book, free to low-cost medical appointments.
And, with a team of six contestants, do so within a four-hour timeframe.
TOOLS: Sticky Notes, Paper, Sketch, InVision, Design Studio
Phase 1: Team Building & Research
The first challenge the Spurheal project presented had nothing to do with the project itself but with getting everyone on our ad hoc team on the same page.
Taking the initiative, I asked everyone at the table to say their names and to divulge their past experiences with user experience design if any. I then wrote down everyone’s first name on a torn sheet of paper and passed them around. Doing this made communication easier.
I also was very deliberate in making lighthearted comments and putting my teammates at ease. Research from psychologists at Yale, Harvard, Berkeley, the University of Oregon, and elsewhere, shows that more cordial and deliberate teams actually underperform teams that are more casual and open with one another, so I wanted to employ an easygoing attitude to anticipate anything falling into a rigid mold right away.
Things really opened up when, after we hit a roadblock determining which features to prioritize, I invited everyone to create an affinity map on the wall using sticky notes on the walls.
We created two charts: one on the left was for reference, to show what problems and questions our users faced in acquiring dental care. The one on the right doubled as a chronological user journey, detailing what action items our users accomplished to resolve their problems.
This proved wildly helpful for helping develop a clearer perspective on features and issues, and allowed us to collaborate much more easily as we were all looking at the same thing.
Phase 2: Design Studio
Next, with the affinity mapping exercise in mind, we did a design studio exercise. This involved each of us creating multiple sketches for features within 10 to 15 minutes.
We then reconvened, and collectively agreed to wireframes the ideas we liked with a star. Following that, we assigned each wireframe a number, indicating where within the user flow they would appear.
Some truly exciting ideas came out of this process. One idea was to gamify oral hygiene through using streaks and congratulatory badges as a reward, another was to let users create a photo of their open mouth to get a preliminary diagnosis.
Phase 3: Prototyping & Presentation
I was responsible for creating the final prototype in Sketch, which was then exported to a teammate for uploading into InVision for the final presentation.
First, I took the liberty of amending the given style guide. The existing style guide called for white and gold on black, which is associated less with dentistry and more with gyms and masculinity.
I opted instead for an unsaturated light blue that better evokes dentistry.
I also changed the font to different weights of Quasimoda: a softer, easier to read sans serif. I also did away with the lambda in ‘SPURHEAL’, because it drew attention away from the ‘plus’ logo, and lambda in Greek is works in English as the letter ‘L’. ‘Spurhell’ would work great for a death metal band, but not a dentistry app.
From there, and using the approved wireframes as reference, I dove into creating the mockup, as shown below. Some of the fonts may have shifted during their being handed off and uploaded to InVision, and I wanted to preserve that issue here.
🏆We won the hackathon! I am proud to say that our team not only won Most Innovative Entry, but also Best Overall Design.
📝Assume what’s intuitive, isn’t. It was tempting at the very beginning to jump right into ideas, but I saw right away that that risked creating tension at the very early stages: especially when we hardly knew each others names. Committing our names to little name tags, and then committing our thoughts to Post-It notes, worked wonders for ideation and group cohesion.
😌Allow others take the initiative. When you’re starting a team project, it’s tempting to jump in with all kinds of ideas and prove that you’re the most valuable player. But that can make people shut down: you’ve got to warm people up, bit by bit, and give them increasingly larger stakes in the idea until it goes from a project to our project. I think that that may have given our team a distinct advantage.