Jan Früchtl Product Designer at Clark

Acto

Hackathon – iOS

Example screen for the Acto project.

Company

Hackathon

Project Duration

28 hours

Role

Concept, Design and Frontend (React Native)

Overview

I do a lot of work on the Web. Occasionally, I get the chance to work on iOS or Android apps, but this sadly is not the majority of my day-to-day work. Sometimes, events like hackathons can be a good way of tinkering with such technologies again.

For me, Acto was such a project. Together, with two colleagues from work, I attended Symbioticon 2018 in Frankfurt am Main. Our goal as a team was to develop an application that automates your bank account. Inspired by the iOS Shortcuts application, we wanted to trigger user-created actions based on activities that happen on your bank account.

For example, if my grandma sends me 50€ every other month, I could set up a trigger to look for this specific transaction and trigger a task that, e.g., sends a text message to my grandma thanking her. (Please don't try this at home – thank your grandma personally, seriously).

In theory, one action can have as many triggers, and tasks a user wants. This is the main beauty of this application. At first, it seems very limiting, but with the flexibility of chaining together as many things as a user wants, this ultimately becomes powerful.

28 hours of work

We started the 28 hours of this hackathon completely from scratch, without any previous concepts in mind. As a group of three, we quickly sketched out possible ideas and came up with our goal as described above.

After some initial thoughts and a rough idea of real potential use-cases, we started to focus on delivering a functional application for one of these particular use-cases.

To speed up our frontend development for the iOS application, we chose React Native and Expo as our main frontend stack. This decision was hugely influenced by the short time we had. In hindsight, we probably shouldn't have chosen this frontend stack because of some React Native–specific problems we got stuck on after a promising start. These problems vanished all our hopes of saving time during the development phase.

Some React Native code from the final prototype.

Assumption based design

One of my strengths is systematic thinking and looking at problems from different angles. This isn't possible in 28 hours. I needed to come up with a basic design idea that solved our stated problem scope as quickly as possible.

From my point of view, the most critical factors to the success of this application would be the overview of actions and the creation process of one specific action. With this in mind, I optimized the whole app for these two factors. To optimize for usability and speed, I also tried to be as close to the iOS HIG as possible.

An early sketch I did on my iPad during the ideation phase at the hackathon.

All these decisions helped us in moving quickly towards this tight deadline. After some rough design ideas, I promptly moved more into the code and helped my teammates with the visual implementation for the necessary screens.

Personal takeaways

Despite our small problems with React Native, we managed to finish our first functional version in time and could proudly present a functional piece of software.

We had a lot of fun, and once again I noticed that design and development could only perform at maximum capacity if both are in sync and connected as closely as possible. Furthermore, designing directly in code can be super beneficial in environments like this.