Challenge 2: Wireframing

Case study of my second IRONHACK pre-work challenge

What is the goal of this Challenge?

Throughout this exercice we are going to work on a Mid-fidelity wireframe/ This is the start of the 4th step of the Design Thinking process.

During the previous steps which are empathise, define and ideate you have been analyzing stakeholders and users needs to make them match together. Then, you have drawn a low-fidelity sketch to test your ideas. Basically using sketches allows the designers to save time during the process and foster their creativity.

The mid-fidelity will also be the first digital ouput and is definitely useful to have a first glance at your website/application in black and white. The aim is not to provide UI (user interface/ style) but focus on the UX part. It’s more than helpful to make in depth testing before going further toward the final high-fidelity mockup.

In this case we are not going to create features or redesign something. We have to select our favorite application and choose a happy path which is an optimal user journey. From the original high-fidelity frames we must make the reverse process and provide the mid-fidelity concept.

In a previous exercise we had to clone the user interface, so it has been definitely helpful to use the same base, as a start, in the software, Figma.

What subject did I choose?

As you may have a clue, I worked on the Nike Run Club application. I’m used to track my runs with it. I thought it was a nice way to get started with Figma because the application is clear and the user flow is intuitive.

Here are the clones I did in the previous exercise:

As I mentioned earlier, I created these frames on Figma. I chose this software because it is highly recommended. It is really convenient, easy to use, full of features and plug-ins, collaborative and it has a nice users community. I use the UI kit given by Ironhack and added many plug-ins by my own, like map maker, iconify and image palette.

Let’s see now the Mid-fidelity I’ve created:

Few words about the happy path:

1° The home page: This frame is created to go straight to the point. You don’t want to loose your time or your determination. You’re out on the field, ready to start, just one click from tracking your best run. Here we go!

2° That will be the main screen during your run, providing essential informations such as time, speed, calories and distance. By clicking on the stop button you can have a little break. with a longer press you would end your run.

3° This page displays a map and few more details about your performance. From this frame you can either choose to end or resume your run. In this scenario I chose to end it to get to the final frame.

4° In the end of this user path you can find in depth details, edit and save your run. you will be able to access to this archive later and it also helps the application to understand your level and progress.

It has been really challenging because it was the first time I used this software. I needed to search a lot of tutorials and tips to master Figma. However I’m used to work with the Adobe suit somehow and I was not absolutely lost. As an autodidact, I like the “learning by doing” methodology. I can’t wait now to start the Ironhack program to go further, measure the full extent of this tool and enhance my workflow.

Thanks for your attention and thorough reading. I hope that this article was helpful to discover what could be a typical passionate beginner’s journey through the UX/UI univers.