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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Further refinement of selected logos was done, along with several colour options.
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.
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.
