Vlogged

Working with a client, I identified a pain point in their life and conceptualised an app to address it.

Vlogged_ux_project

The Client

Mike, a classmate at General Assembly


PROJECT OVERVIEW

The Brief

Design a mobile app that addresses a key common problem in your friend's life.

The Problem

Mike is a busy man. So in his free-time he likes to switch-off and escape by watching high-quality video blogs by his favourite vloggers. The app he currently uses works, but it doesn’t easily sort and save the ‘vlogs’ from the random videos, and as a result, he often misses the ones he really wants to watch.

The Solution

Vlogged is a mobile app that retrieves and stores the latest video blogs, in clearly defined categories, according to how Mike wants to save and collect them and which are available for Mike to access and view easily whenever he wants!

PREPARATION

Duration

2 weeks, split into 2 sprints:

  1. Discovery Phase
  2. Design Phase

The Team

Solo Project

The Tools

  • Pen & Paper
  • Sketch
  • Keynote
  • Marvel
  • Invision
  • Trello

The Process

Design

  • Design Studio Method
  • Content Prioritisation
  • Sketching
  • Rapid prototyping
  • Paper Prototypes
  • Digital Wireframes
  • Participatory design
  • Moodboard
  • Style Tile
  • Screen-flow
  • High Fidelity Mockups
  • Clickable Prototype

Discovery

  • Usability Testing
  • Competitive Analysis
  • User Interviews
  • Concept mapping
  • Task Analysis
  • User Journey
  • User Flows
  • Feature Analysis
  • Storyboarding
  • Personas

Testing

  • Paper Prototype Testing
  • Iterative Wireframe Testing
  • High Fidelity Prototype Testing

DISCOVERY

Stakeholder Interview

First off, I got to know Mike better by sitting down with him and asking him a range of questions. My aim was to try to determine if there were any pain points in his life, that he needed help with.

After our initial interview, it was helpful for me to map out the key findings on a personal concept map.

Personal Concept Map

Personal Concept Map

It was quite clear from our conversation that Mike was a busy guy during the day, in a new city, away from his girlfriend and he valued his free-time. He had one main interest in his free-time (especially in the dark and gloomy winter months) and this was his love of watching and following video blogs on his mobile device.

The trouble was, that he was following up to 200 vlogs and these vloggers were producing videos frequently (up to once a week). It was nearly impossible for him to keep track of them all. What’s worse was that he needed to keep track of them, as they were often series’, containing multiple parts. So, missing episodes was frustrating for him. Not knowing how to keep track of his favourite vloggers was a nuisance for him and even affected his work.

 

 

 

 

 

Interviews

Several rounds of interviews with Mike were conducted before I could fully understand the problem and the full context. After all, I had never followed a vlog before, so I really needed to find out exactly how ‘Mike’ watched them, what tools ‘he’ used, what types of vlogs ‘he’ watched and how long they lasted, whether he shared them and whether he saved them. I needed to understand how he currently accessed them and how he would like them to be accessible in the future. I really began to dig deep into this interest of his.

Research Findings

Many of Mike’s favourite vloggers are based on Youtube. Through pure ease of use and practicality, he follows them through his Youtube app. Initially, I thought that this really should be ‘problem solved’, but it appeared that there were some key failings with this app. Below is a list of what frustrates Mike at the moment and what he really needs.

Needs

  • Easily access & view video blogs he wants to watch
  • Easily find new vlogs to follow
  • Easily save vlogs for later
  • Easily arrange for vlogs to be saved
  • Easily filter vlogs into his own personal, tailored feed

Frustrations

  • Unwanted advertising distracts him
  • Unwanted 'related' videos distracts him (hours wasted)
  • Unable to manage his videos well
  • Unable to categorise his different types of videos
  • Unable to remind himself of saved videos
  • Unable to alert himself of videos from favourite vloggers

This led me to the thought that what Mike really needs is a personalised vlog management app, that he can use quickly and with enjoyment without adverts or other distractions. Something that will give him peace of mind, knowing that his vlogs are being managed and stored properly.

A Storyboard depicting Mike's problem as it currently is

A Storyboard depicting Mike's problem solved

Competitor Analysis

youtube comp.png

I needed to explore what might already be on the market. Mike currently uses the Youtube app. It mimic’s the desktop version and is great for watching a whole selection of ‘random’ videos, but they can often get distracting…not to mention the ads! It’s also not so great if you want to keep up with new material from the vlogs you follow and for browsing multiple topics that are relevant to you.

Other competitors included Vimeo, Vlog Plus and individual vlogger’s apps like Marcus Butler. But these are very specific to individual vlogs and it would mean jumping from app to app to follow individuals, increasing the chance of missing and forgetting about the vlogs Mike really wants to follow. There did not seem to be a mobile app that specifically managed vlogs.

