Historik

Digital Learning Platform for All Things Historical (UI/UX Design)

Image alt tag

The Product

Historik is an online learning platform dedicated to providing people of all ages with quality history courses. Course range from general (i.e. An Overview of US History) to more in-depth (i.e. History of the Industrial Revolution). Course content is built around a combination of videos, readings, interactive content, and quizzes.

The Problem

Learning history is harder than ever. The educational appetite is there but the resources are limited to scattered Youtube videos and history books. While many of these are wonderful, they lack the interactivity of the modern age. Additionally, people’s trust in reliable sources has been dwindling.

The Solution

Provide a modern, interactive, and fun online platform for learning all facets of human history.

My Role

UX Research, UX Design, UI Design

Project Duration

January 2023 - March 2023 (~8 Weeks)

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the User
User Pain Points

Boring

History as "boring" is an age-old stereotype. But it's to be expected when the learning model is sometimes nothing more than a monologue from a monotoned professor.

Vague & Confusing

Learning history isn't always straightforward, especially when courses are constructed around a never-ending list of hyper-specific dates, names, and complicated concepts.

Subpar Study Tools

Many people use history platforms to aid in studying. But all too often, these study tools provide answers without explanations.

Personas & User Journeys

For this project, I built personas and user journeys for two types of users. The first persona was for the adult learner, someone coming to the Historik platform solely intending to learn. The second person was the student coming to the Historik platform to learn and study.

Image alt tag

Problem Statement: Jennifer is a busy engineering student, who needs a convenient study tool because she needs to ace her tough history class.

Image alt tag

Problem Statement: Judd is a bored, but curious retiree who wants to take challenging online history courses, so he can keep his brain stimulated and engaged.

Image alt tag

Jennifer's User Journey

Image alt tag

Judd's User Journey

Historik

Historik Competitive Audit

Competitive Audit

An audit of a few competitors’ products provided direction on gaps and opportunities to address within the Historik App.

Historik

Historik Ideation Exercises

Ideation

I ideated using Crazy-Eights and How Might We(s) to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on bridging the gap between learning and studying and increasing the “fun factor” of learning.

Starting the Design
Paper Wireframes
Historik

Historik Digital Wireframes

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the Historik App. These designs were focused on navigation and ease of use for returning users.

Historik

Historik Low Fidelity Prototype

Low-Fidelity Prototype

To prepare for usability testing, I created a low-fidelity prototype for returning users who wanted to continue a course they started at an earlier time.

View the Prototype

Usability Study: Findings

In order to better understand the app I conducted an unmoderated usability study with 5 US-based participants. The study was done remotely.

Navigation

Users struggled to navigate through the flow and found it difficult to find their next assignment.

Video Features

Users requested more features for the video section that wasn’t present in the original prototype.

Text-Heavy

Users felt as though the reading section had too much text and would benefit from some imagery.

Refining the Design
Updating the Mockups
Image alt tag

I added several design changes to the lesson page. First, I created a floating header that indicates the lesson's progress. Additionally, I defaulted the location to where the user left off instead of starting them at the beginning of the course.

Image alt tag

Updated the design of the video page. Added several features requested in the original mock-up, including a button that allows the user to rewatch a video.

Historik

Historik High Fidelity Prototype

High-Fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

View the Historik High Fidelity Prototype.

Accessibility Considerations

Clear labels for interactive elements that can be read by screen readers.

High contrast colors to increase readability for all users.

Implementation of a variety of assistive features during the video sections such as, (slow speed, transcripts and closed captions).

Responsive Design
Historik

Skybot-Sitemap

Skybot Sitemap

With the app designs completed, I started work on designing the responsive website. I used the Historik sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Historik

Responsive Designs

Responsive Designs

The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit the specific user needs of each device and screen size.

Going Forward
Takeaways

Impact

Users shared that the app made learning history both easier and more fun.

One quote from peer feedback:

“I love the idea of this app, if it was built and sold on the app store I would totally buy it.”

What I Learned

I learned several things throughout this project. First, I learned the importance of user research and designing according to a user’s need not your preferences. Second, I learned about adapting designs for all screen sizes and usage cases.

Next Steps

  1. Create more user flows for different usage cases.

  2. Further, develop the learning components of the platform. This includes the video, reading, interactive, and quiz sections.

  3. Provide incentives and rewards to users who successfully complete courses.

Let's Connect

Thank you for your time reviewing my work on Historik! If you’d like to see more or get in touch, my email is emrahmey@gmail.com