Project Overview
H2Kit is a streaming service for DIY videos and video tutorial series. Video tutorials are optimized for trouble-free step-by-step following. In addition, premium upgrade users have access to more tools accessible digitally and offered by the creator to aid the user’s learning process.
Project Plan
Using this project template, I was able to plan out the overall process from Discovery to Final design.
Research
Some methods of research used were:
Competitive research analysis
Secondary research
Observational note taking
-
Premium membership is offered within the account creation process.
Popup ads for premium membership deals.
Premium membership banner shows on every page of the website.
Premium membership benefits are on every page of the website.
-
Premium membership offer is on every page of the website.
Not much is available without the premium membership.
-
Premium membership should be offered within the account creation process.
Popup ads for premium membership deals
Premium membership banner
Make premium membership easily discoverable.
Findings from the research:
Flow Map
This Flow map shows the freemium model within the registration and log in process as a user would move through the application.
Sketches & Wireframes
I sketched the necessary screens according to the flow map then created wireframes of those sketches on Figma.
Design Process
I started with these inspirations for color and font styles.
Then used this UI kit to test out these design decisions.
Design System
After testing out my design decisions on the UI kit, I organized the colors, fonts, and icons to be used for my design system.
User Testing Round 1
The purpose of this first round of testing was to identify any obvious disruptions and incapabilities within the prototype functions.
After briefly evaluating the user’s current experience in streaming applications the participants were asked to perform 2 tasks:
Create an account.
Upgrade to premium.
Post testing questions included:
Did you find the tasks difficult or easy to perform?
Did you feel enticed by the suggestions/offers to upgrade to the premium version?
How did you feel about the app overall?
This first round of testing revealed:
Selected colors were aggressive and distracting
Buttons were unidentifiable and indescriptive
AFTER
BEFORE
First Iteration of High Fidelity Designs
Using the wireframes, colors, fonts, and icons, I built the first iteration of high fidelity designs.
User Testing Round 2
The second testing included the same tasks with the purpose of finding gaps within the flow of the tasks.
The second round of testing revealed that the buttons were not self explanatory as the icons that they were.
The icon that takes the user to the settings page had no function as the frame was missing.
AFTER
BEFORE
Final Iteration of High Fidelity Designs
Taking into account the results of the first round of testing, I muted the colors to be easier on the eyes and reduced the number of colors presented on the screen at one time. Some of the button icons were changed and isolated the icons to show individual usage.