Turning an Idea Into a Jive App – Design and Usability at Jive Partner Pokeshot///SMZ

October 7, 2014

We not only develop social software and Jive apps, but also create the design for these programs and tools. Emanuel Popa is the man in charge of such matters at Pokeshot///SMZ. He explains what role design plays in the development of an app, how the design process works and what challenges he faces.

Understanding the user’s perspective

Emanuel Popa is responsible for all things visual at Pokeshot///SMZ. Together with Managing Partner Nils Heuer, he oversees the conception and development of Jive apps, plugins and other products. But according to Emanuel, design is not that important in the initial stage of development: “There are two scenarios that we commonly experience: Either we have an idea for an app that will improve business processes, or a client suggests what a tool should accomplish. In both scenarios, however, sketches are seldom done to show how the whole thing should look.” So he is faced with the challenge of having to deal with different sets of demands. On the one hand, there are people who know virtually nothing about programming and only focus on the final product. On the other hand, there are experts who look at everything from a technical point of view and lose sight of the needs of normal users and thus disregard day-to-day usability. Emanuel has to strike a balance between these competing approaches.

This is when the concept stage begins, which includes setting priorities in terms of what the Jive app must be able to do and what type of users will be working with the app. Emanuel tries to put himself in the user’s shoes in order to find out what could be helpful for them, for example: What features are absolutely essential on the start page? What content and functions must be accessible via the sub-menus? And what elements are less important and thus don’t have to be reachable at all times? To find the answers to questions like these, Emanuel uses so-called user experience flows that simulate users’ clicks through a specific app to discover the optimal path.

Sketch

The mock-up phase

Once it’s clear what an app’s key flows and features are, it’s time to start the mock-up phase. Like a pencil drawing, a mock-up serves as a first draft of the final design. It incorporates the findings from the user experience flows to provide an initial sense of how the app could ultimately look. The mock-up lets Emanuel try different things and make improvements in case a feature was overlooked. The so-called “housewife test,” as it is known in Germany, is also conducted on the unfinished app in the mock-up phase. “People from outside who have absolutely nothing to do with the app’s development test the program’s usability. If they are able to complete all tasks, the app is good enough,” explains Emanuel. It’s then ready to move into the next development phase.

The app’s look

windows jive
Two versions of a mobile app for windows phone: left the first version, right the final version

The next step consists of Nils augmenting the hard code of the mock-up with dynamic data from the database. Since it’s now clear which interactive elements will be included and where they should be, the user interfaces can be finalized. This is when Emanuel actually begins designing the app’s look. Design-wise, anything is possible, but one doesn’t want to create something entirely new and off the wall. This is particularly true when it comes to apps that will be integrated in an existing platform like Jive; here the challenge is to not stand out too much from the standard environment while also being perceived as an independent app. But the design is not only about recognition value. For normal users, it’s extremely important that the app is pleasing to the eye and easy to navigate, and its text is easily legible.

Thus the design serves a dual purpose: On the one hand, it provides structure and form to content and tools. On the other hand, it supports users when they don’t know what to do next or need help with a specific problem. “Apps don’t usually come with a traditional user’s manual; instead, the design has to ensure that everything is intuitive and self-explanatory,” says Emanuel. According to him, this is where the biggest challenge lies: navigation, content and interaction have to complement one another and not compete for attention, while also being interweaved in a way that makes relevant features and information easily accessible at all times.

01_briefme
various steps but easy to reach: page of the feedback app

On the last visual one see a still-unfinished “Feedback App.” It is supposed to enable employees to quickly give open and honest feedback to managers or project directors at the end of a project or a certain time period. There are a lot of steps involved and a whole heap of data. Emanuel’s chief task was to find a way to clearly arrange the various steps while also making them easy to reach. His solutions were simple, yet astonishing: Tapping the “Your Goals” button will slide out a list of the user’s important goals, making the goals accessible at any time but not always in view. Small icons symbolizing the various tasks allow users to get their bearings fast and prevent the overview screen from being cluttered with text.

Design development is closely related to the other strengths of Pokeshot///SMZ, an official Jive Partner. Here design and usability are tackled in the same process and work together as one unit, thus bringing about a pleasing and appealing work environment within a thriving social business. This is also how the company created its apps SmarterPath and Translation Manager as well as its Connectors for Integrated Solutions.

[hr]

About the author:

Emanuel Popa has worked as web designer since 2005. He studied interaction design, graphic design and illustration at GSO FH Nürnberg between 2010 and 2013. After finishing his Bachelor of Arts he started to support the Pokeshot///SMZ team as front end (product) developer and as designer.

 

Leave a Reply

Your email address will not be published. Required fields are marked *