UI/UX Design Case Study: Simple Progress

Maximize productivity and improve your focus.

3 phone screens with 3 features from the website

My roles

UI/UX Design

Wireframing

Prototyping

Timeline

September 2021- January 2022

    Background

    Have you ever heard about the Pomodoro technique?

    • It helps you increase work efficiency by setting the focus and relaxation times for each task.
    • It’s a popular time management method that asks you to alternate pomodoros ( focused work sessions ) with frequent short breaks to promote sustained concentration and avoid mental fatigue.
    • The technique is very useful mostly for students, for improving productivity.

    So, my team and I decided to create a productivity website based on this technique. I was the designer and they, the developers. By using the app, you can work on a task and assign it to an achievement, so you work toward your goals with better clarity in mind.

    ‍

    the Problem

    Students fail to accomplish their personal goals because of a lack of productivity

    My entire life, first as a student and then as a college student, I noticed that I and many of my friends find it extremely hard to achieve our goals, even if we sacrifice our time, energy, and other entertainment activities. We were missing productivity and a good management system.

    the Solution

    To study and learn with the Simple Progress website, using the timer which is working based on the Pomodoro technique. This increase your discipline by alternation between focus and pause sessions. Generally, the focus means 25 min of working on a single task, and pause, 5 min of recreation. After every 4 focus sessions, with the pause session between them, you have to take a bigger pause of 10 - 20 min.

    Additionally, the Simple Progress improves your productivity through the features which allow you to analyze your work and study with other people.

    ‍

    Solution feature: work with Pomodoro technique
    Solution feature: work manage tasks and achievements
    Solution feature: analyse your work
    Solution feature: newsfeed with productive community
    No items found.

    The base of the app

    The Pomodoro Technique

    Steps of the Pomodoro Technique

    The main feature

    The Timer

    Persona

    Information architecture

    I based our site map on a condition: “Is the user connected?”. The condition determines if the user can access the page or he can only see a placeholder page, which informs him that he needs to sign in for viewing that page.

    ‍

    Legend

    Other features from the website

    Study room feature
    Newsfeed and profile features
    Achievement and timeline feature
    Leaderboard feature
    No items found.

    Wireframes

    I based the wireframes on the persona, keeping in mind that the website need to be easy to use and have a clear design.

    5 phone screens with wireframes of Simple Progress
    5 phone screens with wireframes of Simple Progress
    5 phone screens with wireframes of Simple Progress
    5 phone screens with wireframes of Simple Progress

    Styleguide

    Typography and colors
    Buttons
    Icons
    Components
    Components
    No items found.
    Try the prototype of light mode yourself
    Button for playing the prototype

    Dark mode screens

    Photo with screens from dark mode
    Try the prototype of dark mode
    Button for playing the prototype
    Logo for BIRTA PAULA Portfolio
    UI/UX Design Case Study: Simple Progress