San Francisco, CA | UX Designer | Dream Manifester
 

About YooLoop

YooLoop is a video consumer app that gives skateboarders the recording experience they need with the tools they need. This short-form recording and hosting service was built off the concept of capturing moments through videos the moment the app is opened.

We teamed up with the company’s CEO to get a deeper understanding of a skateboarder’s ideal video recording journey. While engaging in user research and information architecture, I was able to lead visual design and the ideation of new features.

Problem

How might we redesign YooLoop for the skateboarding community, that will time-efficiently record clips of their tricks while giving them artistic freedom and control of their videos outcome.

Solution

A mobile app that would give skateboarders a platform that provides them with every tool they need to quickly create videos that help them document their technique.


My Role

UX Research

UX/UI Design

Visual Design

Project Manager

Team Members

Me (Gino G.)

Amira J.

Luis T. (CEO)

Tools

Sketch

Invision

Pen & Paper

Duration

4-Weeks


USER RESEARCH

Identifying skateboarder behavior

Going to a Skateboard club and having the opportunity to interview and observe a skateboarding instructor and 3 of his students gave us better insight and understanding of what users go through to create videos of their skating techniques. Although our CEO expected users to self-tape their own stunts, we learned that both amateur and professional skateboarders prioritize the importance of safety by having someone else record them, but also prefer the freedom to edit the videos themselves. 

Frame 42.png

As a result, skaters go through a huge pain point when shuffling through a different devices, such as wide-eye and fisheye lenses, and a variety of apps to enhance just a tiny clip they use to reference their skateboarding skills and show their fellow community. Below are some of the questions they were asked during the interviewing process.

1. What are your motivations for creating a video of you skateboarding?

2. What devices and apps do you use to create a video?

3. Which aspects of your video content creation require the most time?

4. What points of the day do you record videos?

5. What is the process you through to create satisfying video content?


"I always attach a fisheye lens to my iPhone so I can focus on a trick and If someone records themselves while skating then that person is not a skater". - Skateboard Club Instructor" 

 
IMG_3678.JPG

THE CURRENT APP

image.jpg
image.jpg

In order to accommodate the instructor's busy schedule, I went back the next day to have him to test out the current version of the YooLoop App.

Along with the instructor, we went out and around the city to speak with other skaters, and had them test out the app as well in order to discover the pain points.


User Frustrations

1.png

INTERFACE CONFUSION

Each user had mistaken the emblem for a recording button and were oblivious to the fact that the app immediately starts recording as soon as it is opened, and grew impatient pressing the Hold To Finish button for 7 seconds just to end the process. The emblem also got in the way of the subject they were trying to record, especially since it was right in the center of the frame.

LACK OF ICONS AND FEATURES

A few users were astounded that there was no gallery option on the camera interface, as they were used to having one on their iPhone camera. Although the concept seemed very amusing after explaining the process to them, there just wasn't enough on the current app that makes the experience usable.

Frame 40.png

CONVENIENCE IS EVERYTHING

7 out of 9 users we tested all used the iPhone Camera app as their primary recording app. They each found that the app already comes installed on their phone and also sets the ground work for external camera apps as well. We also found that users have no regard to memory usage until their device indicates that the usage is full.


5dcc44313d746fc09937bf23_4bd6ec2958ce9d6f6e60dfce4c8e3f69.jpg

"I control the app. The app does not control me." - skateboarder


USER STORY

AFFINITY MAPPING

After breaking down everything from the pain points to the users desired recording tools, we had to keep in mind the company’s promise to simplify a user’s recording experience.


STORYBOARDING

Since we intend to bringing the functions of external apps the average skateboarder uses all into one recording/editing experience, we also have to make sure each step doesn't overwhelm our users all at once.


Who we are designing for

Frame 40.png
Frame 39.png

Wireframes

Artboard.png

iterations

Although users were hyped about the new interface and features laid out on the early prototypes, as well as the addition of a gallery option on the Home page, they felt the low-fideity interface resembled the iPhone camera interface a little too much. However, there was excitement all across the board that no external camera lens was required for the fisheye feature.


Visual Design

Frame 46.png

Onboarding

Once opened after being downloaded, the app’s logo pops up to say hello to the user! They are also given an introduction to YooLoop’s mission, leading to a brief vibrant walkthrough of the user journey that align and complete the needs and motivations of skateboarder looking to create amazing video clips!

Onboarding.gif
 

HOME AND REcording

The user has three different recording mode capabilities to enhance visual effects:

  1. Slow-Motion

  2. 8mm

  3. Fisheye

Each specific recording option has it’s own unique recording button to help users indicate which mode they are using during the recording process.

SLOMO.png
Group.png
FE.png

Frame 45.png
cont.gif

Trim your video

Although users have the option to set the duration of their clip on the main camera interface before recording, you may still cut the video to your desired length.

Setting the contrast and brightness

Was there terrible lighting where you filmed your video? Not a problem! Users can easily readjust the brightness and contrast with ease by dragging the the icons on the indicator bar.

 
 

ADd your favorite song

Users may add a song from their Music Library directly from their iOS device. Once a song is selected, you may select which point of the song you would like to add to your content. The length of the song layered on the clip varies on the duration of the video.

Create a video title

The final step in the editing process is giving your video clip a unique name, which will help make your content stand out in your Video Gallery. Like the previous editing options, each are completely optional.

Cover.gif

Sharing the video

After the editing is finished, and your final product is saved, you can access any of your saved videos from your gallery. The option to share your videos via text message, email, or social media has been added as well.


Let’s take a moment and reflect

Working with YooLoop was an unforgettable experience. (THANK YOU LUIS!). While we were initially given product with a low conversion rate due to usability pain points, it was rewarding to see face-to-face the impact our iteration made on users who have never even heard of the app. As a result, we were able to refine a usable framework and help reshape the way skateboarders create and share videos with their friends!

What’s Next?

More Filters!

The users loved the filters! However, it seemed as if they wanted more. This will give us the chance to go more in depth with user interviews on more technicalities of their editing process.

Zoom

One thing we’ve noticed during the last round of users testing was that users wanted to ability to zoom while recording to create an emphasis.

Iterate as per results

There never really is a final product. There are always new features to other apps that will be added, and the concept of this job is to design something that will never stop growing.