Untitled-3.png
 
throne header 2.png
SOCIAL
MEDIA UX &
UI DESIGN

DIGITAL - 2020

 

Role

Product & UX/UI Designer


Duration

3 Months

Tools

Adobe XD, Photoshop & Illustrator

 

MEDIA

Social media product, wireframes and a hi-fidelity UI mockup.

 
 

THE OVERVIEW

RETURNING TO AN IDEA

Throne is a social media passion project I developed during the coronavirus lockdown period. It was heavily inspired by ‘The Movies Online’, a community born from a game called ‘The Movies’, where players who created films in-game could share their creations with others and compete in community competitions and events. I wanted to take this idea and apply it to the real world of filmmaking, one where thousands of filmmakers, writers and actors struggle to find their way and get recognized.


imac final login.jpg
 

THE PROBLEM

WE ALL STRIVE TO FEEL IMPORTANT

The rise of the internet has opened a vast landscape of human exploration, it is an exponentially expanding virtual territory that is only going to get harder to dominate and plant your flag. Platforms like YouTube and Vimeo are saturated with content and are set up so that only the most popular users and their content are raised by the algorithms to higher levels of public awareness. Where does this leave the ‘up and coming’ filmmakers, the newbies, the dark horses and the ‘one who can never catch a break’ who need their work to be seen, to be critiqued, to be loved and hated. How can we create a platform to entices people to not only want to create and share their short films, but also watch the work of others, despite a lot of this work having the potential to be amateur, cringe or downright boring.

 

THE SOLUTION

WELCOME TO DIGITAL HOLLYWOOD

Throne is the answer to an over-saturated film market. By shrinking the entire experience of the film industry into one little corner of the internet, we allow people a fresh chance to chase their dreams and pursue film-making. From screenwriting to film editing, from behind the scenes footage to teaser trailers, marketing campaigns to post release interviews, star ratings to long detailed, written reviews, from weekly challenges to giant end of year award ceremonies.. this is the answer to those who want to make films but are afraid no one will care. Throne is a fresh start for filmmakers to get back into something they love with a chance to rise to fame.

DISCOVER PHASE


 

USER INTERVIEWS

The stories of storytellers

Designers design for people, and so I went out and gathered information from filmmakers and videographers, both casual and professional. I wanted to capture the stories, struggles and strivings of people and I felt interviews were much more fitting than surveys for this sort of in-depth information. Questions ranges from a multitude of topics from ‘what do you think are the hurdles modern filmmakers face?’ to ‘What sort of things hold your attention online?’ I wanted to find out what exactly were the problems to solve and how best to entice users to implement Throne into their lifestyle.

linkedin-sales-solutions-W3Jl3jREpDY-unsplash.jpg
christina-wocintechchat-com-LQ1t-8Ms5PY-unsplash.jpg

DEFINE PHASE


 

PERSONAS

WHO ARE MY USERS?

  • The Daydreamer

    Danny is a 38 year old insurance agent who has dreamt of making films since he was five years old. The four short films he made in his twenties currently sit on YouTube with less than 1000 views each despite being high quality with brilliant storylines. He has since given up on his dream to focus on his job and family but secretly wishes for a sign to appear that draws him back into his deepest passion.

  • The Casual Filmmaker

    Nina is a film student from Berlin, she has a deep love of films and strives to become a famous filmmaker despite having only made one film, which was a college assignment and for which she got a C grade. She also works part-time at a cafe and finds it hard to support herself when working on her own personal projects, so far she has only written one script and has a notebook of storyboards.

  • The Proactive Filmmaker

    Gerald is a professional videographer who freelances in San Francisco, he earns a high income and enough to be able to frequently take months off work to pursue ambitious filmmaking projects, often with large teams and impressive budgets. His work is of a very high standard and has been in the Vimeo top picks twice.

 

JOURNEY MAP

THe target group isn’t provided enough incentive

