Case Study, Mobile App, UI/UX Design, Web App

MentorLink Connection: How Our App Helps Student Athletes

MentorLinkConnection

Web App Development

MentorLink Connection is a nationally recognized team of mentors that helps high school athletes optimize their success during college recruitment.

  • Duration:
    June 2017 to December 2017
  • Platform:
    Web
  • Technology Stack:
    Ubuntu Linux, Apache, PHP, WordPress, HTML, CSS, Javascript
  • Plugins:
    WP eMember, WP payment gateway bundle, Front End PM, Appointments

Background

MLC provides offline coaching packages ranging from monthly subscriptions content and limited phone calls, to premium lifetime subscriptions with unlimited access to the mentor team.  They wanted to build an online companion app featuring e-subscriptions, messaging, and call scheduling, but their budget was not a fit for fully custom software.  We had to get creative.  Our promise was simple: we would deliver the most value possible within their budget by starting with a design and discovery phase.  

 

 

Design Work

Once we created a user story, we started analyzing WordPress themes and off-the-shelf plugins to assess how much of what’s already out there could be used to build a viable product based on the story.  Our research gave us confidence that we could customize existing components to form a fully-functioning tele-consulting app that would dramatically amplify MLC’s business.    

With the wordpress theme and plugins pinned down, we started designing a custom user experience around these tools.  See what we created for desktop (https://invis.io/C7BNLLF2M) and mobile (https://invis.io/XPBRIDWA4) devices.

 

 

Development Work

 

Membership:

We needed to build a membership site with highly-granular user roles.  On the user side, we needed 3 tiers of membership.  On the admin side, we needed mentors and admins to be separate.  We customized the WP eMember plugin for membership management and the WP Payment Gateway Bundle for monthly subscriptions and one-time payments through Stripe.

Appointments:

A core dependency of the application was a leak-proof appointment booking functionality that synced with google calendar.  We customized the Appointments plugin from WPMU to bring this to life.  We added multiple appointment providers and allowed each provider to set their availability to specific hours and days of a week.  To help prevent customer complaints, we further tweaked the plugin so that appointments were only made official after manual approval by the provider.

Messaging and Calls:

We envisioned that the bulk of the customer’s time would be spent interacting with the providers directly on the platform.  To accomplish this, we customized the Front End PM plugin into a full-fledged messenger.  We added a 3-column view to make user profiles easier to access during conversations, and added  javascript to make it feel as dynamic as facebook messenger when conversations get lengthy.  We also added a note popup when users click on a scheduled call, so that both sides could both take notes during a call and also see their past notes log.  

IN THE END…

By the first day of launch, the MLC team was so confident in the product that they demo-ed to 8 teams.  They received overwhelmingly positive feedback.  In the future, we plan to optimize the user experience on mobile devices and add tokbox for video calls to complete the transformation of MLC into a tele-consulting software.

 

 

We are a team of UI/UX designers, product designers, full-stack developers, and ex-founders of companies. Together, we build web and mobile apps for healthcare and ecommerce companies. Contact Topflight today and we’ll discuss your next project!