Participatory Design

Task Analysis

A typical vlog browsing experience using a vlogging app 

Mike and I began to piece together our app idea by working out exactly what the main tasks of the app should be and then by establishing smaller connecting features to help build out the idea and to ensure that all bases (Mike’s needs), were covered.

We began by arranging the tasks into categories and then using this hierarchy to map them out on a concept map again.

An App map, incorporating all needs and addressing all the tasks that Mike typically performs mapped out in one place.

Task List

  • Watch video
  • Discover new videos
  • Save for later
  • Mark as watched
  • Discover missed videos
  • Explore all videos from favourite vloggers
  • Categorise videos by topic
  • Search for videos easily

I took the information from the task analysis and the list of features and mapped them out onto an app map. This enabled me to view how all the features would sit together and connect to ensure that Mike was able to do all the tasks that he needed to at every stage.

 

 

 

User Flow

Using my app concept map and task analysis work, I began to build out a flow diagram, mapping out the potential steps of the app with the key points of ‘state’ and ‘decision’. After a few versions, getting the right types of decision points down, I came to a User Flow that mapped out a clear ‘Happy Path’ for Mike and alternative paths that would also eventually lead to a positive experience.


DESIGN

This section of the case study details the second sprint and how I came up with a visual and functional concept for the app, brand identity and iterations to the digital design.

Screen Flow

Firstly I developed my app map further, so that I was able to see the connections between the different screens that I needed. Once I was happy with the flow of the app and the screens I began to think about the UI.

 

 

 

 

 

Initial UI Sketches

I needed to work out the best way to layout the User Interface. I started by asking Mike what his favourite apps were and why he liked using them and the features he liked. I also asked myself what kind of apps I liked using and what features they incorporated to ensure ease of use and pleasurability. This helped me to start thinking about the kind of layout I needed.

The initial UI sketches were were road-tested amongst 5 different class members to get their opinions on the app’s functionality and where pages and features could be improved along the way. My main goal at this stage was to address the happy path as clearly as possible through the screen flow.

 

 

 

 

 

 

Iterative UI Designs

The screen flow and initial UI design was tested and based on some great feedback from a number of user testers, I was able to begin tidying up the UI sketches and incorporate new ideas and changes suggested to me by my testers. I was ready for the next round of testing.

Feedback from the designs was absolutely brilliant and I was really encouraged by the effectiveness of testing amongst a number of different users. Feedback that came through was to do with changing symbols and icons, difficulty with setting up categories for your profile, expectations when presented with a particular page of features. Users’s expected a feed of vlog posts and more features and options on the ‘home screen’. I noted these suggestions down and then made the necessary adjustments to my paper prototype.

 

With the amount of feedback and changes I was getting, I found it helpful to sketch and then cut out the additional features and buttons that were recommended by testers. I was then able to add them to the existing designs in order to quickly demonstrate their use in another round of testing.

 

 

Confusion

Some of the feedback pointed to the fact that users were confused as to how to save a video and where it will end up depending on how they entered the app. So I re-addressed the UI and put myself in the shoes of someone arriving at this app for the first time as well as someone who had already created an account. I then re-thought the task, making sure it was more in line with the original problem set out by Mike.

I needed to work out how to solve the problem. By re-visiting my app concept map I was able to re-examine the relationship of the pages, I wanted to see whether I could re-organise the way they connected to each other. As a result, I discovered that there would really be two separate paths to enter my app. These were 1. Through a new user building their first collection of video blogs and 2. A user who had already set up an account and was looking to explore their saved or followed vlogs through a feed-type display. This encouraged me to develop a second user flow, as seen below.

Interactive Paper Prototype

My early paper prototype in POP.app

Putting the prototype into action using POP was a great exercise, because, for the first time, users were scrutinising it as a workable product. Much of the feedback I gained was to do with icon styling, adding a “back” and “home” button in places as well as increasing functionality when in full-screen video mode, which I hadn’t explored until this point.

 

 

Digital Wireframes

With the feedback from the last round of testing, I used Sketch to create digital wireframes of my initial paper sketches. Once the wireframes were complete, I began my first round of testing. The aim at this stage was to establish a robust framework of the layout of the elements as well as to see, using an accurate representation of the screen sizes and screen restrictions, how the layout would work.

I wanted to test that the layout worked and that users were able to journey seamlessly through the app screens. I used the digital prototyping tool, Marvel, to help me test the digital prototype.

The results of the first round of testing was very useful. There were comments relating to button location, button size, positioning of text in relation to container boxes and other shapes, as well as comments on the design structure and layout of the individual screens. Asides this, what was encouraging was that users were able to easily navigate through the app given the task that was set for them.

