Bringing artists and designers together with a focus on emerging talent

App Design

Blanc!

Blanc! is a festival of design, creativity and innovation run by and for designers, which is committed to emerging design and in which for three days, conferences, masterclasses and activities around the world of design are given. Based on the needs set out in the briefing provided by the festival, a design response has been given taking into account the business and user requirements set out in the report.

Type of project

Information architecture, navigation design and wireframes

Roles
Scope

Academic

Year

2020

Summary

Research

Business Brief

Objetives

Bringing artists and designers together

Highlighting emerging talent

Create a creative and useful App

Interaction through voice

Actions

Analysing User Persona

Conceptualising interaction

Defining the content

Designing the navigation

Designing the interaction

1

Conceptualisation

Based on the User Persona sheets and the requirements provided by the festival, six fictitious scenarios were developed in which the user’s relationship with the product was narrated from the user’s point of view.

A series of methodologies were worked on within the framework of User-Centred Design.

Scenarios and User Journeys

Conceptualising the interaction through scenarios helped to generate situations and contexts of use of the product and with these as a basis, the interactions of the users with respect to the product were mapped through User Journeys. This led to design opportunities, which were translated into a set of product requirements that the App will have to meet.

Six fictional scenarios were developed in which the user’s relationship with the product was narrated.

User interactions with the product were mapped using User Journeys.

2

Labeling

Once the interaction had been conceptualised and the project requirements had been defined, an inventory of product content was drawn up as a pre-labelling phase.

Content inventory

The inventory compiles the information gathered in the previous phases of research and problem definition and brings together the categories, the content pages, as well as the functionalities and tools that the App will have.

Card Sorting

Categories

For the categories, the users organised the cards into logical groups. The tests were conducted remotely. The pairs of categories with the highest affinity were grouped into three areas that could correspond to a personal space, information about the festival and information about the people who meet at the festival.

Functionalities

The groupings of functionalities were somewhat more diffuse, but it can be seen that some related functionalities are grouped together, such as search and browse and socialising. The dendogram clearly identifies three major groups that provided indicators of how the user groups the tools together.

Card Sorting was used to obtain labelling and organisation according to the user’s mental model.

Once the interaction had been conceptualised and the project requirements had been defined, an inventory of product content was drawn up as a pre-labelling phase.

Card Sorting was used to obtain labelling and organisation according to the user’s mental model.

Content inventory

The inventory compiles the information gathered in the previous phases of research and problem definition and brings together the categories, the content pages, as well as the functionalities and tools that the App will have.

 

Card Sorting

Categories

For the categories, the users organised the cards into logical groups. The tests were conducted remotely. The pairs of categories with the highest affinity were grouped into three areas that could correspond to a personal space, information about the festival and information about the people who meet at the festival.

Functionalities

The groupings of functionalities were somewhat more diffuse, but it can be seen that some related functionalities are grouped together, such as search and browse and socialising. The dendogram clearly identifies three major groups that provided indicators of how the user groups the tools together.

4

Prototypes I

Once the navigation has been defined, it is time to prototype, starting with quick hand sketches and ending with low and high fidelity prototypes.

Sketchings

Once the organisation and navigation had been defined, a first approximation of the visual appearance of the application was generated by drawing quick sketches. Hand-drawn sketches allow for quick modifications to be made to the design without cost or time implications.

Hand sketching offers the great advantage of being able to make quick and low-cost iterations.

Wireflows

After a quick sketch of the sketches, an approximation of the design was obtained, which was subsequently refined by means of low-fidelity prototypes, in which additional design details were defined. The wireframes were also used to create the navigation flow or wireflows, which were used to define the interactive prototype.

Based on the wireframes, the navigation flow or wireflows were elaborated, which were used to define the navigation of the interactive prototype.

5

Prototypes II

Once the wireframes and their navigation flows were clear, they were used as the basis for generating a low-fidelity interactive prototype.

The prototype includes the basic tasks and functions proposed during the generation phase.

Interactive prototype

There is a login and registration process as an entry point, followed by a portfolio creation wizard and a navigation system using a fixed double bottom bar, from which the main sections and subcategories can be explored.

An event diary system and a contact request system have also been implemented in the user profiles, allowing for networking and connecting artists and designers.

Conclusions

Results

Meets business requirements

The App is useful for the user

Allows the creation of a social network

Simple and minimalist design

After the work process, an artefact was obtained that met the business requirements and the needs of the users. We missed the execution of more methodologies with users involved, such as tree testings, tests that I would have added as a previous phase to the flow diagrams, as they allow validating if the structure proposed in the content tree is the most appropriate, but for reasons of delivery times it was not possible to carry them out.

In terms of visuals, we opted for a simple and minimalist design, in line with the festival’s style and taking its website as a source. It should be noted that the high-fidelity design (which is not part of the project) should have subtle details of appearance, effects or shading, as the intention would be to maintain the sobriety and cleanliness of the design.

The next logical step after the high-fidelity prototype would be to evaluate the proposal with users through usability testing, and with the qualitative and quantitative data in hand, iterate on the design in order to implement usability improvements.