The journey map for my persona Danny (The Daydreamer), further supported the existence of two main problems discovered in the interviews and helped me identify design opportunities.

  1. Target groups lack of incentive and self discipline to pursue personal film projects. “Whats the point if no one cares about them?”, “I don’t have the time for an ambitious project that will only be seen by my friends and family”.

  2. Target groups don’t care about other peoples projects either, watching someones bad short film isn’t entertaining or feasible in a world when your attention span is so short so easily taken by something else.

IDEATE PHASE


 

IDEATION

The more users turn to throne, the more successful it will be

“Rewarding, enticing, inspiring, and exciting” were the foundational themes upon which Throne was to be built. Throne needed to be easy to jump in, with enough inspiration and reward to draw you deep inside this online space and keep you there. It needed to have something for everyone, from the not-yet-signed-up users to the hardcore veterans. Throne needed to have enough tools that anyone with any interest in any area of filmmaking could find their place, from graphic designers who just love making film posters to hobbyist film reviewers to established 3 time Sundance Film Festival winners.

IMG-0471.jpg
  • GAMIFY IT

    People want to know that their actions count and everything you do on Throne adds to a reward and leveling up system, unlocking perks that grant you more power and features with the site. Amplifying the reward system in regards to film critique and community interaction entices users to engage with other peoples work and offer feedback and appreciation.

  • MOTIVATE USERS

    Everyone with a filmmaking dream wishes they could find the energy to pursue films but lack the true support they need to take those extra steps. Throne supports your journey from day one, everything from a ‘motivation contract’ on the sign up screen, to the exciting competitions and award ceremonies to the community itself are screaming for your participation. Metrics are included to see a users progress as they go from zero to hero and build up their online film collection.

  • PROVIDE SOCIAL SUPPORT

    Filmmaking can be a lonely journey, not everyone understands the plight of a deeply passionate storyteller. Throne offers a community that is all in the same boat, users are able to private message, comment on each others posts and share each others work. Throne is a place to network and find best friends who will support you and may even help you in your next project.

  • BE RESOURCEFUL

    Many users want to get out there with a new passion burning inside them. Providing thought provoking articles, educational resources and updates on international events and festivals helps users to consider Throne as a filmmaking hub, a place to touch base and then jet off on your next adventure.

  • GET THE CREATIVE JUICES FLOWING

    Everywhere you look on Throne is a source of inspiration, like any community of artists, there will be those who push you to do better and draw upon those ideas from deep inside you. Throne should be laid out in a user friendly way so that users can concentrate on sieving through content easily and taking what they need to inspire them.

  • HAVE AN APP VERSION TOO

    Having Throne on the go means you’re never away from the community and the endless set of resources. Throne is a readily accessible in any situation, allowing you to check your stats, post updates, find resources and show your friends what’s happening in the community.

 

USER FLOW

Building a well-integrated and logical flow

To get a clear and concise picture of all the possible routes a user could take while using Throne (website version), I mapped out a user flow chart. This was so I could identify any missing connections, features or opportunities.

User Flow(4).png

DESIGN PHASE


 

PAPER PROTOTYPING

ASSEMBLING THE BUILDING BLOCKS

I started the ideation phase by sketching out potential designs. This helped hone in on the problem by providing many different solutions and seeing what worked best, what could be chopped and changed and matched together into a the perfect design solution. It was a great opportunity to spot potential design opportunities and work through navigation issues and errors early on. I conducted paper prototype testing with potential users to get immediate feedback on further iteration.

IMG-0479.jpg
unnamffed.jpg
 

WIREFRAMING & LO-FI PROTOTYPING

GOING DIGITAL (AFTER MAKING SOME CHANGES)

After some rounds of testing, I iterated and improved the design based on user feedback and then, using Adobe XD, designed a lo-fidelity wireframe to get a feel for the look and layout of elements before moving towards a hi-fidelity wireframe after further testing and integrating of design elements such as grid systems, typography and the color palette.

