Saving Development Time by Creating Mockup

This article explains how, in practice, a development team leader (or product managers) can save time, effort and money, while maintaining a happier team. I offer my insight of how incorporating a simple UX task into the product development process, many questions can be answered a long time before development production starts. Interactive mockups are a useful way to get 85-99% of the design related issues out of the way, before 1 line of code is written. Here is how you can create one.

WHAT IS THE INHERIT BUSINESS PROBLEM OF SOFTWARE DEVELOPMENT?

Standard app development can be very time consuming and very in-effective. It is a fact known to small and large organizations. Any professional can estimate time on a task they can complete on their own. Very few can estimate a time of a team, and don’t get me started when it comes to remote team, or working with other stakeholders, like external clients…

Really recommend watching this video, if you haven’t seen it yet. The EXPERT series is doing a wonderful job in explaining the troubles of designers .

Here are some insights about each of the team members:

Developers usually just want to write code. They only need to know what is required from them, and they can do the rest.

Graphic Designers just want to draw the UI. If you do not give them borders, they will draw outside of it.

Experience Designers would need time to try various designs and experiences until they find the best experience for the product. They need testing cycles to perfect the experience design, working with clients.

Project manager just want people to stand their deadlines.

The Client (or customer) just wants the best product to market, with 0 investment involved. Of course they are not as responsive to the team questions, since they have other things to do.

And you, the Product Manager, need to produce the best possible product with the best possible customer experience and to make sure the market will pay for it.

"If everybody wants to do their job at the best possible way, it is going to be one big mess...

You could see that if all start their work at the same point in time, it is going to be a mess, since everybody wants to do their job at the best possible way. And when designers will change their minds about a certain feature (and this should happen for every good designer), developers will not like it…

SUGGESTED SOLUTION: DESIGN THINKING WITH DEVELOPERS

BUT if you make the design thinking process together with the entire team, you can get 3 clear advantages. One is that everybody are involved in the entire thinking process of the designers, which would result in a more peaceful work environment, and also a better future understanding of the reason behind their seemingly “weird” decisions.

“Instead of writing code patches, developers write the right code from the start”

Second advantage is the time it would actually take to develop the app. You would have to see it to believe. This can cut in half the time the process takes today. When developers know exactly what the required result should be, they would know how to prepare the code for it. Instead of writing “patches”, they write the correct code from the start. This has proven over and over again to be significantly faster way to reach a higher quality release.

The last clear advantage is a cheaper process, since we accomplish the same goals with less man hours. Happier team, faster development, higher quality of result and cheaper - you cannot say no.

SO WHAT IS A MOCKUP?

Creating an interactive mockup is the result of the design thinking process. A mockup expresses the user experience offered by the product. It has to be precise in the experience, but not precise in the graphic level of finishing. Graphic designers can work inside the borders of UX, but you should not force the experience designer to work within a graphic designer rules.

The main principle here, is that the mockup is code-free, and that’s why personally I do not like to call this stage a prototype, since usually prototypes involves some level of coding. The mockup is a result of user experience design processes. After those, the whole team can be aligned with the target product. After those, work can be made effectively in parallel and without dependencies. 

PROCESS OF MAKING A MOCKUP

In the rest of this article, I show how to create a mockup for a sample mobile app. It is the same process for website or PC app. I use a software called Invision Studio for this, but there many other options that follow the same process concept.

STEP 1: EXTRACTING SCREENS INTO SEPARATE PICS

STEP 2: SEPARATE SCREENS

STEP 3: NEW PROJECT IN INVISION STUDIO

STEP 4: PLACE IMAGES IN ARTBOARDS

STEP 5: CREATE RECTANGLE PER BUTTON

STEP 6: CREATE INTERACTION PER BUTTON

STEP 7: TRANSPARENT RECTANGLE

STEP 8: FINAL RESULT

STEP 9: MULTI-SCREEN ADAPTATION

STEP 10: PROJECT SHARE ONLINE

STEP 11: SIGN IN TO ONLINE INVISION ACCOUNT

STEP 12: SHARE THE PROJECT LINK WITH COLLABORATORS TO GET FEEDBACK

CLOSURE

I hope this article will help product managers and development teams to create mockups more easy, and this will allow them to have faster user testing sessions, that will help incorporating feedback. I promise after the first time you would give it a try, you will be convinced to keep following this because of witnessing the achievement of more quality in less time.

----------------------------------------------------------------------------------------------------------

I write a journal on my adventures in Italy, discovering emergent techs in Europe and my new professional path in the Super-Cars industry. Register to my Newsletter here.

----------------------------------------------------------------------------------------------------------

The author is a product consultant, experienced with emergent technologies. MBA graduate in Supercars, Superbikes and Motorsports of the University of Bologna Business School (BBS) in Villa Guastavillani.