Teddy Laguerre
UX designer

Stack Maps

Desktop interface design for a video library and player page in order for it to be more engaging for the user to learn coding

Image alt tag
Overview

Overview

StackMaps is an online learning portal for developers on learning new ways to implement sections of code. The client Central Inventions, which has previously worked with Moment Studio, needed additional pages designed for their platform.

These pages included a page with a video player and a page with a list of the available videos, separated by level and content. Our team was brought onboard to assist in the creation of UI iterations of these screens for their platform.

Stack Maps

Challenges

StackMaps has a new video feature within their portal. The company, Central Inventions Inc, would like to enhance the feature's UI. They need near-term improvements and the developers are using Bootstrap. My team and I needed to implement a video player and a list of video screens. The big challenge was creating the UI iteration for these screens and using only Bootstrap components. We also had a tight deadline which limited time for iterations/testing.

Solutions

Visual interface design for StackMaps' new video feature using Bootstrap guidelines to facilitate and speed up developer handoff.

My Role

UI/UX Design

Collaborated in a team of 4 designers.

Tools

Figma

Timeline 2 weeks.

Process

Wireframes

Style Guide

Hi-fidelity designs

Developer Handoff

Define

Debrief

From the client debrief, our team was informed about the following:
Main persona: Level 1 students learning to code in Python.
Project requirements:

  • Must be based on Bootstrap guidelines.

  • The client wants the pages to be more engaging for users and design a visual UI.

  • The user wants to know whether they have watched a certain video or not.

User Story

  1. As a programming student, I want to keep track of the videos I have already watched, so that I don’t waste time rewatching what I’ve already completed.

  2. As a programming student, I want to watch this video without distractions so that I can focus on learning Python.

Wireframes
Stack Maps

Wire Frame



Each team member came up with several solutions. My team met on Figma for a design critique session. Prior to the meeting each member presented their ideas. We then finalized the designs that we would present for the final design mockups.





Prototype
Stack Maps

Style Guide

The colors and styles were based on StackMaps’ existing UI. This helps to maintain consistency when designing the each screen for our designs.

Goal

Our main task was to make a user friendly experience for developers to easily access available videos to learn code. The client wanted us to follow Bootstrap guidelines which is the most popular front-end frameworks and open-source projects in the world. Our design utilizes many bootstrap components in our design

Stack Maps

Hi Fi

The main goal in the design process was to make a simplistic experience for developers to easily access available videos to learn code. The client wanted the UI experience to be engaging for users and were open to any design decisions. The client also asked that we followed bootstrap guidelines which is one of the most popular front-end frameworks and open-source projects in the world. Our design utilize many bootstrap components in our design and incorporated UX best practices. For example, we used Card Layout due to it providing balance and a clear aesthetic that is simple for the users.

Stack Maps

UI Re-Design

We decided to do to the following Design changes:

  • Easy to find titles without images (videos are all about code)

  • Clearly defined completed/watched videos versus unwatched videos.

  • Bootstrap-inspired tables allow users to glance at all necessary data. Organized information.

  • Tables are scalable as the portal adds more information.

  • Great for quick interface loading speed

Stack Maps

UI Re-Design

Design decisions:

  • Card design to provide organized information.

  • Progress bar added to increase user satisfaction and engagement. (Sense of accomplishment..."How much longer do I have left?")

  • Carousel to utilize space and showcase 3 important primary videos of a class..

Stack Maps

UI Re-Design

Design decisions:

  • Task-focused approach: watch to learn. Minimal distractions.

  • Youtube has more than 2 billion worldwide users. Therefore this design draws patterns from this familiar platform. This limits confusion for the user!

  • The progress bar allows the user to know how much learning they have left of a certain class.

  • Additional videos within the class are displayed below for a quick glance at what comes next.


Developer Handoff
Stack Maps

We made sure to leave notes and annotate the height and widths of the mockup screens and components.


Developer Hand off

Some quick highlights for an easy handoff
Notes were added about the specific Bootstrap guidelines

Conclusion

This project was a great learning experience due to being able to discuss different points of view during the design process with my team members. The client trusted our judgment and was happy with any ideas that we provided. I had some concerns with the project due to being unable to conduct user testing. I believe user testing provides great feedback and insight into one's design.