360° interface for BBC News

I owned two interactive documentary projects, known as “El Helicoide” and "Explore the IS tunnels”. Responsible for designing a user-centred experience for both desktop and mobile, while maintaining alignment with the BBC News brand guidelines. An additional challenge was recreating the interface for our Arabic audiences, who use products right to left.

METHODS

Wireframing, Prototyping, Guerilla Testing, High-Fidelity Design

Role

UX Design, working hand-in-hand with Senior Innovation Producer/3D Artist

DURATION

2 months

Problem

Improve the user experience of a 360° environment for desktop and mobile

1/ Research and discovery


Each chapter of "El Helicoide" gives you a 360-degree scene to explore, by clicking, swiping or using your phones gyroscope to open up a window into the jail. It's a combination of a long-read, a documentary film and a point-and-click adventure.

"Explore the IS tunnels" was built differently with only one 3D model. The user has to navigate through it.

Through my research, I discovered that the user can get easily frustrated or confused when using 3D. Therefore it was essential to test usability throughout and use an agile methodology.

Usability Testing

We conducted eight tests on two existing 360-degree experiences. We had a range of users from different nationalities, between the age of 24-45. Four users tested on desktop, while the others tested on mobile.

Image showing we tested on 10 users from 27 to 38 years old


How do they navigate between scenes?
How do they use the 360-environment scene?

One of the testers had his phone on the table, the screen was white. He thought there was a bug, but it wasn't. It was the floor of the 360 environment.

Take away

We found out a lot of people weren't that familiar with VR/360 experiences, especially on their phones. They also weren't reading the tooltips and didn't know how to navigate. As a solution, we added a chapter navigation to guide them through the 3D scenes. We also created a slight span of the camera when the user first lands. It helped considerably to engage the user with the interaction. They understood they could spin their mobile and see the scene as if they were there.


El Helicoide research. On the left: print from the first version of the platform. On the right: draft of the architecture information

2/ Product and 
design decisions

Wireframes

As a result, I created hi-fi wireframes. To help users interact with the product, I added a menu, navigation tool and introduction. Depending on the users internet connection, the 360-scenes could be quite slow to load, so I created an entertaining animation to keep users in engaged. For "El Helicoide", we added a quote from the main character and a B&W animation for "Explore ISIS tunnels".

El Helicoide hi-fi wireframes

Right to left language interface

For “Explore the IS tunnels”, we had the additional challenge of adapting the interface for the Arabic market.

We didn't need a menu as the story was less complex and without different branches. Instead, we focused users going directly through the tunnel. I added a map to help the user understand how the tunnel was built.

English and Arabic version

Take away

I completed usability testing with Right to Left speakers on mobile and desktop. The experience was smoother for them compared to before. The bottom navigation helped considerably for them to explore the tunnel. Without it, users were confused where to click and would get lost in the 3D model, especially on mobile.

3/ Result

Award and recognition

"El Helicoide" was viewed more than two million times within its first week of publication. It was shared widely, notably by the British Foreign Secretary, the Secretary General of the OAS and the former Colombian President.

2019 Nominee Webby Awards: Best Individual Editorial Feature
Human Rights award (digital) and Silver award in the innovative format category at Malofiej

"Explore the IS tunnels" was also a success.
2019 Nominee Webby Awards VR: Cinematic or Pre-Rendered
Malofiej Infographic World Summit: Bronze award in the innovative format category


Weby Awards logo
Malofiej Award logo


See the projects live here:
ISIS Tunnels

El Helicoide

Other projects