Brief

Skyfable is a website that allows gamers to find a game to play, based on their local weather.

Process

1. Research & Inspiration

I actually started this project by wanting to create a mood-based game discovery website instead, but found that to be too abstract of a concept during conceptualization. I quickly pivoted into something a lot more feasible and measurable, which was the weather-based solution instead.

Essentially, I wanted an experience where the website will detect my local weather, then recommend a game for me that is perfectly suited for the weather, with a short description of why it fits.

If I were to create this product with a working backend, this would work by fetching information from Steam's API regarding the game's genre, tags, etc. - and then using AI to convert that information into a short readable text about why the game is perfect for them and the current weather. For the game selection, I would have an internal database that ties set weathers to set genres of games, in order to have a pool of games to choose from upon randomizing.

I started by doing research into what sort of tools already exist, and while there are none that do exactly what mine does (which is great), there are a few that select a game completely at random, based on what a player has in their Steam library - for example. There are also similar ideas for movies & tv, but very little there too.

Finally, I also made a User Journey to understand my ideal end user better, and try to predict any potential pain points - allowing me to get ahead of the issues and find strong solutions early in the design process.

2. Visual Setup

As this project was mainly for practice reasons, I wanted to work with color combinations I was not yet comfortable with, so I picked a couple of pretty strong colors. I chose to go for a mellow purple to incite a sense of calm and relaxation as my primary color, with a strong yellow as my accent color to incite some friendliness and excitement.

For font choice, I went with a font called "Quicksand", it's a very playful and soft font that really matches the friendly and casual vibe I was going for. It also had several font weights, which I needed to create a strong visual hierarchy in the design.

Finally, I chose to also use some stylized/animated assets in the design, as I wanted to really hammer in that relaxed and fun vibe. I even put them into the shape of a cloud with a mask, to reflect the "weather" theme.

3. Layout Planning

My initial explorations focused on a more traditional, product-heavy landing page. However, after creating the user journey, I realized that the user's primary goal was speed. This led me to pivot away from this initial concept towards a much more direct, single-action design that gets the user to their result faster.

I wanted a very minimalistic layout, and I wanted the UX to be simple. At first, I tried to do a product-based landing page, really explaining the product in detail. However, I quickly realized that the main value of the product was to really quickly get the user from "I don't know what to play" to "This looks cool", so I decided to try to convert the user by simply having a good enough hero section and letting that be the main landing page on it's own.

I also planned to include a loading screen. That was actually very important because I really wanted to sell the "magic" of the product. By giving the user a loading screen, it gave them time to anticipate the result, and also feel like there's a backend that's really working to find the optimal result for them.

Finally, I needed a result screen that would showcase the game the algorithm selected, the genre(s)/tags the game fell into, and also a short description of the game which also reflected why the game was a good fit for this particular day (weather-wise).

Final Design

1. Landing Page

2. Loading Page

3. Result Page

Reflection

From coming up with a unique concept for game discovery, to multiple design iterations, this was a fun project and I learned a ton! Working with these colors was a big challenge, and quite frankly I'm not sure I am fully set on them still, but I wanted to challenge myself and I followed through on that.

Here's what I learned during my time working on this project:

• I learned how to create and work with User Journeys for UI/UX projects as I had previously only done this for games

• I worked with strongly contrasting color combinations that I don't normally use

• I saw the value of keeping things simple, when it comes to the overall user experience and journey

• I was able to experiment with masking of illustrations, which is something I didn't use very often up until now.

• As always, I also became more familiar with utilizing design fundamentals such as whitespace, contrast, type, etc.