Concept Lab it’s one of the Slashmobility’s departments, and there is where our clients’ ideas take shape. In the Concept Lab, ideas arrive as mere aspirations, with the aim that at the end of the process, they will become successful in the market.

This process is always defined by the user, in each step taken, each decision, is made thinking in the user.. “Focus on the user and all else will flow”, this quote from Google, defines very well the philosophy of this process.

Beginning of the project: Briefing and functional analysis

The phase that you see explained in the graph, is the beginning of the project. It begins with a briefing already defined for the client and a functional analysis generated internationally: The briefing is the basis of the project and the functional analysis our guide. But, what do we do with them?

Navigation flow

Navigation flow is a scheme with all the content of the application, structured by sections and navigation, and the screens, represented only by the titles and the functions that they will contain in textual form.

  • Goal: To help structure the functionalities of the application defined in the briefing.
  • Feedback: The client must validate the structure and the flow according to the agreed functionalities.
  • Tools used: SketchApp.

 

Wireframe

Wireframe is the visual representation of needs, characteristics, and requirements of the project: It is the materialization of  Navigation Flow. In this phase, we capture the functionalities, always looking for a good balance between those functionalities that share a screen. In this phase, it is also decided the visualization of other more ambiguous (for example, if the results of a search will be displayed in a list or grid).

It will be ideal to create it in two installments:

  1. Low fidelity
  2. High Fidelity
  • Goal: Its function is to structure the information and define the content that each screen will have. Meanwhile, the client can begin to get an idea of what would be their appearance.
  • Feedback: The client must validate the content of each screen.
  • Tools used: SketchApp.

 

Prototype

A prototype is the simulation of a project: The user can navigate and interact with the different sections of the application, as if they were on his device.

  • Goal: Obtain a simulation with which to test.
  • Feedback: Not required.
  • Tools used: Marvelapp and synchronization with SketchApp.

 

User testing

User testing is a technique, that using the generated prototype, is carried out an interaction analysis which the end user to which challenges are proposed that must be overcome and the application: in a few words, we take the application to the exam! Did you miss our last post about the importance of user testing? Do not worry, here it is!

  • Goal: Validate with real users the usability and experience of the application, with the intention of assessing deficiencies in the design, flow or interaction. It will be evaluated, depending on the typology of the project, if the suggested changes are implemented in said version or in an evolutionary proposal.
  • Tools used: Lookback. Synchronization with Marvelapp.

 

UI proposal

2 implementations of the brand image are proposed in the application interface.

Se proponen 2 implementaciones de la imagen de marca, en la interfaz de la aplicación.

  • Goal: Defines a style to apply to the interface.
  • Feedback: The client will choose one of the 2 proposals and, when applied to all the screens, we will create the layout.
  • Tools used: SketchApp. 

Visual Design

Do not have a brand identity that applies to your application? SlashMobility also offers visual design services to companies that need it: we create a brand according to the needs of the client and in tune with the market to enhance the presence of the future application.

Here you can read some posts which we explain why the branding of the application is so important and which are the keys to your success.

 

Implementation

In the implementation, we enter to the final phase of the Design phase: The final appearance of the application and the preparation for the jump to Development.

Layout

Layout, as we have advanced in the UI proposal, is the version of the wireframe with the brand and style applied, namely it is the most faithful version of the application on which the developers must base themselves for the interface.

  • Goal: Obtener la apariencia final de la aplicación.
  • Feedback: Final validation of the client.
  • Tools used: SketchApp.

 

Assets and specs

Assets are the graphics resources needed to represent the application, usually icons and images. Depending on the platform for which it is being designed, the export will be different: for IOS it is exported in @ 1x, @ 2x and @ 3x, while for Android the resolutions are mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi.

In any case, we are talking about png, except if a hybrid app is being made, which will be in .svg, so we only need a single base resolution.

On the other hand, the specifications are data and information that Development needs for the construction of the application: distances, sizes, colors, typographies …

 

Thanks to the tool we use (Zeplin), we save a lot of time, since all the screens are synchronized from the mother’s program (sketch) and is it generated automatically those specs and the project is accessible on open-source and the project is accessible in open-source by any user added to it, so the query of this information is very easy and fast.

  • Goals: To provide to Development the necessary resources and information to carry out the application.
  • Tools used: SketchApp. (Assets) and Zeplin (specs). Synchronization from Sketch.

Why do we use this toolkit?

Sketch is the tool par excellence for designing interfaces. The best companies such as Apple, Facebook, Google or IBM use it, and thanks to it we close the design cycle: the rest of the tools are synchronized with Sketch, that is, the transfer functionality of Sketch to Marvel and Zeplin is already integrated. On the other hand, Lookback feeds of Marvel, so it is all linked. In this way, we save time and everything is within reach of clicks … or even one!


Our SlashGirl Laura González, UX Specialist, is the author of this post.

Recent Posts

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.