sebaas.co - Grote Overstraat 29B

When presenting an idea, great visualisation is important for others to understand. After all, we all have our own interpretations.
‍

Visualisation can boost the actual design phase or be the first basic iteration of a design. It doesn't matter how beautiful your code is if the design is bad. I often refer to conceptual visualisation as the ’initial design sprint’.

‍

The initial design sprint

Let's take the idea for an app as an example. During an initial design sprint, the focus is to create a general user flow and 'look and feel' in a small time-period (often a week). So, how do you ensure that your design, and therefore your idea, is very understandable for the stakeholders and the users? 

‍

Getting started

Together with the client the first step is to research the actual problem and/or need. This process can be divided into phases. Every day can be a separate phase (just like design sprints, but with less focus on one specific area).

The foundation

It is important to clarify what the expecteddeliverable at the end of the week is, how you need to present it and what the tone of voice should be. This will align everyone that is working on the project. Answering these initial questions is crucial to the success of an initial design print. In the first setting, you write out the concept in user stories and filter them into functionalities, creating a clear image of the app’s structure. You will label and place them together by their relevance and their cohesion. Don't forget to prioritise, so you know exactly what the requirements and wishes are. For instance:
‍

As a user I want to be able to create an account.

‍

Rough sketches

Some might call them wireframes, others would refer to them as “digital sketches”. These are basically simple visualisations of the user stories. The overall user experience should be the focus, not the aesthetic or visual design. The point is not to select the right colours, but to visualise the user-flow. You can do this on paper or using digital tools like Figma. Don’t be afraid to add context and/or explain things using labels and textfields. Try to clarify your decisions.
‍

Creating (digital) sketches mainly serves as validation of the user stories. In collaboration with the client, you’ll need to decide whether the flow meets the requirements, or if there are new insights and changes that need to be made. We call this iterating. You act purely on insight. Not your gut feelings.
‍

Test to beat the rest

The best way to know you are right, is to test your ideas. Preferably with people from the target audience. A prototype is often a simple clickable version of your wireframe, but can also be a mockup version made from paper based on your rough sketches. Prototypes provide good insight into the flow of the app. This step is perhaps the most important. In this phase, any problems or uncertainties in the flow must be resolved early on. 

Again, based on the feedback, the design will be accessed and the necessary changes will be made.
‍

User Interface Design

The approach in UI design for mobile is slightly different from websites. In addition to the limited screen space, the Google (Android) and Apple (iOS) guidelines must be taken into account, whereby apps must comply with certain rules and patterns. These rules help the user understand an app much faster because recognisable interaction models were applied. For example, the tab bar on iOS and the recognisable Material Design style elements and transitions on Android. Don’t be scared to experiment though. There is always room to add some extra flavour. Be sure to test the interactions though. 

Finally, the use of color and style needs to be in line with the corporate identity rules of the client. Don’t make it an overkill of colors. On a small screen, this can quickly distract from the app's intended purpose. If there is no brand identity present, be sure to design a temporary brand visualisation to improve the legitimacy of your design. 

The next iteration

The delivery of a mobile design always takes place in iterations. After a design session you will receive feedback. Not just from the client, but also from the development team. It is important to double check if your creations are realistic and within scope. This will lead to new insights and another design iteration.
‍

Presenting iterations can be done through a nice format. I “design decks". These are slide presentations in Google Slides where the design will be separated into screens that follow the path of a user journey. First you’ll describe the user story and then you show the screens that present the visual flow.

‍

Hello world

As soon as your design deck is ready, it serves as a guideline and communication platform for your idea to the development team. When a development team is using an agile way of working, a design can be a nice way to estimate story points that creates a nice overview of the scope. 
‍

The design team remains involved in the background during the development process. Small adjustments and changes based on gained insights are quickly implemented in the design. These kinds of late changes are always added to a new iteration deck so that everyone has the most recent design.

‍

Keep track of your users

And even if the app is in the stores, it is never finished. After all, insights can change. Therefore, always keep track of your users. Monitor the reviews in the stores and respond immediately to unpleasant user experiences and keep an eye on new trends! This will help you make your app a success! ?