Challenge 02 — Wireframing — Iron Hack
Or… one of those days!
This is a prework challenge from Iron Hack's UI/UX Design Bootcamp. The goal here is to make an interactive prototype with wireframe screens based on any app.
We could choose any app to work with, so I chose Down Dog, a Yoga app that I've been using for a while now.
Although I just use a couple of screens in my daily use, and that the final product was supposed to include only 5 screens, but I went a little crazy here and did almost all of the screens. Time to spare? Not exactly!
I was aiming to understand what is like to work in a huge file, with lots of lines from the prototype model going on — which will probably be my future work scenario — and test the computer I'm using, as I did not know how much memory it was going to ask for in a project like this. And as this challenge all the screens were going to be only wireframes, I thought it would be a good moment to explore more the prototyping side
('only wireframes', she said — wait and see 😂).
So first of all I took screenshots on my phone and arrange it in Sketch. For each screen, a new artboard, and a corresponding name. In total I did 69 artboards.
Madness aside, the main task in this app for a normal user would be:
- Open the app, adjust the duration of the session and the level of difficulty, then attend a class of yoga.
I did some symbols from scratch, others were provided by the school, and others were download from sites of free resources. A lot of icons though were not included in this page, as I didn't saw the need of re-using it more than once or twice.
Main screen
You'll notice that the font is not the same, but I chose one with the same general typographic characteristics. I've put an image symbol underneath to indicate the photo from the original screen. All the start buttons in the app lead to the loading screen that comes before the video class.
Paused video
As wireframing is identifying the most important features of each screen to convey its idea, I did the buttons, progression bar, play, and the selection of poses (which is something I really love to use). Now I see that I could’ve simplified it even more, my wireframes are almost mid-fidelity.
Instruction
Here is a screen that has some of the main components I had to use over and over. I've found out there's these selection buttons, in a variation of size (narrow, large) , and amount of information (one line, two lines, title and up to three lines of text). Also there's the fading in the end of the screen, that I made with a mixture of shadow in the button, position of layers, and opacity. It is not quite correct the measurements of them all, as I reutilised it from the screens before, and noticed that the measurements (height of the buttons, spaces in between, height and position of the titles, and many others) across the app were not consistent. If I was to redo this app, I would probably start from there.
Other screens
There was some screens that were really similar to others, but there was also the odd ones. For these, I mainly took advantage of masks to get the proper symbols to each screen.
Interactive Prototype
This was the part that took me a long time. And this was the part I've learned the most.
“An acorn doesn’t become an oak overnight”
I realised that I made a terrible mistake 😅. I lost focus and tried to embrace the world, but I do not have all the abilities yet. But in the middle of the work I can't just abandon it all, I have to react and work with what I have at my disposal.
So I did connect the prototype in Sketch and it looked like this. I got really excited with my work, but then I’ve noticed that this interactive model was not recognising when I wanted it to change to landscape for example, or it was not really doing the hover mode for changing from one state to another.
I decided to change it to Invision. Exported my models and connected it all. For the landscape problem, I had to rotate it myself. I guess I can't just leave the artboard in two orientations in the same page, unless I'm going to rotate them manually afterwards.
For the hover mode, again I could not do it. So I recurred to a way to the model respond like I wanted to, and that was doing half button to swipe up and half button to swipe down.
Not really proud of doing things (literally) halfway, but I thought the following:
- I have a due date to deliver this challenge
- I can present my idea, even though it's not perfect
- I'm still learning and I don't have to know everything. This is a pre-course exercise, which means I'll have the time to learn it the right way. Speed down.
- Now I know something else that I need to improve.
So, even though it might sound like a failure, it was a really valuable exercise for me, not only for my technical skills, but also for my soft skills.
This is the link for the final interactive prototype in Invision:
Fell free to test it and don't forget the half up, half down swipe on the lists. 🤫
Final thoughts
I underestimated this challenge, and I did an effort to make it more complex. But I was not counting that my lack of experience plus a sequence of events would mislead me so much from my main task and take so much time as it did.
I'm delivering a wireframe exercise, but I'm sure I have learned so much more than just wireframes, and for life.