I made the necessary changes to my wireframes to try to fix the problem points.

Branding

With the changes from the second round of testing noted and applied to the digital wireframes, next up was to create a hi-fidelity mock up of the screens. Before I began, however, there was some work to be done to develop Vlogged as a brand, by thinking about associated imagery, voice, style and colour.

To start with, I began to think about what my user would expect from the brand, and it was helpful for me to start thinking about brand affinity, through making some basic associations with well-known cars and famous personalities. These associations provided a visual representation of a number of elements such as:

  • Character
  • Style
  • Efficiency
  • Reliability
  • Colour

I also developed some word associations for the brand, which helped to describe it and to add weight to the imagery.

With these in mind, I then worked on creating a mood board, which would bring all these elements together in a single visual display. I tested this mood board with my target audience, to see if what had been created was in line with what my app really was about. Once I was happy with the response I moved forward.

I began to tidy and condense the mood board, into a ‘style tile’, which would act as the base for my hi-fidelity wire framing. The style tile was approved by my user group, which gave me confidence to move ahead with the design work.

Hi-fidelity Wireframes

I used Sketch to create my hi-fidelity design. With the style tile to hand, I began to use my visual design understanding to bring my wireframes to life.

I completed my initial design focusing on the key screens of the app, I tested them using Marvel and awaited feedback.

Kill Your Darlings

The feedback I received was generally positive, however my user testers raised some key issues with the design that I needed to address if the design was to improve.

Feedback

  • The background images that were chosen were too distracting and detracted from the app interactions.
  • The ghost buttons, although stylish, were not clear enough
  • The ‘save’ icon was confusing, instead it was understood to imply ‘download’.

This was great feedback and despite the fact that I liked the icon that I had designed, this needed to be changed. I definitely got a lesson in what it meant to “Kill Your Darlings’.

Objective Criticism

This stage of the design process was also a good chance for me to check in with my users, to see whether my choice of colour, layout and styling was in line with the chosen branding. I constructed a questionnaire to test whether or not I had achieved my design objective through my design.

My design objective, was to demonstrate efficiency and reliability through a clean and clinical look. It was also important to maintain a relaxed, and inviting environment for the user too, through the use of colour and easy navigation and a considered design layout.

The results from the questionnaire were mostly positive and my respondents felt that the visual design and layout reflected the branding, however there were criticisms and improvements had to be made. One example was that the use of the background imagery was quite disjointed and users could not decide whether it had a masculine or a feminine feel to it, as well as some confusion with the iconography.

In summary, I had to create a more neutral design; one which is not gender specific, I had to add more character through softer tones and further use of imagery. With this feedback in mind, I went back to the drawing board and made the changes.

 

Iteration 4

As highlighted in the above image, I made some key changes to the design for instance creating opaque boxes for the buttons, switching the save icon to a bookmark icon, adding a constant menu bar at the base of the screen consisting of a home button search option for new vlogs and a shortcut to the bookmarked vlogs. Other changes included creating card-style sectioning for the vlogs displayed in the ‘my feed’ screen and switching to a single blurred background image across all screens so that it is less distracting for the user. I also increased the size of the imagery and text on the My Profile screen, to increase visibility. Lastly, I removed the Vlogged logo from the main header, as I discovered that this was distracting to user.

Group Crit

The second round of testing, provided further feedback for me. This time the testing was in the form of a ‘group crit’, which enabled the testers to bounce critical ideas off each other. I found this to be constructive, as users were discussing the design amongst themselves and providing feedback together in confidence.

The main feedback from this round of testing was related to the finer details such as typeface sizing, iconography, increasing the visibility of the card layout on the feed screen, changing the background imagery, changing the buttons further to create a softer touch and to add more character.

I went back to the drawing board to implement the changes.

 

Test my prototype

I used Invision to create a digital clickable/tappable prototype of my app design Vlogged.

Future Steps

There is potential to make Vlogged even better. Future considerations include:

  • Set up connectivity with YouTube, allowing users to:
    1. Utilise the video tagging to auto-populate ‘topics’ on Vlogged
    2. Utilise the number of Youtube views for ‘popularity’ rankings on Vlogged
    3. Utilise the original production time of the video for the ‘date produced’ feature on Vlogged
    4. Commenting on Vlogged user profiles (should reflect on Youtube too)
  • A feature that allows users to create their own micro-vlog using the mobile device’s own camera
  • Chrome extension for finding and saving vlogs to your app when you find on desktop.
  • Allowing vloggers themselves to create accounts and find followers directly through contacts and topics of interest.
  • Set up mobile notifications for new posts.
  • Develop a “You might also like” Vlog Recommendation functionality

Thank you for reading.