Snackable CE
An e-learning platform for professionals
Role
UX/UI Designer
Company
Snackable CE
Timeline
6 weeks
Tools
Figma, Adobe Photoshop, Miro
Overview
Client Expectations
A mobile-first, e-learning platform that delivers continuing education (CE) courses in bite-sized pieces to help early to mid-career dentists find and complete relevant and engaging CE content conveniently.
Create a hi-fidelity prototype that's ready for user testing.
Key features must include:
1.) Sign Up Page
2.) Micro-learning Modules
The ability for users to browse diverse CE content, select a course they need to receive credit for, and complete it.
3.) CE Tracker
The ability to store and add to their existing database of certifications.
Our client's vision
Make learning and growing as a professional, a daily habit
Business Needs
User Needs
Create a mobile app prototype for dentists that allows for usability testing.
1.) Complete CE credits to maintain an active dental license
2.) Find CE content useful to dentists
Key insights from research provided by Snackable CE
What's wrong with CE's today?
Inconvenient and time consuming to schedule and attend conferences/classes to receive credits
Professionals must schedule and attend classes on their own time, outside of work.
Outdated delivery formats & methods
Universities provide lectures in a classroom professionals have to attend to earn CE credits.
Difficult to find engaging content
Professionals want more engaging content instead of listening to lectures.
A user flow was created in order to understand how dentists currently complete and track their CE credits. The pain points (outlined in red) occur when dentists are too busy to schedule classes to receive CE credits outside of work and the difficulties of keeping track of their credits.
How do dentists complete and track their own CE's currently?
Click to enlarge
Before designing what the website would look like, I wanted to establish the layout of the application so I created a site map. We decided on 5 main bottom navigation options: Account, Library, Home, Live (lectures), and Notifications.
Laying out the foundation
I created task flows for 3 of the key features our clients wanted in the prototype in order to lay out the steps to finish the task.
Understanding the flow
I looked at sign up pages, learning modules, and trackers, from popular e-learning platforms and subscription based apps.
Our design inspirations
Sign Up Pages
We drew inspiration from Disney+ and Netflix for our sign up pages.
We wanted to make sure the onboarding process was uncluttered, orderly, and engaging.
Micro-learning Modules
Coursera and Udemy's course cards include the title, the ratings, number of reviews, and a progress bar that tracks how far into the course you are.
Trackers
SignScoot shows a tracker with multiple progress bars, indicating the progress of how far you've completed your documents.
Apple Watch's fitness tracker keeps track of how often you stand, move, and exercise.
I started the visual process by brainstorming the layout of our app. I focused on five main screens of the app: sign up, home page, live lectures, CE tracker, and notifications.
Brainstorming, sketching
Before jumping into hi-fi designs, I wanted to create a style guide that would make sense for an e-learning mobile app. Using other apps as inspiration, I established our voice, logo, color scheme, UI components, and typography before designing.
Determining our brand
Voice
Knowledgeable: We know what we are talking about an are confident in our abilities to teach these topics.
Approachable: Whether it's the user's first time or tenth time getting their credits done, we want to make the process as headache free as possible, which means making sure that everything is clear and easy to follow.
We want to sound like our users' favorite teacher.
Logo
-
Simple, flat design
-
Minimal colors
-
Nothing too cartoony
-
Polished, professional, educational
Styling
Oxford Comma is utilized.
Numerical values are listed.
All words (except prepositions) are capitalized in headlines.
Typography
Color
Primary: #243859
C: 60%, Y: 37%, M: 0%, K: 65%
R: 36, G: 56, B: 89
We chose a darker shade of blue as our background because darker shades lean toward ideas of authority and importance, which is ideal for an educational space.
Secondary: #FFAD32
C: 0%, Y: 32%, M: 80%, K: 0%
R: 255, G: 173, B: 50
We chose gold as our secondary color because this shade provokes a feeling of success and is associated with champions.
Components
Click to enlarge
After establishing our style guide, I jumped into creating hi-fi screens. I added and changed small elements on the higher fidelity mock ups based on client feedback.
Wireframing to hi-fi
Welcome Page
Snackable CE's logo
A preview of features the app offers
Login
Added a create account option
Sign Up
Timeline of how many steps are left in the sign up process
Option to receive email updates and offers
Subscription
Three subscription plans: Annual, Monthly, or "A La Carte" (pay per course).
Description of subscription plan options
A La Carte option was moved to a separate page
Home
Personalized courses
Relevant news articles about dentistry
Small tracker that takes you to your account page
Upcoming Dates section was added to preview owners of important dates coming up
Cards were enlarged for visual hierarchy
Account
Account tracker with three progress bars
Summary of required, completed, and remaining credits
Ability to view and upload external credits from other CE's
Reduced number of trackers to one main tracker for clarity
Course Library
Course cards that include: title, rating, price, and progress bar
Course cards were enlarged to create more white space and minimize clutter
Course Quiz
Multiple choice quiz question
Preview of how many questions left in the quiz
Boxes were created for each answer to create enough space for users to click
Selected answers are filled to indicate an active container
Live Lectures
A selection of live lectures featuring real industry professionals
Upcoming lectures that can be bookmarked
Past lectures that can be viewed
Date and time of upcoming lectures were added
Notifications
Notifications of upcoming lectures, important dates, course reminders, and credit info
Notifications are separated into 'New' and 'Earlier' to differentiate new and old notifications
Final prototype.
Snackable CE
On-boarding process that gathers relevant information from dentists.
Sign Up
Course library, personalized for the users' needs based on CE credit information.
Micro-learning modules with "bite sized" lectures and quizzes.
Microlearning Modules
Industry experts giving live lectures allowing users to continue to learn and grow as professionals.
Ability to add and connect with other professionals.
Live Lectures
CE Tracker
CE Tracker that shows the user's the progress toward renewing their dentist license.
Ability to upload external credits from other CE's.
Notifications to remind user of important information regarding their CE progress.
My final thoughts
Our client's wanted us to build a mobile app that focuses on their goal: to make learning a daily habit. My team and I were able to successfully hand them a prototype that they were able to test immediately afterwards.
Gone are the days in which they have to sit through a lecture at a local university after a long day of work. We were able to build a continuous education app that gives dentists "bite sized" information and the ability to earn their CE credits one click at a time.
1.
Turn Snackable CE into a platform for all licensed professionals.
2.
Messaging system with "friends."
3.
More ways to connect and interact with other industry professional within the app.
4.
Add message boards and forums.
Because our clients want to eventually turn Snackable CE into a universal platform for various industries, incorporating more social media capabilities seems crucial in connecting the users. Allowing people to connect with colleagues through message boards, private message, etc. would help motivate people in completing their courses.
What I learned
What I learned from this project was how to manage opinions from stakeholders.
In the beginning, our clients, who are dentists and business professionals, were very adamant about certain colors, design layouts, amongst other things.
I learned to trust my expertise in design principles and continue to advocate for users by presenting stakeholders with evidence-based solutions.