Potion Maker Simulation

Web App Design

Tools : React.js + Javascript + HTML + CSS + CSS modules, Adobe Photoshop + Illustrator

October 2020 - November 2020

Intro to React.JS / Individual Project

Design process

Skip to Section

Project Context

This was an individual project undertaken during an Intro to React.js course. The rubric of this project is to understand the structure of React through the use of components, states, and hooks through an individual course project. 

I decided to do this simulation after coming across the 16personalities test where users answer various personal questions to generate a personality type based on their responses. The scenarios for my simulation is similar in that users can generate a love potion depending on what ingredients they input. The resulting concoction can have negative or positive attributes, as it is unpredictable. 

Design Inspiration

My initial goal for this project was to create some form of simulation where a user can input some data, and will received a targeted outcome based on those inputs. This form of interaction is prevalent in many application we use, particularly in video games. In many role-playing video games, the outcome of a story is dependent on what choices the player selects when given multiple options.

Using this as my design inspiration, I wanted to build a web application that does something similar:

• A simulation where outcomes are dependent on what the users inputs

Through this, I came up with the idea for potion mixing web simulators. Depending on whatever ingredients a user chooses, the potion outcome will garner various negative or positive attributes.

During this stage of the design process I started to come up with my project definition, and outlined the various elements of this design.

Story

You are mixing a love potion to be given to a crush. In essence, you are experimenting with different combination of ingredients to build the best potion, though the outcomes are variable depending on what you choose; outcomes can be both positive, negative or both.

Design Elements

Requirements:

1. You can select up to 5 ingredients (One ingredient is optional)

2. You can can mix one potion at a time (allows you to restart)

3. Each ingredient has a different taste (bitter, sweet, salty, sour or neutral)

4. The final mixture will also have a taste that is dependent on the prominent taste from the group of ingredients (>.5 of mixture is specific taste)

Mockups

Architecture

Art Assets

Design Rationale

The overall atmosphere of the simulation is meant to convey that the user is in a sort of chemical lab mixing a potion. To communicate this, I made a drawing of a lab setting as shown in the background of the page. Another drawing (scroll painting) was made for the background of the “formula” & solutions menu to further the theme.

Introducing…Potion builder

the web app simulator. Build a love potion for your crush by mixing various ingredients! But choose carefully—attributes vary across the ingredient so depending on what you select you may not like the outcome of the love potion!

Features