Lancelot is a mock dating website that melds current online dating trends with fairytale elements. And no, not like fairytale like "Happily Ever After" but fairytale like it's a dating site for Gnomes trying to meet Yetis. Or Dragons trying to meet Ogres. This site is meant to take a somewhat satirical stab at online dating trends and transform them to exist in a world outside of ours.
Skills and Software Utilized
- Adobe Illustrator
Name: Dirk Dragon, Scientific Name: Draco petrus silvam, Age: 410, Height: 8ft 6in, Birthday: August 2, Diet: Meat, berries, burning peasants, Interested in: Flying creatures, About: A fun loving dudebro looking for a honey to take to the Dragon Z Ball. HMU if you can fly and you like scales.
Name: Gretta Gnome, Scientific Name: Gernumbli gardensi, Age: 78, Height: 2ft 4in, Birthday: October 21, Diet: Vegetarian foods found in the forest, Interested in: Only creatures taller than me!, About: I don't mess around, I'm only looking for creatures who are taller than me by A LOT. Greg, if you're reading this, that's not you. We broke up over a year ago, get a life.
Name: Gary Satyr, Scientific Name: Satyroi faunus, Age: 237, Height: 5ft 4in, Birthday: April 14, Diet: Tomatoes, celery, and other vegetables, Interested in: Creatures who will clean my hooves, About: Funny fact about being a Satyr, they don't make your arms long enough to reach your hooves and your hips have very little mobility. Looking for a life-partner who will always clean my hooves. I promise to give you goat fur blankets in return.
Initial Design Wireframe
A simple idea of what the site will look like is loading into a page that allows the user to select a profile. This selected profile will become the user's identity on the site. The user will be able to "fill out" information about themselves on their profile. "Fill out" is in quotes because the information will be predetermined but will require the user to type randomly on the keyboard.
As you can see, there are a lot of issues with the above design. The focus seems to be on the background rather than the profiles, and the profile information doesn't seem contained together well enough. It did however serve as a great outline for future design iterations.
Setting Up State for React
If you have ever coded in React, you know that setting state is the most important part of getting the application to work. The best way to plan out state is to wireframe the site to showcase what the component hierarchy is.
Above is our component hierarchy for Lancelot. There is one parent component and three smaller children components. The Header, the ProfileCard, and the ProfileInfo are all housed within the Container parent, however the ProfileInfo component requires the user to select a profile before it is shown. When a user selects a profile on the front page, the components will shift to move the ProfileCard to the top of the page, remove the Header, and show the ProfileInfo. This will make sure that the page is still going to be one page that changes when things are clicked.
The Final Design and Interaction
In the final iteration, the site was programmed with 8 different playable characters. These characters are built from the personas listed above (and clearly added to as well). When refreshing the page, the three profiles cycle to ensure you get a chance to play multiple characters.
Once you click on a profile, it takes you to a blank profile page. On this blank profile page, the user is required to essentially mash their keyboard to fill out information about them. It simulates typing, but with the information pre-determined.
The site can be viewed here.