Three UX tips for your next hackathon project

Axway recently kicked off its first hackathon of the year—the #BetterConnected hackathon, aimed at developing applications that could help improve the lives of users during challenging times. I found myself working with a talented four-person team to design and build a pretty incredible mobile app in such a short window of time.

The goal was simple: Create a mobile app that makes it easy for friends and neighbors to help each other with needs and favors.

And while this is certainly not a novel idea, with apps like Favor and Instacart Shopper having been in the app-mosphere for quite a while now, it ended up being a fantastic hackathon project for a couple reasons. Among the biggest of which is the user experience (UX) lessons, it helped reinforce as we designed the in-app experience.

So with all that said, here are the top-three biggest UX tips I took away from our week-long app design sprint to help you in your next hackathon project.

Tip 1: Get all ideas and requirements down ASAP

There’s an old joke that weeks of programming can save you hours of planning, but as any developer worth their weight in conference T-shirts will tell you, having specific, clearly defined requirements from the get-go can save a ton of time and headaches later.

For your next hackathon project, get with your team as early as possible to define the scope of the project and figure out exactly what your app will do.

Here was our process:

First question: What will the core function of the app be? Answer: Users can help other nearby users with certain needs they post. This gave us two big requirements to start with:

1. Ability to create and share your own need.
2. Ability to discover the needs of others.

Hooray! Two requirements and the app is done, and all figured out, right? Well, not even close. Remember how requirements have to be specific and clearly defined? We had to ask some deeper questions to fully flesh out our requirements.

• How will users create a new need?
• What fields/information is required for creating a new need?
• How exactly will users discover others’ needs? Manual search or will there be a running feed, or what?
• What information will be shown about the user/their need immediately?
• How will users initiate an offer to help someone else with their needs? How will they accept that offer?
• Before a user accepts another user’s offer, how will they know if they can trust them?

These led to a few more key requirements for the app:

3. Ability to create and share your own need.
4. Ability to discover the needs of others.

An anonymous user approach (think Craigslist-style) could work here for posting and accepting needs, but we realized most users probably wouldn’t be too keen on trusting a total stranger on the Internet to give them a hand—especially with something personal—so a login system with user accounts would be a better fit. And, be honest… would you?

Having users create accounts first also set the stage for a “connections” feature, showing how they were connected to the person posting a need or accepting their need.

With those ideas in mind, we rounded out a few more requirements for our hackathon app:

5. Allow users to create accounts with a username/password login.
6. Ability to search for other users to add as connections.
7. Allow users to login with Facebook, which imports friends as connections automatically.
8. Show mutual connections & degrees of connections between users.
9. Ability to create a user profile, including uploading a profile photo and displaying their location.

A few other requirements also came up, like a rating and points system, but we’ll get to that below.

Tip 2: Put yourself in your users’ shoes

One of the easiest UX traps to fall into is assuming your users will understand your app, as well as you understand your app.

Spoiler — they wont’!

While nothing can beat letting others actually try out your app for the first time and gathering their feedback directly, you should still try to anticipate issues they might have and address them ahead of time.

The basic question I try to ask myself for every element I’m designing is, “Would my mom understand this?” If not, I need to fix it. (Bless her heart…)

For example, an icon’s meaning might be obvious to tech-savvy users (especially if you’re an UX/UI designer yourself), but if you’re just seeing these icons for the first time on another app, would you guess their meanings immediately?

The easy answer? Accompany your icons with labels wherever possible. Nielsen Norman Group has a great explanation on how and why this is a very good idea.

For our hackathon app, this was especially important in the main navigation bar at the bottom:

We also realized a potentially big problem early on: Would only having a user account with a profile really be enough to instill trust in other users? If I were about to accept a stranger’s offer to help me out, I’m not sure a pretty picture is enough to convince me they’re trustworthy.

“Gee, It’d sure be nice if there was a rating or points system so I could see which users had a good reputation.”

Enter gamification.

If your app has any social aspect to it where users might have reservations about interacting with other users, consider adding a point or rating system to their profiles so other users can better vet them before they interact.

Lyft and Uber do a fantastic job with this, letting you see a driver’s picture and rating before getting in their car, and we wanted to make sure this app’s users felt the same level of trust when asking a stranger to help them out in a pinch.

And if nothing else, you might consider adding a gamification aspect (like a points system) to your next hackathon project, just for the sake of incentivizing users to keep using the awesome thing you make!

Remember: The hackathon judges just might be your first users, so imagine experiencing your app for the first time from their perspective!

Tip 3: Use every design and code tool at your disposal!

If you’re like me, this is the part where you really geek out, because this is the part where you start seeing all your ideas come to life.

But if you’re also like me, you’ll be tempted to spend way too much time creating everything fresh from the ground up, just so it’s built exactly the way you want it.

Don’t be like me.

There simply isn’t enough time during a week-long sprint to start from scratch in every way, if you’re even lucky enough to participate in a hackathon that long.

For UI designs, tools like Figma, Sketch, and Framer X are an absolute joy to work with. They’ll save you tons of time over trying to tweak pixel-perfect designs in Photoshop like the old days and make collaborating with your hackathon teammates much easier.

For UX flows and rapid prototyping, I personally really love what the folks at InVision offer, but there’s no denying Adobe XD and Proto.io as two other very solid choices. These rapid prototyping tools give you, the UX designer, the ability to truly convey to your team the experience you’ve envisioned in a clickable, interactive way. And when time is short on a hackathon, communicating that vision quickly is critical.

When it came time to actually turn designs into code, Titanium was a lifesaver. It had every tool we needed to spin up a mobile application in almost no time at all, from handling the front-end functionalities of our app to the back-end integrations we used as well.

One of the most important UX considerations to keep in mind when you design a mobile app is making sure the experience is consistent across devices and platforms. Titanium’s ability to create an app that works across both iOS and Android devices without any hassle or gotcha is on our end was seriously invaluable in being able to deliver our hackathon project by the deadline.

These tools can make all the difference in your next app too.

So keep these three UX tips in mind as you tackle your next hackathon project. A delightful user experience is one of the first steps to delivering an idea that just might change the world!