• Information Architecture (IA) and Interaction Design (IxD)A description of the UX challenges and the solutions I found for two key features

• UI DesignA showcase of the UI execution under my art direction

MY ROLE

I led the interaction and the interface design. This encapsulated structuring the information and conducting user research through surveys, analytics and interviews. I was the bridge between the engineers, the psychologists, the strategists and the marketing team. Reporting to the product owner and the brand director, I also contributed to defining the value proposition and played a key role in the branding concept.

—

The CONTEXT

THE FOUNDER's VISION

I first caught up on Youniverse’s context with Alex Wilcock, the founder and CEO of VisualDNA. He introduced me to his vision of an internet of feelings and the game-changing power of combined psychology and Big Data. He wanted Youniverse, which had started as a personality quiz, to evolve into a pocket psychologist, a chatbot that would understand its users and share personal development advices. I was blown away by the potential of this product.

Alex Wilcok, CEO and founder of VisualDNA, with a Nerf Gun

PRODUCT MISSION AND AUDIENCE

I gathered with the product owner, the marketing, the content and the psychology teams. Starting from Alex's vision, we defined the product role and tone of voice: a non-judgemental and contemporary psychologist.

Also, the target audience was not definable by usual demographic groups, it was rather a state of mind. The persona was anyone who wants to make a change or looking for what is right for them at a certain stage of their lives.

Mandatory post-its and whiteboard picture

IDENTIFIED CHALLENGES

Being a psychologist chatbot, Youniverse relied on lengthy conversations to understand its users. This raised the following challenges:

• All conversation topics had to benefit the same discoverability level• We had to find a way to present this sheer amount of content without discouraging users• We wanted them to be able to start any topic in any order, quit, switch and resume at will• This whole system had to be scalable• On top of that we needed users to inform us about their mood so psychologist could adapt the conversational tone

—

shaping the product

Early steps

I started to map the user flow based on the features we had listed and out of our assumption about user story epics. It took into account all the tasks from the first app launch to the revelation of personality traits. This helped finding the navigational elements to present per screen and to list the MVP features. Mainly, it underlined the need for the conversation to be shared in smaller chunks.

The user story relevant for both iOS and Android (in-app experience focused)

The web-app user flow. There were specific versions for Android and iOS as well.

The flower metaphor

Our psychologist broke the whole conversation down by personality quests, with each quest made of several conversation sessions. I researched how to articulate the sessions and how users would navigate the quests. The first idea that seemed to match our need was the flower metaphor, but we quickly found out it didn't work well as an interactive device.

The flower metaphor thingy

The starmap metaphor

The next idea was a starmap. Our quests would be galaxies and the conversations would be the stars forming these galaxies. Users would draw their personality constellation while travelling from one conversation star to another. The shape of the constellation would become their user profile. Furthermore, besides tackling an interaction challenge this solution also consolidated the branding. The astronomical aspect correlated well with the product's name.

The starmap concept was borrowed from a Sci-Fi MMORPG called Eve Online and Sky Guide, an amateur astronomy app

Negative feedback

However, feedbacks from prototype tests revealed that this feature may not appeal to people with a more pragmatic usage. Also, since Youniverse was to be released as a web app (along native Android and iOS apps) our engineers dreaded the building cost of a cross-platform responsive version of such a system. We had to turn this feature into a nice-to-have and I was back to the drawing board.

The solution

The next idea I suggested was to use the music player paradigm (think Spotify or Deezer). This time, quests were music albums and conversations tracks. This also would allow users to start a quest, quit, switch to another one and resume at will. They would even be able to create custom playlist of conversations. This system was scalable and technically easier to achieve so we went for this one.

I scanned my sketches and used them directly in InVision to run guerilla testings

Final wireframe after several iterations&@ of the same idea

—

The other key feature

Facial recognition

