top of page

YHACK 2022 - "Wisp" UI/UX mockup

Challenge

Wisp was a web app idea that was created during YHack's 36-hour hackathon. The aim was to create an innovative travel app. We ended up creating a travel recommendation site that aimed to reconfigure what qualities were desired in an online recommendation. Because our team of four needed time to develop, this mockup was actually created solely by me in under 24 hours.

Outcome

A preliminary UI/UX mockup and prototype web app. Wisp has some basic functions that I really liked from our initial discussions, but it is missing some pages as well as could be redesigned to push against the stereotypical recommendation more. However, I see it as a culmination of a lot of the things I have been learning about design and about how I would want to shape the Internet, even though it might be rough around the edges.

User Research and Interviews

Because this was a quick project, we weren't able to conduct an extensive research process and, we narrowed our ideal audience down to people who were our age because they were easily accessible. Based on our team's experiences, after interviewing a couple of friends, and researching on the Internet, we identified three qualities I wanted to prioritize in the travel recommendations Wisp offered: uniqueness, affordability, and a social community aspect. When talking to young adults, we found a desire to have experiences that did not give some superficial clout but allowed the sharing of unique and generationally relatable memories. A question I was asking was what could our app offer that is not offered on competing sites like Yelp or TripAdvisor? Do people in our target range actually use these apps and how did they feel about them? The answer was yes, they did use them, but they preferred far more to lean on the recommendations of friends and for the more Internet-savvy, internet forums like Reddit or TikTok. Now, this was definitely not everyone, but it was a significant subsection of at least half of the about six people's opinions we took into account. 

 

After our brainstorming and research, I realized I was far more interested in how people could share what connected them to places than whether they were objectively good places. Upon looking back at the project, capturing the connected memories tethered to a shared location is an idea I think I can keep expanding on because although I like the concept of Wisp, I believe its design can be pushed further beyond ordinary tropes associated with a recommendation app's design. 

Login (1).png
Sign Up (1).png

Basic Design and Concept

Building on our conclusions from brainstorming and research, we came up with the concept of a travel recommendation site that was based on how much a location was liked and thought of as unique rather than a classic percentage or five-star system. In order to make the site more of a social interaction rather than just a database, users are required to leave their own experiences to gain access to other reviews left by other users. The reviews we envisioned users leaving were anonymous diary-like entries, similar to the inspiration we had found from internet forums in the first place but gathered on a site that could be unlocked location to location.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

My teammates came up with a tokenized system as a function to motivate community interaction as well as provide some sort of limitation and value to posts so as to maintain quality. I had a lot of fun just on UI side of how to show these tokens. I didn't want the token system to feel transactional in a cold way, so I demurred from using a monetary related symbol. I wanted something that captured the concept that token was more of an exchange of experiences from person to person so I was thinking energy... energy... hmm maybe something more spirit-like... like a wisp! And that's how we ended up with this wisp, blue flame, sort of theme. 

Desktop - 10 (2).png
List of locations for searched destinations (1).png
Desktop - 8 (1).png
Home (1).png
Destination Page (1).png
Auto Select Location (3).png
Manual Input Location (1).png
bottom of page