OVERVIEW

PROBLEM

A brand new algorithm had been developed which made possible what was previously only thought to be possible on a quantum computer, this technology had been incorporated into a movie recommending engine which shifted through thousands of sets of movie ratings instantaneously to feedback to the user it's recommendations. This algorithm had to be visualised and shown off in a brand new demo, in which users would engage by saying what movies they've liked, and receving relevant recommendations.

Mockup

MY ROLE

Research Lead, UX Designer, Animator

LENGTH

6 Months

TOOLS

Sketch, Invision, After Effects, Illustrator, Visual Code.

AWARDS

Winner of “The New York Aiconics, excellence in Ai” software award.

 


Mockup

MY ROLE

Research Lead, UX Designer, Animator

LENGTH

6 Months

TOOLS

Sketch, Invision, After Effects, Illustrator, Visual Code.

AWARDS

Winner of “The New York Aiconics, excellence in Ai” software award.

 


ezgif.com-gif-maker

OUR WORKFLOW

01    Research

Market Analysis

User Testing

Persona

Journey Mapping

02    Design

Sketching

Brain Storming

Workshops

Wireframes

03    Prototype

Interactive

High Fidelity Design

User Testing

Iterative

 

MY CONTRIBUTION

My contributions to the group projected consisted of conducting all background research into existing products and current pitfalls and designing the final solution, including, wireframes, high-fidelity design mockups and interactive prototypes used for user feedback and testing. 2D Animations were also created for this project. 

RESEARCH

MARKET ANALYSIS

We first researched the existing solutions to similar products and platforms, although we were not aiming for a streaming website, the main feature of movie browsing was examined on these sites.

Frame-1-1

Our findings:

  • These sites all had a similar ui, consisting of tiles of movie covers, displayed in a horizonally scrolling list.
  • Movie recommendations were based on previous watched movies.
  • Very little in the way of adding information to the recommendation engine

These points formed the basis of the direction the project was taking, as the recommending software was brand new, we wanted a solution which stood out and helped highlight how different the functionality was.

Asset-1@2x

INTERVIEWS & JOURNEY MAPPING

To better understand how users currently explore movie choices and identify potential problems, some informal user interviews were done with the team before starting to ideate solutions. This information, and team knowledge, led to the creation of a journey map of a basic users experience with searching for a movie.

Based on feedback from stakeholders, and this information, it was decided that the UI was to reflect the uniqueness of the software, by reinventing the way a user interacts with movie ratings and providing a memorable experience worthy of the technology behind it.

Asset-5@2x-100

PERSONAS

To help guide the solution development and to help remind team members who the end users are, I created two personas based on the previous research, and quotes heard.

 

DESIGN

Several rounds of “Crazy Eights” were conducted with a team of designers and engineers to ideate on a range of solutions. The team then used a dot voting mechanism to vote on the best solution which met the initial criteria the best.

The concept stage consisted of moodboarding different aesthetic themes the UI could incorporate. Different versions of a basic user interface based on the results of the workshop were mocked up with each aesthetic to pitch to the development team and stakeholders.

SCI-FI-
Anime-Esque
RETRO-FUTURISM

Due to the program being a movie recommending engine, the theme of "Retro-Futurism" was chosen, based on it's relation to old school video renting services, such as blockbuster and VHS. As the technology behind the software is very futuristic and technical, it seemed almost ironically fitting for the theme to be taken back in time, while incorporating the sci-fi aspect of quantum computing. 

A series of wire frames and interactive prototypes were made using Sketch and Invision. These were low fidelity and were based on the sketches that were most voted for. 3 main prototypes were made which showed of the basic functionality of each.

Group-8
Group-7
Group-6

After the initial rounds of user testing was done, the results showed that the interaction of swiping was found to be the most popular and the least confusing. This took on a "Tinder" style swipe for movies, which was a interaction most users were already familiar with and didn't struggle to grasp without instruction.

The next stage was developing the High-fidelity prototype. This was done using sketch and invision. The prototype included full functionality, aesthetics and motion design. This prototype went through a series of iterations, with rounds of user testing done inbetween to get feedback, to help improve the design. 

 

Asset-7@2x-100

After the initial rounds of user testing was done, the results showed that the interaction of swiping was found to be the most popular and the least confusing. This took on a "Tinder" style swipe for movies, which was a interaction most users were already familiar with and didn't struggle to grasp without instruction.

The next stage was developing the High-fidelity prototype. This was done using sketch and invision. The prototype included full functionality, aesthetics and motion design. This prototype went through a series of iterations, with rounds of user testing done inbetween to get feedback, to help improve the design. 

 

The findings of the initial rounds of user testing are shown below.

Asset-10@2x-100

Matrix Visualisation

A main selling point of the software is the matrix behind it, this was not understood or shown off enough for users to understand it.

Asset-11@2x-100

Matrix Time Calculations

A set number of swipes must be done before results are shown, the original number of 20 was too high, and users dictated that it took too long.

Asset-13@2x-100

Results Information

Instead of waiting for final results, users were intersted to see the updated results in real time, and see how every swipe alters the result pool.

Asset-12@2x-100

Interaction Confusion

Originally two buttons had no connection, and users could not tell the relevance they had to eachother, so this was replaced with a slider.

Once discovered, these problems were translated into HMW statements, and solutions were ideated, then implemented into the design.

The final demo design features two parts, a tablet, which the user uses to interact with the demo, and a TV, which shows the users results in real time.

1st-Screen

A custom 2d Animation using After effects and illustrator was made which was shown at the start of this page as an intro. This was made to help sell the visual identity and create a retro-futuristic appeal.

2nd-Screen

The main swiping page features a tinder swipe style, where a random movie appears and the user can swipe this movie left to dislike , or right to like. 

3rd-Screen

The tablet shows the users choices, it shows the titles of the movies they swiped through, and whether they chose to like or dislike this movie. In the centre is a visualistation of the matrix, when the algorithm is processing, the outer lines wobble and transform depending on what it's doing.

Black-Laptop

The tablet shows the users choices, it shows the titles of the movies they swiped through, and whether they chose to like or dislike this movie. 

The Final UI Screenshots are shown below. The UI had to come across as retro, so there were added VHS effects animated on top such as the glitch lines and the VHS overlay to give it the impression of the UI being old, and running on retro tech.

Mid
1607675821777
1607675823265
1607675822518
thumbnail

The design went on to win the best digital solution at the 2020 AiConics New York Summit.

BRANDING

On top of the design, branding had to be done to help advertise the software, and to give the overall "Quantum" brand an identity, as it was likely other quantum softwares would be developed. I started with initial ideation on paper with sketches, but soon moved onto quick digital mockups of the logo ideas as shown below. These were pitched to stakeholders and team members to get their feedback on the general direcction, as well as the message it portrays.

Illusion-3
Illusion
Initial-Logo-Concepts-with-Word
Illusion-2
Arrows
Final-Concepts
Two-U-Logos
Symbols

Further refinement of selected logos was done, along with several colour options.

Red-Q
Pastel-Q
Purple-Q
Blue-Q

After input from stakeholders and the project team, the final logo was chosen, and after several rounds of iteration, the final logo developed. Because quantum as a subject is extremely complicated, and is often misunderstood, it seemed fitting that the logo took on the appearance of an optical illusion, as these are difficult to understand and to see the proper image. The "Impossible circle" was chosen, as this could be extended to represent a Q for Quantum.

Mug-PSD-MockUp-3
Sign_Mockup

Several assets, such as a style guide and branding guide were created to assist the team and any further development that might occur on this project.

Quantum-Style-Guide