Play your way to Creativity

User Interface (UI) | User Experience (UX) | Prototyping | Wire framing | Adaptive UI | Front-end Development | Content management

Live Website New Tab Icon
laptop and mobile with the 21 days challenge website homepage open with a gradient in background

About the project

The desire to be more creative has become a universal aspiration. People from all walks of life, whether artists, professionals, or entrepreneurs, recognize the value of creativity in problem-solving, self-expression, and personal growth.

Project Goals

The primary goal is to inspire individuals to embrace their creative potential and explore innovative thinking. By providing activities that aim to ignite a spark of creativity within each participant.

Tools

  • Illustrator
  • Photoshop
  • Figma
  • HTML/CSS
  • JavaScript

Role

  • User Interface Design
  • Front-End Developer
  • Content Management

Team

  • Self Directed

Timeline

  • 8 Weeks
white mobile mockup in center with two screens showing different screens from the website

Design Process

Starting with empathizing and try to solve a problem user is facing by proper defining it and ideating the best possible solutions to create the prototypes, Test the prototypes for user feedback so they can be improved based on the feedback of the users. Once the prototypes are ready, develop the website by working on semantic structure and accessibility, validate the codes properly in terms of structure and accessibility, and test again for final results.

emphatize icon with two heads and line in between

Empathize

board and the arrow in middle

Define

bulb with lights as a line showing the conceot of ideation

Ideate

pen tool with the lines demonstrating the concept of designing

Design

screen mockup with the blocks showing the concept of prototype

Prototype

hand with the scale and the mechanical nut in the background

Develop

code validation with the arrow

Code Validation

hand interacting with the screen shows the user interaction and experience

User Testing

User Flow

the flow that shows how the user interacts different page of the website

Prototypes

Lo-Fidelity Prototypes

Lo-fi prototypes can be created rapidly and involve simple materials like paper, sketches, or digital wireframes, which allows designers to iterate and test ideas without investing significant time or resources upfront.

top four images shows shows rough pencil drawn sketches and bottom are the rough figma lo-fidelity prototypes

Hi-Fidelity Prototypes

Hi-fi provides a more polished and realistic representation of the final product or design concept and incorporates visual elements and detailed graphics, allowing stakeholders and users to better visualize and understand the intended look and feel of the design and enabling designers to simulate and test the user experience more accurately.

laptop and mobile with the 21 days challenge website homepage open
animation showing different sreens of the website

Accessibility

Accessibility includes not only the outward depiction but also what is going on behind the scenes. Proper tags and structure are employed to deliver a more efficient experience to screen readers, and these concerns also lead to design modifications. To improve the user experience for screen readers.

three different screens with accessibility semantic structure

Style Guide

A style guide is a set of guidelines and standards that define the visual and functional elements of a digital design. It serves as a reference for designers, developers, and stakeholders, helps maintain brand consistency, and serves as a communication tool among the designers and developers.

image of the design process that used to complete the project

Visual Design

image of visual style that demonstrated by using one of the screen with all visual design elements point out

Product Features

1

Home page provides the whole walk through of the website, Easy sign up helps the users to registered and also highlights how this challenge works.

  • Walkthrough of the website.
  • Importance of play in creative process.
  • Easy sign up.
two screens showing the walk through of the whole website

2

A calendar page helps the user to keep track of activities and an easy access to all the activity pages from one page.

calender page from the website showing that feature of the website

3

A music feature is also incorporated to the website for the users who prefer to play music while working. Images are also provided to give the visual aid and Hint feature is also available for help on each activity page.

music option available on the website that again shows another featue of the website

4

A daily email reminder for the users to provide them a sneak peak about the activity and keep them engaged to the countdown experience.

a daily reminder of the experience page design

Conclusion

By adopting a playful mindset, individuals are encouraged to break free from conventional thinking patterns and embrace curiosity, experimentation, and risk-taking. Play allows for the freedom to explore unconventional ideas, challenge assumptions, and generate novel solutions. It promotes a relaxed and open state of mind, which is conducive to generating fresh insights and making unexpected connections. Having a countdown experience enables the users to stay consistent and focused.

mac screen with the website homepage open