How we designed and built an app in just 5 days
This is an article for people, probably client-side, that are not familiar with the idea of a Hackathon. If you'd like to read about how to run one yourself, try this alternative.
hackathon
[hak-uh-thon]
noun Digital Technology
an event in which people work in groups on software or hardware projects, with the goal of creating a functioning product by the end of the event.
For a recent annual Hackathon event, we set up a makeshift studio in Fowey, Cornwall. Whilst away, we designed and built apps for Pilates instructors to create personalised video lessons for their students, from scratch, in just a week. This is how we did it.
Starting with a brief, very much like a client would provide in the real world, we had to quickly extract a set of requirements, written from the user's point of view.
For our 'Pilates lessons at home' project, we reduced the features down to:
- Instructor can upload videos, create lessons and assign them to students.
- Students can watch the lessons through the dedicated app
(Plus, all of the usual requirements for a digital project, like logins, security, GDPR, running costs, etc.)
This was enough for the team to work with on the first day as we set about exploring options for technology, design and tools to support the processes. There are plenty of software libraries and even design resources available for rapidly accelerating this kind of project and we intended to make full use of what was available. After all, there’s no point re-inventing the wheel.
Amazon’s Media Services - This could handle the uploaded video storage and processing
Google’s Material UI kit - Gives us a framework for designing a user interface. Many buttons and controls can be used immediately and we know they’ll work on any device.
Amazon’s Cognito - This gives us a system for authenticating users and managing their logins across the system
We didn’t want developers to wait for finished designs of the apps before they could start any work. So the solution was to create ‘Wireframes’, which are simple sketches of each key screen that clearly show functionality, but not any styling. They’re fast to produce and that means they’re ideal for discussing the proposed features and making rapid changes. Two sets of wireframes were finalised: a responsive website for Instructors and a mobile app for students to watch the videos lessons assigned to them.
As the developers started to assemble the two apps, the design team was working on concepts for the brand. Usually branding needs a fair bit of time, as great ideas often emerge from research and creative exercises with the client. In this case, we did not have the luxury of reasonable deadlines or user testing. So we had to make fast decisions and give our full commitment to a new name that would fit the Pilates theme as well as a broader theme of ‘learning at home’. Fortunately we found that the Japanese word for ‘Study’ was neat, original and catchy: ‘Gaku’.
With our new name and theme we could then produce logo, colour pallette, font, illustration, photography and other brand elements. These we used to create a marketing website (check out gaku.app) and some styled mockups of the key app screens to hand over to the developers.
Meanwhile, the developers we’re rapidly putting together the functionality agreed in the wireframes. To ensure that everyone knew what each other was working on and what progress was being made we held daily demonstrations of the work in progress. Although we would see bugs occasionally, these demos helped us stay focussed on the main goal of having two usable apps by the end of the week. They were also hugely encouraging as individuals saw their efforts combine into a greater whole.
At the end of the week we had enough finished to test the system as imaginary users. It was certainly a little frantic on the last day but this is when everything came together. We even found the time for one or two of our ‘stretch goals’ - features on the ‘Would like to have’ list from the start of the week.
Why a Hackathon works so well
- It’s highly collaborative and utilises the skills and experience of the entire team. Everyone gets a say and so different ideas are quickly added to the mix and more options are explored.
- It’s intensive and focused. There are no distractions from other projects during the Hackathon event which means that output is much faster and time used more efficiently. We’ve noticed that momentum builds during the week as well. This is the main reason that the team can achieve so much in such a short space of time.
- Working so closely together fosters passion, ownership and responsibility for the project. If everyone is invested in the the success of the project then the work will benefit as a result.
How can Hackathon skills be applied to client projects?
Although we wouldn’t necessarily run client projects in exactly this way (more planning is good!) there are number of situations that would suit this general approach:
Proof of concept - We’ve had an idea but we’re not sure if it’s possible
Rapid prototyping - Let’s build a something that shows how the key features will work
Demos for clients or for investors - We need something that shows a vision of the future
So you can see that a Hack might be a piece of a larger project: a very cost efficient way of solving a problem or answering a question, before a larger commitment is made (or lost).
If you've got a problem to solve or an idea that you'd like us to produce a prototype for, then please get in touch.
Perhaps you'd like to join us on a Hackathon as a client?
If you'd like to know more detail about this specific Hackathon event then you have the following options:
- Design
- Technical
- Daily diary posts
- How to run your own hackathon
