CCCB Photo by Adria Goula
Gabriella Figueredo
VISUAL DESIGNER
Tecnosfera
NOW-CCCB
Mobile Booking & Experience App
UOC Masters Project
The Centro de Cultura Contemporánea de Barcelona (CCCB) is a center dedicated to the immersion and diffusion of different branches of artistic, linguistic, and cultural expression.
New mobile App
project for CCCB
The CCCB plans to hold a series of conferences, exhibitions, and events with digital experiences that must be accessible anywhere in the world.
Tecnosfera NOW APP will allow users to access virtual and in-person events that are offered by CCCB.
Date
April 2021 (12 weeks)
Client
CCCB
My role
User research, Prototyping &
UI Design
Contributors
Project mentor:
Professor Jiménez Iglesias L.
CCCB Design Team
The challenge was to include the existent contents and new virtual events.
The CCCB Team developed the personas.
Personas
During the first phase of the project, there was already a previous study carried out by the CCCB. The same had the list of the main requirements according to the type of project and the creation of two personas, in which it was sought to expose the main characteristics of the target public: a very general public that may or may not be accustomed to the use of technology and whose function innovative is interactivity and the creation of virtual events.
The personas: Laura Casas, 33, a primary school teacher from Girona, Spain, and Eike Weber, 22, a Computer Engineering student from Berlin, Germany; seeks to cover the needs and emotions involved in the main public of this study.
A sample of one of the 6 User Journeys and scenarios
User Journeys & Scenarios
We created six hypothetical scenarios to be able to identify the necessary functionalities to carry out the project. The user journeys reflected situations that included the psychology, the current situation of the personas, and the different goals they could have while using the app.
Scenarios for Laura:
Planning a virtual tour in a group class in the CCCB exhibitions.
Going to a virtual workshop with her partner.
Participating in a painting class with her mom.
Scenarios for Eike:
Planning to go to an AR event with a friend.
Trying to keep up with technological updates.
Going to an AR event with a friend.
Pain points were detected and social interaction was an important aspect.
Top 5 tag groups / Card sorting with Optimalsort
Architecture and contents
During this research, we concluded that the conception of this app should be maximized toward the intuitive to not oversaturate the interface of technicalities that users less experienced could not comprehend. The labels for each content were listed for further study.
A remote session of card sorting with 5 users from the target audience was conducted, they grouped the labels and named categories.
This allows having a simple and appropriate vocabulary idea for this type of interface that should be usable by users who do not know about technology.
As a result, the top 5 tag groups were taken. For this lexical aspect, we proceeded to choose the names of the major categories taking into account the information vocabulary given by the users. Users tended to group virtual and face-to-face events.
The main structure of the architecture was created In order to develop optimal navigation. A study of flow charts was carried out taking into account each of the six hypothetical scenarios created in the previous stage. This allowed the discovery of the possibilities and needs that could also be identified to complement the architecture.
The prototyping
process begins!
process begins!
Some of the sketches for the main screens of the activities conducted by CCCB.
1. The process
The prototyping process consisted of two main stages. The first one was about capturing the main screens of the application. For this purpose, I took into account the architecture of contents and flowcharts. Then, freehand sketches were made in order to determine the structure of each screen.
After, a low-level version of the prototypes was developed to be able to visualize the content before creating the high-fidelity design, with colors, content, images, and the CCCB's corporate identity.
Wire framing and low fidelity prototype was created with Sketch App.
2. Wireframes
In the low fidelity version of the prototype, sketches are taken as the essential foundation.
I constructed the main structure, maintaining a minimalist and ergonomic style in order to meet the requirements of the different people to whom this application is addressed.
User Testing
We tested the low-fi prototype in order to reveal possible usability problems and feedback from the other 5 users from the same target group. Some problems were detected:
The access to the interactive map was not visible enough for some users.
The map of the museum allows the user to know where and what kind of events are running during the season.
3. High Fidelity
The concept proposes a series of very simple interactions and content to be able to cope with a large amount of information that users must assimilate.
It has an interactive map where you can consult the ongoing activities developed by each department such as art expositions, art courses, etc. We decided to add central access to this feature to the main navigation to ad a sense of ubiquity.
The four large categories allow us to include both website content such as new events offered by TecnosferaNow.
Main characteristics:
Light style
UI kit inspired by the CCCV Brand with new accent colors to distinguish Tecnosfera NOW
Conclusions
Having four large categories: CCCB, My space, Activities, and News; and one main category for the user's social space can be suitable for the main audience to whom this application is intended; since it simplifies the content as much as possible.
Next steps
It is necessary to complete the High Fidelity Prototype tests. To finalize this stage of the project, it is advisable to carry out A/B tests with respect to the main home screen/page; since the content structure of this application is very complex. Most of the participants in this study chose to have all the activities or events (virtual and face to face) in a single environment, but this could change when users are in contact with the real content.
4
Main categories
18
Initial screens
100%
Interested users