LO-FI WIREFRAME:

Web 1920 – 2.png
Web 1920 – 3.png
Web 1920 – 6.png
Web 1920 – 1.png
Web 1920 – 4.png
Web 1920 – 5.png
 

HI-FI WIREFRAME:

 

USER TESTING

BUT WHAT DO YOU THINK?

With the high-fidelity wireframe design, I conducted 4 live usability tests by using the Adobe XD prototype testing function. The goal of the test was to examine the core features and functionalities of Throne and to then strengthen the core features based on user feedback.

  • IS THERE A BACK BUTTON?

    Users sometimes got stuck on pages due to a non-visible back button

  • HOW DO I REVIEW THIS FILM?

    Users wanted to rate and review a film early but couldn’t find the input section, many didn’t like that you had to 100% finish the film before getting to rate and review it.

  • I CAN’T SEE WHATS ON THE BANNER

    The image banner that sat on top of users profile pages could be utilized a little better rather than being hidden behind chunks of information.

  • HOW DO I DO THIS?

    CTA's should be more pronounced, the hierarchy of features seemed to confuse some users.

  • WHERE’S THE THEATRE?

    The top-nav menu icons needed a redoing as users didn’t quite get what they stood for.

  • CAN I FOLLOW THEM?

    Users would prefer to follow other users rather than just being able to follow films. This decision was initially to stress the importance of users uploading their own films but I realized it would really hinder the social experience.

  • LIKES ARE UNHEALTHY

    One user suggested not having visible likes on posts, this information should be private as to not create feelings on insecurity among an already insecure crowd. Total likes should be for personal viewing only, allowing users to just focus on delivering the content they want.

 

ITERATING ON FEEDBACK

BRINGING MORE CLARITY WITH EVERY ITERATION

There were many other iterations not shown here. From wireframes to final hi-fi prototypes, I made design choices to improve legibility of each page and promote exploratory behaviour, I stylized the navigation bar to increase usability and finally I split some pages into two to lock users attention into certain activites on the one page with clear exit buttons available to back out at any time. I also adhered to a grid layout inspired by the book ‘Making and Breaking the Grid’ which tremendously helped the interface design.

❌ Top navigation doesn’t add flair over usability. Needs major reorganizing.

❌ Need extra space for film and review details (star rating, names, dates, listings).

❌ Profile banner ends up obscured by too much profile information.

❌ Way too much unused, underutilized space, requires scrolling to access more information.

❌ Forgot to include buttons for following and messaging user.

✅ Improved legibility.

✅ Layout is organized so more information is visible without needing to scroll down.

✅ Encourages exploration.

✅ Top banner can be used to advertise or style the page.

 
Web 1920 – 5.png

❌ Video player needs to take up more of the screen.

❌ Video player needs buttons for playback settings.

❌ Film information layout feels off, needs better organization of elements.

THRONE ARENA – 10.png

❌ Video player should take up the whole screen so our full attention is on the film.

❌ Film information below is too crowded, the layout is still poor and some elements need to be removed.

❌ Rating and review input section only appears once the film is finished, users didn’t like this decision.

THRONE ARENA – 12.png

✅ Video player now takes up 100% of the screen, requires scrolling to access input and reviews.

✅ Film information is displayed on a screen before clicking into the film, no need to include it under the film you’re watching.

✅ Rating and review input section is included right below the film at all times.

✅ Back/exit button has been included.

 

STYLE GUIDE

ADDING SOME FLAIR

The style of Throne remained pretty consistent throughout the design process, with a dark UI to put emphasis on user submitted visual elements and a yellow/gold streak on buttons, icons and links (gold color represents striking gold amongst the darkness). After gather some feedback from peers, I was able to sharpen and refine the feel of the interface while always keeping inline with the original minimalist and stylistic vision.

style guide.png

 

THE PROTOTYPE