Picmonic Mobile and Web Apps (Shipped)

Enable medical and nursing students to find, learn, and remember complicated material.

Problems

  • Idea to production takes too long and is frustrating. No one knows what is and isn’t working.
  • It takes too long for people to find relevant content.
  • Not expanding to new markets (nursing and more advanced medical students) as quickly as anticipated.

Solutions

  • Teach the product team lean and data driven design methodologies, and the dev team about reusable components and patterns.
  • Improve wayfinding with consistent UI-patterns, a new information architecture, improved search, and a recommended content algorithm to help students more efficiently navigate the product.
  • Build a quizzing system with a spaced-repetition algorithm to expand to new markets.

Logistics

Team

  • 1 designer
  • 1 design intern
  • 2 data scientists / analysts
  • 2 backend engineers
  • 2 frontend engineers

Time frame

  • 6 months

My role

  • Project owner
  • UX research and design
  • Prototypes
  • Interviews / surveys / in-person testing
  • UI design
  • Documentation / testing
  • Developer grooming / handoffs
  • QA
  • Process training / team education
  • Design community outreach
  • Mentor

Tools used

  • Leuchtturm1917
  • Sketch
  • Zeplin
  • Invision
  • Keynote
  • Photoshop
  • After effects
  • Jira and slack
  • Google docs / sheets / forms / drive
  • Github
  • Devices

Process Summary

Research

  • Current vs desired state audits
  • User interviews
  • Surveys
  • Competitive analysis
  • Customer journey maps
  • a/b testing using google analytic events and SQL

Documentation

  • Design documents
  • Developer handoff docs
  • Hypothesis and test plans
  • Flow charts
  • ADA compliancy audit
  • Recommended picmonics algorithm
  • Spaced repetition algorithm

Prototypes

  • Invision clickables
  • Keynote prototypes

UI design

  • Created a styleguide and design system with reusable components
  • Components for mobile and web
  • Redesigned content discovery and wayfinding
  • Designed a quiz and spaced-repetition system that integrated with the core player
  • Redesigned the player for a better mobile experience

Process details

Lean process

A topic page was added to the learn flow and it hurt engagement

When I began at Picmonic they were going through a redesign they called v2. They had just finished implementing a series of designs from an outside agency, and people learning with the system hated it. The fallback was so bad that the old system was put back in place. The biggest complaint was that it now took more clicks to play the content people wanted than the old version.

I used the experience to teach the team the benefits of lean design methodologies instead of the waterfall approach that had just failed. We worked on implementing event tracking across the app and started a/b testing ideas to see if they moved key metrics we were looking at. This enabled us to refocus on the problem of wayfinding after a few process changes.

Example of styles, components, and flows I created for Picmonic’s design system

Find the content you want

One of the big changes was to the way we introduced new users to the product. When we were analyzing the behavior of people who purchased the product, we found that many of them wanted to understand the product before purchasing, and the fastest way they understood the product was to try it out.

We wanted to design and test a system that got a new user to try the product as quickly as possible. We designed and a/b tested multiple scenarios and found that the fastest way for a person to find content was to type a search into an input field.

An earlier prototype that let people choose between searching and browsing
The fastest and most accurate way to get people to start using Picmonic is with a search box and helper text

Expanding to new markets

One of the big things I helped with was expanding the product to new markets. Picmonic was doing well with 1st and 2nd year medical students, but struggled when it came to 3rd and 4th year students. They also had created nursing content but weren’t getting high conversions from nursing students.

I started by interviewing 3rd and 4th year medical students and nursing students who had used the product but hadn’t purchased. They mostly said the same thing. “We like studying with quizzes, especially critical thinking quizzes”.

We designed and tested a quizzing system that plugged nicely into the core loop and had people come in to test the prototype. It was overwhelmingly positive and we rolled it out site-wide, making sure to iterate with a/b tests in an effort to increase engagement on the platform.

The system has been successful, as Picmonic had higher numbers of nursing students registering than medical students after the systems were in place with higher than expected engagement numbers.

One of the versions of quiz we tested

Conclusion

By using consistent design patterns and using lean product design processes, like a/b testing features we were implementing, we were able to get the engineering teams velocity and morale higher than it had ever been in the past. By spending the time to research what the users needed and how they used the solutions put in place to fill those needs, we were able to expand to the nursing market quickly, and eventually saw nursing students bringing in more revenue than medical students. And finally, by researching and testing multiple versions of wayfinding we were able to reduce the initial time-to-learning metric which was a huge contributor to people signing up and paying for a subscription.

Next

Back to Ryan’s Portfolio

View Ryan’s Linkedin

Contact Ryan

Like what you read? Give Ryan Allen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.