JU E-Learning App
The JU E-learning app was built for students to join a Stipend program where they have a limited amount of time to watch educational videos and earn points for them. Once they accumulate enough points they can trade them in for a reward - currently a $100 check.
I managed and directed user research, interviews, and testing. I created all visual designs from the first sketch and wireframe to the final and beautiful and user-friendly e-learning app.
My Role
UX UI Design
User Research & Testing
Timeline
2017 - 9 months
Company
Jerusalem U
business goals & Strategy
The Challenge
JerusalemU is an Israeli non-profit whose mission is to educate young jews about Israel and Judaism. They have numerous channels through which they provide educational materials, but their core offering is an e-learning application through which young students can join a Stipend program and explore premium content. The original platform has worked to test the need for a product like this, but it was not intuitive user experience and the program suffered from low completion rates.
Design Goal: Engagement. Experience. Customization.
Build a new, exciting and engaging learning platform giving the user high visibility into the content available and progress until completion.
User Discovery & Research
Our main users in the case were the students currently in the program. By interviewing them through Zoom calls, we were able to identify a common pattern with regard to what JU was known best for – content. Almost everyone we spoke with remarked on the quality of content that they are able to get from JerusalemU. But the users found the requirements of the Stipend program confusing.
Also, The Education team made us aware of the cheating issue that has plagued the Stipend program for some time now as a result of the forced video playlist.
Clearly, the students needed more clarity into the program and control over the content they watched so they would feel more connected and engaged.
the solution process
Definition & Brainstorming
With our findings from the user interviews, we began writing requirements and mapping them out as user flows.
Next, in order to make sense of all the requirements and refine the best solution, we held card sorting and whiteboarding sessions with the team and various stakeholders. Together we evaluated and prioritized the content, and by the end of the sessions, were able to form the basic structure for the website which worked with our system and projected timeline.
Requirements, User flows, and Wireframes
user research
Testing & Validation
With our product sketches in hand, we took to the drawing board to craft prototypes of the core flows. We landed on a basic framework that would allow us to build screens and share them with a few of our users.
We selected a bunch of students who were signed up for the next semester of the Stipend program and offered them an amazon gift card to participate in the testing sessions.
We ran the 5-second test in which the participants were shown the home page for just five seconds and then answered questions based on their memory and impression of the design. This test allowed us to measure how well the design communicated our message.
Next, we ran a bunch of click tests where we presented the participants with a working prototype and asked them to complete tasks using the design. The results generated a heat map in addition to the recordings which we then analyzed to assess the effectiveness of the links and content hierarchy.
Thanks to 5 second tests we were able to see that the value proposition was clear from the design screens.
design strategy
Product Design
Based on what we learned about user behavior, we redesigned the experience to focus on customization. The old Stipend product forced a student to pre-pick what they wanted to watch and then they would only have access to that course. The new platform allows students to create their own watch lists from the larger catalog of content, and watch accordingly.
The new platform allows a student to track their progress by points, and choose new classes based on their target goal of 100 points. We learned that by allowing students to see the progression and pick what to watch it drove further engagement with the content.
Building the product
Visual Design
After refining our user flows, and testing the concepts, we felt confident building out our final screens.
We focused on 4 main user touchpoints: before signing up to the Stipend program the student would land on [1] the home page and explore [2] the library pages for the available content and watch trailers. Once the student has signed up for the program the focus would shift to [3] the user dashboard and [4] the video class flow for each video the student views.
Feature Spotlight
Dashboard + Class Flow
The dashboard is the personalized login area where students can select the videos they want to watch, keep track of their progress, or create a watchlist of specific videos they want to watch. In order to earn points for a video class, the student is required to watch the video, read a summary and take a quiz.
Below is the UI flow for a student watching a video class;
Takeaways
E-learning applications like Lynda and Skillshare are true works of art. We came into this project with the goal of building a product of that caliber. We realized pretty quickly how difficult that can be. However, after learning more about the JerusalemU and their users, we were able to craft a product that is specific to their needs and offer a delightful user experience.
