Wireframing: The architecture of information.

Danique Nagel
Nov 3 · 5 min read

Without getting lost in pretty design work, it is necessary to start our work as designer with simple black and white wireframes. Human Design Thinking means that we must know the user’s behavior, what its preferences and needs are and convert these in simple drawings for a future prototype.

ROMWOD is an application for people that want to increase their mobility. It’s mostly used in the Crossfit community. It provides you a daily mobility workout, with an option for a short version of this daily mobility workout. It is a paid program, with a choice of monthly or a yearly payment.

ROMWOD is available for multiple devices, such as iPhone, iPad, Apple TV, Airplay, Chromecast and all browser. This means that the designer needs to design for these multiple devices.


| THE BLACK AND WHITE LANDSCAPE
Every designer has its own habits. One first sketches some drawings on paper and the other start of making his first wireframes using a software program. The main goal in this first phase is to listen to the user and not be distracted by any aesthetic features.
Below you find 6 wireframes of the ROMWOD app that are being ‘reversed engineered’. By taking all its visual elements we are left with only the black and white sketch of the app.

| WIREFRAMING WITH PEN AND PAPER
Below the first sketches made on paper (the click-through buttons are lightly marked with pencil).

From left to right: screen 1, screen 2, screen 3.
From left to right: screen 4, screen 5, screen 6.

| WIREFRAMING WITH SKETCH
Below the first wireframes made in Sketch using wireframe kits. Per screen is described what each screen contains and which elements were used.

From left to right: screen 1, screen 2, screen 3.

SCREEN 1: Home screen.
This is the screen you see when opening the app. This home screen has a hamburger-menu, a search-button and below another tab-bar. The home screen shows the mobility workout of today and its description. Clicking on the video, you will go to screen number 2.

SCREEN 2: Workout of the day
This screen shows the workout of the day in detail. On top, navigation icon for going back and a search-button. You can play the video, but also have the option for a shorter version. It has a description of the total workout, but also detailed out the poses that are being used during this workout. There are two more option that can be chosen, the supplies that are needed during this workout and a button with more (here you find a favorite-button and a download-button).

SCREEN 3: Short version of the Workout of the day
Today we have chosen for a shorter version of the workout. This screen is similar to screen number 2, only here you are already in the shorter version, so this option is not available on this screen.

From left to right: screen 4, screen 5, screen 6.

SCREEN 4: Particular pose
E.g.: ‘Today I want to focus a little bit more on pose A, so before starting the workout, I want to watch the video of pose A that will be in the short version of the workout of the day.’ This screen shows the option of liking it (heart) and downloading it, so the pose can be watched offline.

SCREEN 5: Search option
All the above screens have the search-button on the top right. Screen 5 shows clicking on this button. Type in any search term you want, pose, target area or exercise and a list of results will show below this search-button (not shown on this screen or any other screens). The results will only show the workouts that is linked with this search term. Below is a quick-start-button. By clicking on this screen, you go to screen 6, another option of searching for poses, exercises and duration.Clicking on the top right cross, you go back to the previous screen.

SCREEN 6: Quick start
This screen will give you three tabs, target area, exercises and duration. Each tab will show a list of all the possible target areas, all the possible exercises and under duration 4 duration categories. Below the search-button, by clicking on this button you go back to screen 5. Another option to navigate back is to click on the cross on the top right.

| UI ELEMENTS IN THE ROMWOD APP
This application contains a couple of UI elements:
→ Input Controls: buttons and text fields.
→ Navigational Components: search field, video slider and icons (search, back, hamburger menu).
→ Informational Components: icons (download, favorite), progress bar.

| WIREFRAME PROTOTYPE IN INVISION
After the paper and pen sketches and the wireframes made in Sketch, the last step is to make these wireframes interactive wireflows: the first prototype.

Click HERE to go to the ROMWOD app first prototype.


| REFLECTION
The reason I have chosen this app, was because in the previous exercise we also had to chose an app to work with. In this exercise I chose the ROMWOD app. To go more in depth, I have chose to stick with the same app. I have noticed that I would design a couple of things different, because some things did not make sense. For instance, there is a one path you can chose that has a progress bar. But for daily users, there is not something like a check-off function or share function, to make things more interactive and share it with the ROMWOD users community.

Danique Nagel

Written by

Starting in November 2019 my UX/UI design career by participating the UX/UI design fulltime bootcamp at IRONHACK in Amsterdam.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade