Week 3 Ironhack — SmartCamp

This week’s challenge was about designing a learning platform for teens

‘SmartCamp’ is a fictional camp for kids (12–16 years) where they can participate in workshops about cooking, technology, ecology, music and more.

The challenge was to create an MVP (Minimum Viable Product) for users who couldn’t attend the Smart Camp, giving them a sense of inclusion and capacity to learn, virtually.

This week we worked in pairs — so with Erica, we went through the steps we’ve learned so far in the bootcamp and applied it to this new challenge.

At Week 3, a good first step was to establish our roles and figure out how we like to work. We discovered we are both visual people so we decided to use miro primarily for exchanging ideas, and Notion for organising text heavy information.


We began with research which was quite tricky this week given the target user. We had to find teenagers for our user research but with the help of family and friends we managed to get a fair response from our survey which aimed to understand:

  • What devices teenagers use
  • How they like to learn
  • What apps they use heavily
  • What apps they use to keep in touch with friends

Our survey responses, although not comprehensive, immediately highlighted that our target user uses mobile phones primarily, no great surprise there, but it supported our assumptions to design an app for mobile.

No-one surveyed used a laptop or computer so we felt even a desktop version would be a waste of time. A huge percentage used snapchat to communicate to friends — well past facebook or instagram, so we thought it a good idea to look into these apps to inform our design decisions later down the line.

We wanted to do follow-up interviews to get more information from the user, but it wasn’t possible in our time frame. As a substitute, we looked into existing research of GenZ: online habits, learning behaviours, screen time and so on. This was an attempt to fill the gaps left by lack of interviews.

Some of our research boards on miro

We did a features comparison with e-learning websites and apps to identify best practices and take ideas that we could use for our camp workshop learning app.


From the research and survey responses, we defined the user persona and created a user journey to contextualise and ‘bring to life’ the archetype user of our still undefined product.

Emma: our user persona

We then pulled together everything we had up to that point and made an affinity diagram. The purpose of which is to refine and categorise the numerous ideas, assumptions, research responses and thoughts we had so far.

The Affinity Map helped narrow the focus of our findings

From there we identified a few ‘How Might We…’ statements and stuck to one that was fairly close to the brief outline:

“How might we develop an engaging mobile app for teenagers that cannot attend the workshop camp”

From there we worked on the site map which took longer than expected because it became more of a brain-storming session. We went into great detail over what features the app could have and how it would work. I realise more the value of these processes because they keep you on track and stop you from drifting off down different paths.

So the MOSCOW feature prioritisation was a great help in honing in on which features to include which in turn helped define our user flow and create the prototype.

MOSCOW method — helped us prioritise the app features


From there we each came up with hand drawn ideas for the app and then created a user flow which was quickly turned to low-fi wireframes using InVision Freehand. (Which is a great tool as it is faster than hand drawing)

Sign-up: low-fi wireframes

From there we created the midfi wireframes (in Sketch) and moved the files to Figma so we could work together on keeping the consistency of our mid-fi’s and prototype it.

A few Mid-fidelity wireframes

Prototyping and Testing

Mid-fidelity Prototype

We tested the prototype with family and friends to identify any issues for iteration. There were a few minor issues that come with the mid-fi that we quickly resolved and refined and created from that the hi-fi screens and part of the prototype.

Hi-Fidelity Prototype (unfinished)


I realised more in this week’s project that the steps in the Design process aren’t linear and that there is a constant back and forth between research, defining the problem, creating a solution, testing and iterating. Each time assumptions are challenged and the design is refined and refined. The design is never finished!




Illustrator & UX/UI designer, Berlin www.davidlymburn.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Virtual Spaces inspired from Studios

Style guides, pattern libraries and design systems.

How I created Quopi?

How To Build A Social Media App?

Being a better witness

How to “experiencify” your offerings

Interview Series with Designers — Sarah

UI/UX Case Study on Netflix

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David L

David L

Illustrator & UX/UI designer, Berlin www.davidlymburn.com

More from Medium

There is a design solution for everyone

When it Comes to Design, the Sprinkles Matter

Part 2 | Caixa Bank Senior: a redesign of the branch structure

Terappie —Easing the patient’s access to remote psychology