The mood tracker was the second key feature of Youniverse. It was there from the MVP release but there was an issue with its interaction design. It used facial recognition by default and we felt this was very innovative (this was in 2014, we knew nothing of Apple's iPhone X plans). Users would only needed to look at the camera, make a face, the app captures the facial expression and that expression was registered as their mood. Their was a slider available but this was a secondary option.

LONG-TERM ISSUE

It appeared that making faces, although quick, was very annoying over time. This didn’t show during tests, which had asked to use this feature only once, as we were more concerned with the discoverability and intuitivity of the gesture. The Mood section was unpopular. Analytics showed a huge drop-off on this screen. The few who came back to this tab systematically skipped to the slider version.

ITERATION

So I went back to the drawing board and, besides removing the camera feature thingy, I condensed the mood submission process to two screens. Also, as users may only want to review their mood evolution without uploading feelings, I brought the mood summary chart at the home of this tab. A button at the bottom of this screen would then call users to update their feelings and take them to the sub-screen. On the sub-screen, I put both the Happiness and the Energy slider in a row, with one single button to submit both feelings.

yes, but...

The new version improved the flow and this positively reflected in the analytics. However, there was still a friction. Users seemed reluctant to update their Energy state while engaging with the Happiness submission. Fortunately, a discussion with our psychologists highlighted that the Energy insight was in fact not a crucial factor. So I decided to remove it and focus on Happiness alone.

In the meantime, the slider lacked to show upfront the various levels of feelings. Users had to slide the handle to see the mood variations expressed through a smiley on top of the slider. There was a discoverability issue. So I decided to adopt the system used by the Happy-Or-Not Terminals. These devices allow to collect customer feedback in public spaces in a very simple way: press the smiley that matches your opinion and off you go!

The real solution

I also realised that, despite our mobile first strategy, our mood summary chart followed a design pattern inherited from print and the desktop screen. So I began searching for a solution that would sit better in the mobile era.

The solution came to my mind while using SoundCloud. This app allows users to fast forward or rewind tracks by dragging the waveform. My idea was to use the same scrolling interaction to review one’s mood history. Even better, as the top of the viewport remains free, this left enough room to have both the smiley scale and mood timeline in one single screen.

—

DESIGN EXECUTION

TEAMWORK WITH THE ENGINEERS

Although part of the Creative Department, I asked to sit with the engineers team. They have a clear view on the build's intricacy and I value their ability to predict potential edge-cases. We saved a lot of time by tweaking details right in the code while implementing. This close-knit cooperation allowed to fix frictions and release updates in record time.

How we delivered

We worked following Agile methodology with two weeks long sprints. The IxD had to be test validated one sprint ahead of development in order to not block the engineers.

Besides managing the interaction design, as the product designer my role also extended to leading Youniverse's rebranding. My solid industry experience as digital creative and art director helped me a lot.On the one hand I evolved the previous look-and-feel to a lighter up-to-date flat design minimalism. On the other, I reinforced the brand by adopting Rose Blake's illustrations from VisualDNA's existing branding. The idea was to start a unified visual language across all products of the company.

iOs

iOS version with platform specific bottom navigation bar

Android

The design was started before the release of Material Design

Responsive web-app

—

Outcomes

Product adoption

Youniverse scored an average of 8:13 minutes visit duration and a bounce-rate as small as 1.60%. It received up to 4.5 stars on the App Store and 5 stars on Google Play.

VisualDNA was acquired by the Teddy Sagi Group in April 2015. Youniverse was shut down shortly after the resignation of Alex Willock.

—

What I learned

The Big Five

Working directly with psychologists brought my attention to the so-called Big Five personality factors. Also known as the OCEAN, they are:

• Openness: willingness to experience, to be vulnerable, to think outside the box• Conscientiousness: tendency to control impulses and act in socially acceptable ways• Extraversion: tendency to seek stimulation in the company of others• Agreeableness: tendency to be helpful and compassionate rather than suspicious• Neuroticism: tendency to experience emotions such as anger, anxiety and vulnerability

Studies highlight that the traits influence a user's perception of a product. For instance, individuals with high openness are usually early adopters but tend to neglect a product's aesthetics in favour of its functionality, whereas individuals with high agreeableness value aesthetics and show better ability for retention. This knowledge could help to prioritise between function or aesthetics, depending on the audience.