Creativity against a stopwatch - Hackathon

We all complain about tight deadlines from clients, but when they're self-imposed we're forced to make quick decisions and considered compromises.

This year's Hackathon has recently come to and end and we've returned to the relative calm of client project work, back in our Bristol studio. We designed and built a personalised Pilates video lesson system for instructors and students, from scratch, in just a week.

You can read more about the week-long project in the form of short daily blog posts and an article about the technical decisions made.

Today, we're going to look at the design process for the two apps, marketing website and the new brand which ties the project together. Keep in mind, this was all done in just 5 days.

The brief was set before the week started and it included key User Stories for an Instructor Web App to manage video lessons and a Student iOS app for watching them. We'd deliberately narrowed the scope and leap-frogged the conceptual stages to help ensure we could release the product at the end of the week. Features were stripped back to an absolute minimum so that the first release would work as well as possible for our early adopters.

We didn't have any users at this stage, however we did telephone-interview Pilates Instructors to gather feedback. They were extremely positive about the concept and they were able to provide valuable insight which we worked in to the User Stories.

Here are some of the conclusions that were drawn from the interviews:

• Pilates Instructors are regularly asked for video lessons by students for use in between lessons
• Instructors would like to provide both personalised lessons for individual students AND general lessons for all their students
• Many instructors have never video recorded their own exercises
• Instructors were concerned about maintaining their brand and identity on a 3rd party platform
• Instructors would like to receive feedback on lessons immediately, not in the next class, which could be days away

Although we gathered lots of new requirements it was important that the minimum were achievable and would be accepted by the Instructors. We separated out non-essential requirements into a list of Stretch-goals in the unlikely event we'd have some spare time at towards the end of the week.

The refined set of User Stories were enough to start wireframing and prototyping. Different options were sketched with marker pens on large sheets of paper so we could easily review with others in the kitchen. Problems were identified and resolved as quickly as possible.

“I really enjoyed the wire-framing process and then presenting to the rest of the team. The team shared the same vision right from the start which meant that it was easy to get feedback, but with a range of skills/ perspectives it was also really valuable to get critical feedback from different points of view.” - Sam Lihou, Full Stack Developer at Gravitywell

One of the key decisions taken early on was to use a tried and trusted UI kit: Google's Material Design. This allowed us to start prototyping in Adobe XD, whilst developers were working on specific features, because we already had a shared library of interface elements. The only downside was a lack of individuality - without further styling work, our product was in danger of looking like Gmail's settings screen.

Of course Material Design did not provide all of the answers but having a clickable prototype allowed us to experiment and spot elements that were missing or didn't feel right. At the same time, the technical team were spotting other issues that emerged during testing of their work. For example: we hadn't included a visual indicator for video upload completions and we felt that Instructors would likely be unsure as to the status of the upload without one.

Fortunately Adobe XD and the UI kit facilitated quick changes that could be shared with the whole team straight away. Changes that required developer input were added to the Jira backlog and were shown in our end-of-day demos.

A major goal for the week was to name our new service, create an identity for it and launch a website which promotes it to Pilates Instructors.

There's no getting around how hard it is to find a name for a new brand. There are lots of techniques which can help find one and it's usually advisable to test names out with users but our deadline meant that we had to run with whatever we could agree upon within a single morning.

The main requirements were:

• Short and snappy
• Would work for other sectors in wellness and education, so we could expand in the future
• Was not already used for an app or in the wellness and education sectors

We brainstormed 'themes' related to the service we were building, for example 'watch and learn', 'practising', 'gradual improvement'. But the most interesting words came out of the theme of 'Studying'. 'Sensei' is a great Japanese word for a teacher but it's very commonly used already. The Japanese word for student, 'Gakusei' is not commonly known but felt a little awkward for more western users. Shortening the word to just 'study' gave us 'Gaku' which resonated immediately and stood far above the other options. We ran it past a couple of Instructors and then pushed the button on a domain name purchase quickly, before we changed our minds.

“I really enjoyed working on the brand. I had around one day to deliver the brand for the app, and despite the time pressure of the hackathon I actually really enjoy it. It forces us to make quick gutsy decisions. Having the confidence in ourselves to go with an idea meant we could move forward swiftly and successfully.” - Matt Boyle, Designer at Gravitywell

Whilst looking at visual themes from Japan, Matt pursued the idea of two Koi carp (the iconic Japanese fish) representing the master and student relationship. This worked even better because the silhouettes of two Koi swimming around each other would closely resemble the Ying Yang symbol which in turn indicates complementary parts working together as a greater whole. It was an immediate hit and it jumped off the page of alternative concepts.

Towards the end of the week we could move on to the design and build of a marketing website for the new service, aimed at Instructors for now. Although we had some draft copy and a photoshoot featuring Gravitywell team members modelling as Pilates Instructor and Student, designing and building a site in just one day was going to be a huge challenge.

However, there are shortcuts we can take when putting together small promo sites, even when the entire technical team was working on the actual service itself, as Matt says: “I loved building the site in Wix! I've built a handful of Wix websites now and I still seem to be in the honeymoon phase with it. As a designer with limited knowledge of code, I can put together a good looking responsive one page website in a day or two. It meant I didn't need to hassle the devs and they could focus building the app ready for launch.”

The Gaku website was launched on the last day of the event, check it out here.

Matt also points out that other collaboration tools have improved efficiency this week: “Communications were very easy. Apps like Slack, Google Docs, Skype and Adobe XD have enhanced our workflow no end. I was working remotely, and having the whole team online at my fingertips meant that we could have daily video catchups, discuss ideas, share designs, and supply assets with no fuss whatsoever.”

 

What did we have to compromise?

We had a short time frame and launching a finished product was the priority. Sam describes the impact: “Things needed to be kept simple, which helped us to create a really user-friendly app, because out of necessity, complex UI patterns (or just ones that would take time to implement) were kept out of the design. However it would be interesting to add a first user journey, and add some more helpful feedback/ notifications to the user when things happen. For example, on the client app, there isn't any feedback when you don't have any instructors - it just presents a blank screen.”

And if we had more time?

Of course User Testing is the big one. Although this wasn’t an area we could spend much time on during the event, it’s certainly the next step for the project, if we’re able to continue.

Matt felt that we could take the brand a lot further: “The nature of the project meant I needed to decide on the bare bones of a brand concept (which was essentially just name, logo, font and colour palette) before developing how it is applied. Since launching the app, I'd love to review the brand as a whole and evolve the identity across all platforms and materials.”

Whereas Sam saw how small additions to the UI could make a big difference to the experience: “I think that the apps could benefit from some more fluid animation between screens. I mean everything from screen transitions to visual animated feedback on button clicks, to the fish-spinner which we wanted to implement as soon as we saw the logo but knew we would not have the time. Using libraries such as BodyMovin / Lottie could let us do some really interesting things with animation."

Sometimes deadlines and restrictions are a source of creativity and inspiration. If you have the right team then a Hackathon is a fun way to explore what you’re capable of and boost everyone’s confidence.

We’d love to know about your experiences with design at Hackathons. Get in touch on Twitter to tell us about your event or offer us any tips.

If you'd like to know more detail about the 2018 Hackathon event then you have the following options:
- Technical 
- Daily diary posts
- How to run your own hackathon