When I heard, that at the end of my second semester at FH Joanneum and its master’s program “Content Strategy”, I was going to protoype my own App I was excited and nervous at the same time.
As a Marketing/Communications Professional this was complete uncharted territory for me. Usually that’s what external agencies do at my workplace. So here are my findings of the course “User experience (UX) & Interaction design (ID)”.
“We’re creating an App together. And to start with grab a piece of paper and a pencil.” …that’s what our lecturerer told us.
Seriously? That’s how you do it.? Apparently yes! Let me take you through the progress step by step and introduce some helpful tools.*
Tip: Of course you can use these findings also for prototyping a Website for example.
- Tool: Paper & Pencil
Every good app starts with a good draft. At the very beginning of every draft it’s not design that’s important rather than functionality, connections and structure. Arvid Brobeck compared building an App/a prototype to building a House. To start with, when building a house you need a good and solid construct before you start picking furniture.
Tip: So, start from scratch, erase, delete, add, step back and let the drawing sit, then come back and enhance your drawn protoype again.
In class we were told to draw an App called “Puppy finder”, a platform where people who wanted to have a dog but could’nt would be able to “borrow” one for an afternoon and take it for a walk or play with it.
Trick: As I finished my drawing i uploaded it into the App Marvel, that allowed me to present my drawing better.
Wanna see? My Puppy Findr Prototype.
As soon as you’re happy with your paper-pencil drawing you can start transferring it to Balsamiq. Balsamiq helps you to digitalize your drawing, still leaves room for improvements and sketching and let’s you add connections between the single slides. This process is called “Wireframing”.
Trick: Here’s a Video on how to work with Balsamiq. Believe me: It’s super easy and the results are already making your product quite tangible.
Out of the tools i got to know within the “UX and ID” course Figma is my absolute favourite. It helps you to breathe life into your prototype and makes it look super real at a stage where you probably did not even think about the technical requirement for your App.
For this part of the course we were told to create an App for a National History Museum. The challenge of every museum mainly is, that they have a lot of content to present. Thus, the task was to create an App that allows you to access the amount of information in a user-friendly way and helps you to navigate easily.
Tip: This tool makes you want to fall into the part of a designer, as it allows you to add pictures, different fonts etc. The doo
Wanna see? Here’s My Fake National History Musem on Figma.
If you’re interested into reading and learning more about UX, here’s a great blogpost of one of my colleagues (German only):
If you’re going to use one of the tools I talked about, I would be happy to see some results — leave me a comment :)
