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
- UX designer
- UI designer
Scope
Academic
Year
2020
Summary
Research
Business Brief
- Business requirements
- User requirements
- User Persona
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.
3
After analysing the data obtained from the Card Sorting and with the content of the product already defined, a content tree was drawn up as a preliminary stage in the design of the navigation.
Content tree
The content tree is useful for mapping the organisation of information as well as for prioritising sections.
The content tree provides a visual organization of the contents of the system and is useful when designing the navigation through flowcharts.
The content tree provides a visual organization of the contents of the system and is useful when designing the navigation through flowcharts.
Flowcharts
A flowchart was made for each task in the scenarios and User Journey. This methodology is notable for its usefulness in detecting errors in navigation or in the structure of the content tree. It was detected that the most complex processes are those that have to do with the user’s entry point into the system, which allowed special attention to be paid to how to trace the navigation at this point.
A flowchart was made for each task (…) It was found that the most complex processes are those that have to do with the user’s entry point into the system.
Flowcharts
A flowchart was made for each task in the scenarios and User Journey. This methodology is notable for its usefulness in detecting errors in navigation or in the structure of the content tree. It was detected that the most complex processes are those that have to do with the user’s entry point into the system, which allowed special attention to be paid to how to trace the navigation at this point.
A flowchart was made for each task (…) It was found that the most complex processes are those that have to do with the user’s entry point into the system”.
Flowcharts
A flowchart was made for each task in the scenarios and User Journey. This methodology is notable for its usefulness in detecting errors in navigation or in the structure of the content tree. It was detected that the most complex processes are those that have to do with the user’s entry point into the system, which allowed special attention to be paid to how to trace the navigation at this point.
A flowchart was made for each task (…) It was found that the most complex processes are those that have to do with the user’s entry point into the system”.
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.
