March 2, 2020

1293 words 7 mins read

SityUp

SityUp

💁‍♂️ About

Sityup is an app for location based exploration of cities. Application consists of challenges user can take in a certain city. Finishing them improves their place on that city’s leaderboard and their percentage of city exploration.

✋ My Role

SityUp started as my small passion project and is currently being developed by a small team.

For this project I had to design a complete visual identity, app icon, UI and UX design of an app. In this post I will concentrate on the UI and the UX part of the project. However, here’s the app icon:

App icon 2

💥 Challenges

Two main user flows that are the biggest challenge are:

  • finding a challenge to take
  • creating a new challenge inside a mobile application

🤷‍♂️ User Base

Core user base are young travelers between the ages of 19 to 30.

These are the digital natives; the people that surrounded technology when the mass critical developments took over. The now Millenials were or are involved in usability testing, psychological analysis, ergonomics. These are the people that change the wind of business.

General rules that apply to that group are:

  1. Define goals, directions and instructions explicitly
  2. Rely more on search than discovery; make things handy
  3. Usability and accessibility are critical, but that doesn’t mean the app can’t be clever!
  4. Tailor a straightforward and accessible User Interface (UI) Map
  5. Prefer text over visuals
  6. Lay lesser emphasis on research and study; get to the answers quickly
  7. Get to the toes to have your users interact with the screens. (Anyhow!)

Having a user base with short attention span, the UI should be as simple as possible, friction-free and personalized.

There are two main types of users—a young tourist, and an education or work immigrant.

Young Tourist

Young travelers tend to go to multiple destinations on their travels rather than staying in one city for the whole trip. The app should let them find things to do right away so they don’t have to prepare beforehand.

Laura Lopez, 23
About

Born in Barcelona, taking a gap year and going on a backpacking trip around Europe. She’s open to new experiences and wants to explore the World.

Although there’s nothing wrong with planes, trains and buses are her preferred ways of transport, and she has no problems with hitchhiking.

Frustration
Every single tourist guide recommends places every single tourist has seen. She wants something new and exciting.
Habit
Uses TripAdvisor to find places locals frequent with little to no luck. Asking random people on the street sometimes works the best.
Goals
Make Laura’s trip a trip of a lifetime! Show her new, fun places she might not have stumbled upon without SityUp, and do it fast as she’s always on the go.

To satisfy this type of user I need to:

1. Make the authentication flow very simple.

Login Screen

Even if user didn’t download the app before they got to a destination, onboarding should be simple.

That is why only oAuth is possible. No need to input email, think of a password or anything else.
Login screen

2. Easy to pick a challenge

Home Screen

The app should immediately place user in the city they are located at. This is where a prompt to allow locations will come up.

Home screen
Challenges are suggested to the user based on their previous activity and current location.

Also, having only oAuth for authentication ensures learning about the user faster.

Education Traveler

Another type of user is the one that stays in a city for a long time. The app should be able to get them familiar with the city they are staying in and try to integrate them into the lifestyle.

Zach Morgan, 22
About

The I’m-never-going-to-Starbucks film student from Liverpool loves finding new interesting places to drink coffee and eat.

He’s always looking for interesting places to photograph, but wants his photos to be special and unique.

Recently he’s moved to Amsterdam for his Master studies. The city is beautiful, but he feels he still hasn’t experienced it fully.

Frustration
He’s been going to a coffee shop next to his dorm, but it’s not like the ones he’s used to.
Habit
Sometimes getting lost in the city works best, but he feels like he’s a long way from knowing the city.
Goals
Show Zachary some unique spots he can take great photos of, and don’t make him accidentally visit the dreaded Starbucks.

This kind of user has more time to choose a perfect challenge, so an option to filter challenges in some way should be available to them.

Categories

Simplest way to provide different types of challenges is categorizing them. That way the user can take on a perfect challenge, and the app can learn about that user’s preferences faster.


📱 Prototype

Starting the Application

User Flow

The idea is for an app to check if user is on a checkpoint of any of ongoing challenges before kicking them into the main app flow.


Finding a Challenge

User Flow

This flow should be very simple. Users seem to be used to scrolling and tapping on an element to see more info. Most of the applications with scrollable content have similar flow to this.

The biggest challenge (pun intended) was the challenge info screen. I wanted to put an interactive map and the description of the challenge in one screen.

After testing it, I realized people were fine with just seeing an overview of the checkpoints and seeing map details only when they intentionally tap on them.


Creating a Challenge

User Flow

Creating a challenge on a small screen was the most difficult flow to design. App’s competitors usually put this feature somewhere on the web. However, when wanting to build a big community, my team and I believe we shouldn’t strip the app of any functionalities.

I wanted the user to add as many or as few checkpoints they want in any way they see fit and worry about their order later. That is why checkpoint input screen is seperate from challenge info screen.

✨ Mockups

Now for the fun part. Kick back and relax.

Mockup 4
Mockup 1
Mockup 2
mockup 3
mockup 5
mockup 6

🎓 What I Learned

As this is the first real start up project I worked on, I wanted the design to be as simple as possible due to time limitations, but still to look nice. In the end, the app will probably look a bit different.

I will post an update with the finished product and a link to the App Store once it’s finished.