Andrei MarchenkoSelected worksLinkedin

Flipper Zero — Online School

Background

Flipper Zero is a small, handheld hardware hacking & cybersecurity tool designed
to interact with electronic systems around you.

You can read more abou the device on this page.

Context

This design project was a test assignment for a product designer position
in the company. I should did a re-design of the main page and lesson page
of the Flipper Zero Online School.

When I received this assignment, the company was in the process of developing and preparing a curriculum for users of its device. The online school was designed to showcase the device's capabilities to regular, non-geeky users.

Product goals

Process

1. Main page redesign

Here is a link of the platform design before my redesign.

To identify key issues, I interviewed eight participants. They came from different backgrounds (business analytic, product design, copywriting, product management and programming), but all share one thing — they regularly learn new skills using online education platforms.These insights helped better understand
the needs and challenges of people who learn continuously online.

Key pain points

I researched the company's online resources and extracted visual information
from there that would help solve the redesign task, then created a new hero-section, made it clear and understandable for perception.

Hero section

Then I designed new look for the course card and added filtering section
for existing courses to make searching easier.

Lesson card before/after redesign

Filters and course cards section

Here is the final version of the redesigned main page, bringing together
the key decisions made throughout the process.

Full main page look

2. Lesson page

Here is a link of the lesson page design before my redesign.

For this page I started with update for the chapter list because this part
of the UI was most destructive for attention from user POV that I got from
the research.

Chapter list

Then I redesigned a whole lesson page. To focus user's attention on the content
of the lesson I applied the proximity principle to information architecture of the page (the rule of inner and outer in design).

Full lesson page look

Then I explored how the lesson note-taking flow could work, focusing on making
it intuitive and seamlessly integrated into the learning experience.

Notes taking flow

Outcomes

The project was successfully completed as part of a test assignment
for Flipper Devices and received strong positive feedback from the team:
The project was not launched due to a change in product direction,
which was unrelated to the design outcome.