If you think that digital design is that shaded part delineated by the Photoshop frame, I am afraid you are wrong. We have already talked about the job of a product designer, and judging from works and talks of our designers I’m saying that there can be no successful project without talented folks employed in the position of a designer. Correct me if I am wrong.
Professional design is close to engineering, no matter whether it’s an MVP of a shopping list or a particle-smashing super collider. Design is not the final product you can look at and play with, it’s a long process and a load of work preceding the final result. Creating UX design for mobile apps, we aim to deliver a successful high quality product that will satisfy the requirements of our clients and the wishes of the end users. To make this happen, we divide all the design process into user experience techniques.
Whatever it is you have to do, there is always the most difficult stage and this stage is start. Once you take a pencil and do the first stroke, it gets easier. But what this first stroke should look like? In other words, what is the start in the designing process?
The first of UX techniques to design an app is all about identifying roles. Hm...protagonist, secondary lead and all those guys extras who never get to talk? Not exactly, but these people are also important, no matter what you call them.
Roles do not necessarily belong to people only. They can be the end user of the product, a mobile device, a server the app will communicate with, an organization the app is going to serve for and all other personas engaged in the interaction with the final product when it is being used.
We need to identify the roles in order to understand the ecosystem we are planning to grow the product in. Once it’s done, it’ll be easier to outline the user experience landscape to define the functions the app is going to perform, as well as the scope of work each role has to complete.
Now it really sounds like fiction. By the way, do you know that before inviting actors and shooting scenes movie creators sit down and draw? They need to understand visually the order of actions, the content of each film frame, the most favorable moments, weak spots and a lot more. Here is the storyboard for Matrix. Remember those episodes in the movie?
Storyboarding used in movie production is one example. But as long as we are talking about design which is associated with graphics, why don’t we look back at the history of writing of the human race? It started from storyboarding - rock carvings, frescoes, painting animals on the cage walls and all that. Obviously, illustrating things works best for understanding of any concept or idea.
Coming back to our digital age, how can we use storyboarding in mobile app design? We can draw comics with different characters and situations!
You think you can skip this step if the situation is as clear as a day and as simple as black and white? Go ahead but there is a big risk that ignoring such an important technique won’t do any good for success of your product.
The common mistake is to think that trivial at the first sight situation doesn’t need a spell-out. However, once you take a simple scenario of user interaction with your product and break it down into tiny pieces, you will notice a lot of issues you haven’t paid attention to. Storyboarding is exactly what you need to take into account all the nuances, determine design solutions and put them to the fore.
The whole point of this step is to find those “a-Ha” moments we want from the team members and clients. Wonder what the hell is “a-Ha” moment? This is the moment of enlightenment when you get the idea of what is going on and why.
Storyboarding helps us find problems and fix them. It can prevent possible issues in the future, because discovering them later will apparently cost you more. We will make many mistakes in design anyway. Mistakes are needed for perfection. But the faster they become visible, the faster they will be corrected.
“My strategy has always been: be wrong as fast as we can,” said Andrew Stanton, an American film director.
Storyboarding helps us think. It helps us understand existing scenarios, as well as test the hypotheses for potential scenarios. Illustrating ideas is very helpful for others to get a better understanding of what we are trying to say. It’s like explaining directions to the train station in the city. You draw it on a piece of paper and any casual passer knows exactly how to get from the point where they are now to the destination where they want to be.
Read also: How to create UX design that makes money
Designer’s main skill is not Photoshop in fact, but the ability to formulate and describe a situation or a scenario. You divide the user of the product into a bunch of different characters and try out various stories that can happen to a particular character. Then you evaluate the probability of a situation in percentage and undertake measures to achieve the best user experience.
Use-case diagram / behavioral diagram
Behavioral diagram describes behavior of external users (actors) visually. It identifies the exact actions each actor can take. For example, if we talk about library, there are two actors here. One is a librarian, the other one is a library customer. The library customer can search for or borrow a book, whereas the librarian can search for a book, add a book and remove a book.
In our realia, a Greeting Card app, for example, will have two actors, one of which will be a Congratulator, the other one - a Birthday Boy. The Congratulator can log in with Facebook, choose a friend from the list of friends integrated from Facebook, choose a card, write his wishes and send a card to the Birthday Boy. Let's assume, the latter does not have this app installed on his mobile device. He can get the notification about the greeting card sent by somebody he knows, come to the app store and install the Greeting Card application. Once there, the Birthday Boy can receive the card, like it and do whatever you wish him to do to enable the interaction with the Congratulator - send a reply, for instance. See below what the behavioral diagram for this case looks like.
User stories / behavioral specification
This part is an actual written description of each user case, that the interaction with your product can produce. All user stories start with “As a user I can…” and then follows a detailed description of what a user can do with the app.
When we have all the user stories thoroughly outlined, we can start planning sprints. For this we would need to set a priority for each user case and estimate the time in hours it will take to implement the function described in the user story. The highest priority items go to the production first. A sprint usually lasts one-two weeks. Its scope is planned according to the number of hours we need to implement a certain function. Typically one sprint will include a group of cases described in the user stories.
When we have finished working on user stories, we get a clearer idea of the user interaction with your mobile application. This helps us create a diagram of the user behavior or a user flow. User flow is all about geometry. What I mean is that we need shapes with a certain definition to engage them in the diagram. Let me give you some examples:
- Square displays a page (login screen, home page, user profile)
- Trapeze - user decision (user selects, user filters, user types in)
- Diamond - computer decision (sign-in invalid, account OK)
- Round - error message
- Blue arrow - registered user passway
- Red arrow - new user passway
When we have all the shapes and user cases, we are good to put them on paper and draw a diagram that describes the process of the user interaction with your app.
Read also: Animation in user interface creation
The user-flow helps to identify a set of functions for each page and how the screens intersect. Mind map represents the architecture of the product. It illustrates the structure of the app and relations between elements. Mind maps are some sort of wireframes without phone screens. Their main advantage is that they are very fast to make. There are online resources for creating mind maps out there so we actually make the map together with the client and the team in real time. This would allow us to save time introducing changes and discussing the details of the project, especially given the particularities of the remote collaboration. See below the mind map of our countdown app, My Day.
Finally! Wireframes are the skeletons of the final design. The point of wireframes is to assign functionality to each screen and show the dependency between the screens. It’s the ultimate draft before coloring. Only when each wireframe is discussed with the team and approved by the client do we start working on colorful buttons, beautiful animations and original custom elements.
Do you know that it’s possible to interact with and test the app before user interface design is passed to the coders? Fast prototyping services, such as invisionapp.com or mockup.io can help you see the app in action at the first stages of its development. All we need to do is upload our wireframes / mockups to one of those services and dynamic elements, such as clickable buttons or scrollable lists will be available on each screen.
Wireframing is followed by the mockups creation. We make prototypes of the mockups and send them to the client one by one. This way the client gets a working prototype that looks exactly like the future product. You can already brag about your app to your friends, show it to the investors or test on the target audience to get the feedback.
Sounds like fun, doesn’t it?
Yalantis designers keep building awesome design concepts and animations. Take a look at them on our Dribbble.
Looking forward to your exciting projects!