Date post: | 14-Apr-2017 |
Category: |
Design |
Upload: | ericblattberg |
View: | 1,428 times |
Download: | 1 times |
Table of Contents
HIGH-FIDELITY MOCKUPS
TESTING FINDINGS & ITERATIONS
PERSONAS
STORYBOARDS
APP MAP
NEXT STEPS
RESEARCH
PLANNING AND PROCESS
FEATURE PRIORITIZATIONQuadrant Mapping
“MoSCoW” Method
Video EditorSearch
Importing Video
EXECUTIVE SUMMARY
COMPETITIVE ANALYSIS
TECHNICAL CONSIDERATIONS
USER RESEARCH
Feature Comparison, Mobile Video Players
Feature Comparison, Mobile Video Editors
Survey Results & TakeawaysUser Interview Highlights & Takeaways
Content Streams & Pages
Video Player
We saw an opportunity to create a new native mobile app for GoPro. The app enables GoPro owners to upload, edit, share, and view their GoPro content on their phones, as well as interact with and view other users’ content within the app. After performing extensive research including a comparative analysis, a brief technical analysis, and in-depth user interviews, we were able to validate our idea. The contents of this report explain how we came to that conclusion.
EXECUTIVE SUMMARY
GoPro Company Background
RESEARCH3
• Founded in 2002 by Nick Woodman as an action sports camera hardware company • Creates wearable and gear mountable cameras and accessories • Has begun to develop into a media company with a focus on action sports • IPO’d on June 27th, 2014 • Stock has been volatile
The GoPro community is loyal and expansive, but lacks a central hub through which it can come together to upload, edit, house, and share its videos. Additionally, with the encroachment of other compact HD camera manufacturers, GoPro needs to find a way to distinguish themselves in the market, diversify its revenue stream, and further capitalize off of its strong community of active users.
The Opportunity
EXECUTIVE SUMMARYTECHNICAL CONSIDERATIONS
RESEARCH4
Although the video-viewing experience would eventually extend to the Web, we began our design process by focusing on an iOS app, specifically designed for the iPhone (6, 6+, and 5S).
The iPhone can connect to GoPro camera hardware via Wi-Fi, which enables the phone to control the camera and receive file transfers from the hardware. The existing GoPro iPhone app demonstrates these capabilities.
Other apps (such as those mentioned in our competitive analysis) demonstrate the iPhone’s ability to edit and share video footage across various platforms. Our app would connect to the APIs of platforms such as Instagram, Facebook, YouTube, and Vimeo to enable this sharing functionality.
Our app design also enables users to trim video files before they export from their GoPro, limiting the size of the files they have to store on their phones. We need to consult a GoPro engineer to determine whether this feature is feasible as we designed it.
COMPETITIVE ANALYSIS
RESEARCH5
Instagram Mobile Video Editor
Feed / Home
Select a Cover Frame
Take Photo
Filters - Sound Off
Take Video
Main Share
Select Video
Caption
Filter
Share - Caption Entered
Trim
Share - Social Media Selected
This clip selector only takes up the bottom portion of the screen, while the rest provides a larger preview of the action.
A fairly simple way to alllow for cover photo selection.
The preset filters here are presented nicely.
COMPETITIVE ANALYSIS
RESEARCH6
iMovie Mobile Video Editor
This is the first time I have seen the option to add an audio track over a project. I wounder if this could be used for organizational purposes?
Stacked Audio and Video tracks are great.
I like that the viewer automatically plays in Landscape, especially for GoPro media.
Welcome
Select Video Libary
Record Video
Video Libary
Video Libary
Finished Project
Projecs
Video Selected
Final Project Viewer
Create New Project
Selected Video is Added to Project
Share Project
Select Preset Style
Project Settings and Filters
Empty Project
Record Audio Track
The video library here is especially crowded looking. There should be a more distinct border between videos.
I’m not a huge fan ofthe “helper” text here.
COMPETITIVE ANALYSIS
RESEARCH7
VidLab Mobile Video EditorTake a Photo
Preparing Media
Applying Filter
Select Media
Format Media
Add More Effects
Share
Select Video
Format Media - Playing
Add Text
In-App Purchase
Trim
Select Effects
Format Text
In-App Purchase
Add More Media
Select Filter
Place and Size Text
Project Exit
Set Effects’ Timing
Resize Video
Color Correct
It’s interesting thatthe official color for each app icon is represented in the bar along the lest-hand side of the screen.
I don’t think adding captions to images is necessary to our app
Various FXs take up too much room. The guide holes on the side are unncessary.
I prefer this to the similar screen in the Instagram app. The scrubber here takes up much less room on the screen.
I don’t think adding captions to images is necessary to our app
The wording in this “Exit” notification confused me. Additionally, there is no other way to leave other than that X button.
I don’t think adding captions to images is necessary to our app
COMPETITIVE ANALYSIS
RESEARCH8
Videoshop Mobile Video Editor
Saving Notification Saved Notification
Saturation Vibrance Video Processing Preset Filters
Delete Confirmation Reverse Processing Tilt Shist Crop Video Edit Options Settings
Video Trimming Adjust SpeedSelect Video Select Photo Media Export Select Media
Add a Caption
Add an Author Add a Place Set the Date
Preset Themes
Share and Save Options
The “Adjust Speed” slider here is about as simple as it gets and seems to allow for a higher level of control than a toggle or knotched speeds would.
The “Adjust Speed” slider here is about as simple as it gets and seems to allow for a higher level of control than a toggle or knotched speeds would.
Given that I don’t think captions are necessary, having preset themes for those captions also seems unnecesary.
COMPETITIVE ANALYSIS
RESEARCH9
Mobile Video Editing Flows - Instagram, iMovie, Videoshop, VidLabSelect a Cover Frame Filters - Sound Off Select Video Filter Trim
iMovie
VidLab
Videoshop
Edit Flow
Create New Project Select Preset Style Empty Project
I’m not a huge fan ofthe “helper” text here.
This is the first time I have seen the option to add an audio track over a project. I wounder if this could be used for organizational purposes?
Record Audio Track
Stacked Audio and Video tracks are great.
Select Video Libary Video Libary Video Selected Selected Video is Added to Project
Project Settings and Filters
The video library here is especially crowded looking. There should be a more distinct border between videos.
Select Video Trim
I prefer this to the similar screen in the Instagram app. The scrubber here takes up much less room on the screen.
Resize Video Format Media Format Media - Playing Select Effects Select Filter Color Correct
Various FXs take up too much room. The guide holes on the side are unncessary.
Select Video
The “Adjust Speed” slider here is about as simple as it gets and seems to allow for a higher level of control than a toggle or knotched speeds would.
Video Trimming Adjust Speed
The “Adjust Speed” slider here is about as simple as it gets and seems to allow for a higher level of control than a toggle or knotched speeds would.
Tilt Shist Crop Video Edit Options Saturation Vibrance
Video Processing Add a CaptionPreset Themes
Given that I don’t think captions are necessary, having preset themes for those captions also seems unnecesary.
Preset Filters Add an Author Add a Place Set the Date
COMPETITIVE ANALYSIS
RESEARCH10
YouTube Facebook Vessel Vimeo Daily Motion
Synthesis*
Add to Watch Later YES NO NO YES NO 2
Add to Playlist YES NO NO NO NO 1
Cancel or Discard Button YES YES NO NO NO 2
Share Button YES YES YES YES YES 5
Video Quality Toggle YES NO NO NO NO 1
Closed Caption Toggle YES NO NO NO NO 1
Flag/Report YES NO NO NO YES 2
Enlarge/Minimize YES NO YES YES YES 4
Like YES YES YES YES NO 4
Dislike YES NO NO NO NO 1
Subscribe or Follow YES YES YES NO YES 4
Suggested Content YES NO YES NO YES 3
Comment YES YES YES YES NO 4
Toggle PIP YES NO NO NO NO 1
Tag Friends NO YES NO NO NO 1
Add Emoticons NO YES YES NO NO 2
Geotag NO YES NO NO NO 1
Audience Filter NO YES NO YES NO 2
Go Back 10 Seconds NO NO YES NO NO 1
Download Video NO NO NO YES NO 1
Mobile Video PlayersFeature Comparison
*Highlighted items appear in at least half of our competitors and are strongly considered for
inclusion in our design
Feature Comparison, Mobile Video Players
a
bc
def
ab
c
c
d
e
Multiple kinds of Suggested Content appear on the Home screen.
e
f
Enlarge/Minimize buttons also appear upon tapping the player while it is in “play” mode.
b
aThe share button is currently nested in this menu, though we may consider moving it to a more visible location in future iterations.
Video Template
Full Screen Video Player
B e c a u s e o u r i n t e r v i e w e e s expressed such reverence for the quality and feel of GoPro’s visual branding (wide angle, fisheye lens footage) we decided to go against convention and not offer a Crop feature. Instead, if users decide to share to a platform that only accepts square foo tage , a letterbox option will be available in the Share Flow.
COMPETITIVE ANALYSIS
RESEARCH11
Feature Comparison, Mobile Video EditorsInstagram iMovie Vidlab Synthesis*
Crop Frame YES YES YES 3
Filters/Themes YES YES YES 3
Trim YES YES YES 3
Cover Frame Select YES YES NO 2
Toggle Sound YES YES YES 3
Caption YES YES YES 3
Geotag YES NO NO 1
Share YES YES YES 3
Direct Message YES NO NO 1
Video Photo/Combine NO YES NO 1
Templates NO YES YES 2
Undo/Redo NO YES YES 2
Transitions NO YES YES 2
Change Speed NO YES NO 1
Mix Audio NO YES YES 2
Voice Record NO YES YES 2
Video Effects NO NO YES 1
Color Adjust NO NO YES 1
Brushes NO NO YES 1
Borders NO NO YES 1
Text NO NO YES 1
Sound Effects NO NO YES 1
Mobile Editors
Feature Comparison
*Highlighted items appear in at least half of our competitors and are strongly considered for
inclusion in our design
bcd
e
Editor, Arrange
a
In addition to allowing for video trimming in the import process, editors can trim clips while selected, by dragging the blue border.
c
a
Editor, Filter Editor, Adjust Color
b
c
This will appear in the Share user flow, which is on our list of next steps.
d
f
e
f
(cont…)
COMPETITIVE ANALYSIS
RESEARCH12
Feature Comparison, Mobile Video EditorsInstagram iMovie Vidlab Synthesis*
Crop Frame YES YES YES 3
Filters/Themes YES YES YES 3
Trim YES YES YES 3
Cover Frame Select YES YES NO 2
Toggle Sound YES YES YES 3
Caption YES YES YES 3
Geotag YES NO NO 1
Share YES YES YES 3
Direct Message YES NO NO 1
Video Photo/Combine NO YES NO 1
Templates NO YES YES 2
Undo/Redo NO YES YES 2
Transitions NO YES YES 2
Change Speed NO YES NO 1
Mix Audio NO YES YES 2
Voice Record NO YES YES 2
Video Effects NO NO YES 1
Color Adjust NO NO YES 1
Brushes NO NO YES 1
Borders NO NO YES 1
Text NO NO YES 1
Sound Effects NO NO YES 1
Mobile Editors
Feature Comparison
*Highlighted items appear in at least half of our competitors and are strongly considered for
inclusion in our design
ab
c
d
efgh
Though only one of our three competitors offers this feature, the unique nature of GoPro’s Hi-Res content suggests that this feature should be included in the next iteration of this app.
Editor, Transitionse
f
Editor, Textb
Because of the flexibility allowed by the existing filters, transitions, and text overlay, we did not also i nc lude Temp la tes . Th i s i s s o m e t h i n g t h a t m a y b e considered in the future if a need presents itself with our users.
d
Editor, Audio
a
Due to time constraints, a Share flow was not created in this version of the prototype, though it is at the top of our Next Steps list.
c
gh
g
(…cont)
USER RESEARCH
RESEARCH13
SURVEY RESULTS
We created and distributed a screener survey to begin understanding the demographics and behavior of GoPro owners.
Platform: Typeform Responses: 67
USER RESEARCH
RESEARCH17
Key survey takeaways: • The audience demographic among GoPro users is primarily millennial males • GoPro footage is most commonly of acton sports, but people use their GoPros
to film a wide variety of other content • YouTube is the most popular platform among people uploading and sharing
GoPro footage, but Facebook and Instagram are also common destinations • Half of existing GoPro owners already use their phones to upload GoPro
footage • The vast majority of GoPro users edit the footage they film with their GoPros
USER RESEARCH
RESEARCH18
USER INTERVIEWS
We interviewed nine GoPro users to dig deeper into their pleasures and pain points while using the product, organizing their GoPro media, and viewing GoPro videos.
Konrad, 16, male Key takeaway: Preset image settings (balancing, filters) would save Konrad time in the editing process. Key quote: “One thing that helps a lot [when I edit my GoPro videos] is I have profiles and settings for outdoors, indoors, underwater, when it snows and so on.”
Ankit, 27, male Key takeaway: Ankit sees GoPro as an integral component of an active lifestyle -- meaning he takes it with him anytime he does anything exciting. Key quote: “If I’m not using my GoPro then I know i’m not doing anything adventurous.”
Alex, 25, female Key takeaway: GoPro content can keep people watching for a long time, even if they weren’t seeking it out initially. Key quote: “I've never gone to google going like ‘gopro videos’ but I have stumbled down a GoPro clickhole.”
Stephen, 29, male Key takeaway: Having to edit on a desktop device can be frustrating for quick edit jobs. Key quote: “It would be better if I could edit a clip on the phone, on the go. Say I’m on a snowboard trip for a whole entire week. If I could edit on the go, that would be so much more convenient than lugging around a computer.”
Rick, 58, male Key takeaway: GoPro isn’t limited to young, extreme sports practitioners. Key quote: “I’m not that extreme of a sports guy, but I do some snorkeling and I hope to use it for that more.”
USER RESEARCH
RESEARCH19
Gabbi, 27, female Key takeaway: Editing software can be really intimidating, so there’s a big opportunity in making it simpler for less tech-savvy GoPro owners. Key quote: “Editing sucks. I have lots of GoPro videos sitting on my computer. I’d like to edit, but it’s difficult to learn.”
Fivos, 28, male Key takeaway: Power users bring their GoPro around with them everywhere, just like they bring their phone with them everywhere. That presents a good opportunity for mobile functionality and interaction. Key quote: “I have it on my backpack all the time. Whenever I see something cool, I take it out and start filming, even if it’s something random I see.”
Greg, 38, male Key takeaway: The idea of dealing with all the content GoPros can create is a daunting prospect, even for a professional video editor like Greg. Key quote: “I love the flexibility and low price [of the GoPro], but the disadvantage for me is that you end up creating a ton of material and then sourcing and editing and cataloging and being able to organize that material can be daunting.”
Patrick, 25, male Key takeaway: Patrick is an editing whiz, but he has a video backlog because editing takes a ton of time. Mobile functionality would enable him to make use of some spare time -- for example, commuting -- to edit his videos. Key quote: “I just haven’t had time to sit down and do it. I’m making two to three videos, each of which are five-to-seven minutes long. It takes a lot of time just find the clips.”
PERSONAS
PLANNING AND PROCESS20
Using data from our screener survey and information from our user interviews, we created four user archetypes that represent our audience of potential users:
PRIMARY
FEATURE PRIORITIZATION
PLANNING AND PROCESS25
GoProTop Picks
Prioritization
Key
Editing/Organizing
Social/Sharing
High Priority
Low Priority
Difficult to Implement
Easy toImplement
AdjustVid Speed
Pre-set Filters & Themes
Soc. MediaSharing
Text Overlay
FollowUpvoting/Downvoting
GeoTagging
Tutorials
Ability toEasily Edit Comments
PhotoUploads
Content Stream
VideoFilters
Various Content
Categories
Range ofPrivacy Options
Content StreamFilter
Quadrants
Pull Stills
DMsPrivate Sharing
Quadrant Mapping
FEATURE PRIORITIZATION
PLANNING AND PROCESS26
GoProTop Picks
Prioritization
Key
Editing/Organizing
Social/Sharing
Should Could Won’tMust
AdjustVid Speed
Pre-set Filters & Themes
Soc. MediaSharing
Text Overlay
Follow
Upvoting/Downvoting
GeoTagging TutorialsAbility to Edit Videos
Comments
PhotoUploads
Content Stream
VideoFilters
Various Content
Categories
Range ofPrivacy Options
Content StreamFilter
“MoSCoW Method”
Pull Stills
DMsPrivate Sharing
Pull Stills Develop New Hardware
Cost Money
Require In-App Purchases
Sync w/ Hardware
User Commuity
“MoSCoW” Method
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS27
Homepage content stream
a Section labeling keeps users orientedb Default section is “My Follows,” which
shows users content from people they’re already following
c “Hamburger” menu contains content categories (e.g. “Skate,” “Snow”)
d New content stream, accessible via tapping or swiping left (gradient hints at swipe functionality)
e
f
g
Username and avatar of content creatorAutoplaying video
“Like” button & counterh
i
j
k
l
“Comment” button & counter (tapping brings to new page)
More options (including sharing, reporting inappropriate content)
Bottom navigation (left to right: home, search, create new video project, profile, settings)
“Newest” section shows latest videos (between follows & newest is GoPro’s Pick’s & Most Popular)
Upon tapping, video pauses and displays play / fullscreen buttons
m
n
Follow button for creators user doesn’t follow
Categories hamburger menu (close by tapping outside or swiping right)
4 comments8 likes
Huge waves at Rockaway Huge waves at Rockaway
NevanSurfer
Skateboard’s view of NYC Skateboard’s view of NYC
RashidaSkater
MY FOLLOWSHome
AT&T 9:41 AM 100%
My Follows
213 comments1,401 likes
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42
NEWESTHome
AT&T 9:41 AM 100%
213 comments1,401 likes
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42
TOP PICKSHome
All
Skate
Snow
Watersports
Underwater
Driving & motorsports
Skydiving & base jumping
Climbing & parkour
Traditional sports
CategoriesAT&T 9:41 AM 100%
Newest Categories Menua
bc
de
f
g h i
j
k
l
m
n
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS28
Category stream
a Labeling changes to reflect categoryb Sections remain the same, but only display content
within appropriate categoryc “Hamburger” menu still enables users to change
categories
d Home button brings users back to “all” default category (no longer highlighted with blue because skate category is not home)
Skate category stream
Skateboard’s view of NYC Skateboard’s view of NYC
RashidaSkater
11 comments23 likes
Skateboard’s view of NYC Skateboard’s view of NYC
RashidaSkater
MY FOLLOWSSkate
AT&T 9:41 AM 100%a
b c
d
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS29
Fullscreen Video Player
a X button enables viewers to leave fullscreenb “Like” button
c Skip back 15 seconds
d Pause button (changes to play when pressed, and UI remains until played)
e
f
g
Skip forward 15 seconds
Current time in video
Total video length
h Timeline scrubber
0:23 0:23 10:08 10:08
15 15 15 15
a
Note: UI disappears three seconds after initial entry and after taps, which reveal the UI temporarily
b
c d e
f g
h
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS30
Video Page
a Back arrow enables users to return to prior screen
b New labeling to reflect current location
c View counter appears on video pages
d Each comment shows avatar, username, the comment and timestamp
f
g
Keyboard pops up and covers bottom navigation when a user starts typingSend text whitens to indicate a comment can be sent
h Comments appear in reverse chronological order
Video Landing Page Writing A Comment Comment Written
Surf_Fan42happen to surfing since that shark tried to eatthat dude.
This video is the best thing to
57 minutes ago
LongUsernameMcJohnsonvery much like to marry that handsome surfer because I think we would make a lovely couple. Right, guys?
I have decided that I’d
1 hour ago
213 comments1,401 likes
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42 23,649 views
SENDAdd a comment …
VideoAT&T 9:41 AM 100%
Surf_Fan42happen to surfing since that shark tried to eatthat dude.
This video is the best thing to
57 minutes ago
LongUsernameMcJohnsonvery much like to marry that handsome surfer because I think we would make a lovely couple. Right, guys?
I have decided that I’d
1 hour ago
213 comments1,401 likes
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42 23,649 views
SENDGorgeous shots! Nice work dude.
VideoAT&T 9:41 AM 100%
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
123 space return
Surf_Fan42happen to surfing since that shark tried to eatthat dude.
This video is the best thing to
57 minutes ago
Eric2929 Gorgeous shots! Nice work dude.1 second ago
LongUsernameMcJohnsonvery much like to marry that handsome surfer because I think we would make a lovely couple. Right, guys?
I have decided that I’d
1 hour agoSENDAdd a comment …
213 comments1,401 likes
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42 23,649 views
VideoAT&T 9:41 AM 100%a b
c
d
e
e Add comment field invites users to add their own thoughts
fg
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS31
Importing Video
a Import Media from GoPro
b Import Media from Camera Roll
c Available Clips to Trim and Import
d Drag Up For More Videos
e
f
g
Source Status
Save to Phone
Selected Clip Preview Window
h
i
j
k
l
Time In Selected Clip LocatorClip Editing Track
Edit Clip Length
Undo Button for error control
Length of Clip
Select Source Select Media Trim Media
a
b cd
e
g
f
h
ijk l
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS32
Save Create New ProjectTrim Additional Media
Importing Video
a Select Additional Clips to Edit and Import
b New Clip Editor
c
d
Back to Previous Clip Status e
Save to Camera
Create New Project, Enter Editor
a
b
c d
e
f Navigate Elsewhere
f
Arrange Filter Adjust Color
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS33
a
Video Editor
a Media Player
b
b Exit Project
c
c Complete Project
d
d Fixed Time Marker
e
f
g
e
f
g
Media Clip SplitterDrag-and-Drop Media Clip
Drag-and-Drop Audio Clip
h
i j
kl
h
i
j
k
l
Horizontal Scroll Wheel accessible through both tapping and swiping
Library of clips for this project
Add more clips to Project Library
Undo Button for error control
Inserts selected Project Library clips into timeline. Power users can drag-and-drop directly into timeline.
m n
m
n
Filters organized by the shooting conditions they best optimize
Color adjust sliders that control for Brightness, Contrast, and Saturation
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS34
Text Overlay, Font Text Overlay, ColorTransitions
Video Editor
a Transition selection
b Transition that has been placed in timeline
c
d
Text overlay box in active state
e
Text option in selected state
Color adjust sliders
a
b
c
d
e
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS35
Text Overlay, Style Audio, RecordingText Overlay, Size
Video Editor
a Text size adjust sliderb Text style selectionc Opacity slider allows user to adjust the
background of the selected text boxd Record is activated by press-and-hold the
button or by tapping either the button or “Record New”
e Second audio lane opens up when new audio track is being recorded
a b
c
d
e
f Import allows users to bring in pre-recorded audio tracks
f
Audio, Controls
g
h
i
g
h
iAudio volume, adjustable by dragging
Volume control slider
Fade Out button (in active state), allows users to add a fade to the selected audio track
HIGH-FIDELITY MOCKUPS
PLANNING AND PROCESS36
Search, Text Entered Search Results PageSearch, No Text
Search
a Slider menu allows toggle between searching either videos or GoPro Community members
b Search bar in empty statec Customized keyboard with “search” key
instead of “enter” keyd X button allows users to restart their
searche Results for an incomplete search
a
b
c
d
e
f X allows users to eliminate single search term without starting search over from scratch
g Search results showing video title, user name, number or likes, number of views and a follow button
f
g
4/5 testers thought the hamburger icon would contain categories upon being asked, “How would you look for specific categories of video content?” This result validated our initial design for our category navigation.
TESTING & ITERATIONS
PLANNING AND PROCESS37
Navigation & commenting
4 comments8 likes
Huge waves at Rockaway Huge waves at Rockaway
NevanSurfer
Skateboard’s view of NYC Skateboard’s view of NYC
RashidaSkater
MY FOLLOWSHome
AT&T 9:41 AM 100%
a
a
4/5 testers tapped on GoPro’s picks or swiped left (both work) to navigate to that section, validating our existing design for top-section navigation.
b
b
5/5 testers successfully found the comments section, wrote a comment and posted it
c
c
Surf_Fan42happen to surfing since that shark tried to eatthat dude.
This video is the best thing to
57 minutes ago
LongUsernameMcJohnsonvery much like to marry that handsome surfer because I think we would make a lovely couple. Right, guys?
I have decided that I’d
1 hour ago
213 comments1,401 likes
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42 23,649 views
SENDGorgeous shots! Nice work dude.
VideoAT&T 9:41 AM 100%
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
123 space return
c
2/3 testers could immediately open fullscreen player
TESTING & ITERATIONS
PLANNING AND PROCESS38
Fullscreen player
a
3/3 tester could perform all interaction and leave fullscreen player
b
213 comments1,401 likes
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42
Hawaii surf montage Hawaii surf montage
+ FOLLOWSurferdude_42
NEWESTHome
AT&T 9:41 AM 100%
0:23 0:23 10:08 10:08
15 15 15 15
a
b
TESTING & ITERATIONS
PLANNING AND PROCESS39
a Initial tests revealed that although the users could complete the task of “importing footage from your GoPro to your camera,” users recommended that we make it more clear what to press to complete the task.
b To better signify the available options to interact with, we added rounded rectangle buttons.
Building Projects
a
ba
b
TESTING & ITERATIONS
PLANNING AND PROCESS40
aSeventy-five percent of testers expected that when the transition “Dissolve” was pressed, it would be placed directly into the timeline at the time marker, rather than having to then press “insert” or drag it into the timeline.
This extra step was remove along with the “Insert” button. Now, when a transition is selected it will auto populate at the time marker or it can be dragged directly into the timeline.
a a
Video Editor - Text Overlay, Color
a
a
bHalf of testers expected to be able to drag clips directly from the Project Library into the timeline rather than having to first select the item and then drag it.
This extra step is still there for those users who would prefer to use the “Insert Into Timeline” but it is now unnecessary for those who would prefer to drag-and-drop.
bb
Video Editor - Arrange
TESTING & ITERATIONS
PLANNING AND PROCESS41
aTwo testers expressed confusion at these color slider. The RGB sliders were replaced with Hue, Saturation, and Brightness instead.
bSeveral testers were unsure how to complete their text overlays because they did not see the “Set Text” button at the bottom of the screen.
Another tester said that the “Set Text” button was making them nervous because they were unsure whether their changes would save if they didn’t hit the button before moving on.
For these reasons, the button was removed and changes will now be saved as they are made.
a
b
a
b
Video Editor - Text Overlay, Color
TESTING & ITERATIONS
PLANNING AND PROCESS42
aHalf of the testers considered the audio tracks to be on the small side and wished they could expand them.
They can now be expanded by double tapping or dragging down, the track however further steps will need to be taken to place and test some kind of signifier like a carrot or pull handle so that this feature is more accessible to non-power users.
bThe same testers mentioned above thought the “Fade In” and “Fade Out” buttons were labels for the Volume slider directly above.
These were altered to look more like buttons and placed further away from the Volume slider. Additionally, the label “Volume” was placed in-line with the slider, rather than above it.
a
b
a
b
Video Editor - Audio Record and Controls
APP MAP
PLANNING AND PROCESS43
CreateNew
Search Main ContentStream
User Profile Settings
All Content My Content Stream
Most Popular
Adjust My Content Stream
Synch w/Hardware
Upload
Select fromPhone Select Clip Trim Position Clip in
ProjectFilters/Themes
Color AdjustShare
Comments/Tagging
App Map
Key
Primary Nav
Secondary Nav
New Video Flow
CreateNewSearch
Main ContentStream User Profile Settings
My Follows GoPro’s Picks Most Popular
Adjust My Content Stream
Upload
Select fromPhone Select Clips Trim Position Clips in
ProjectFilters/Themes
Color AdjustShare
Comments/Tagging
App Map
Key
Primary Nav
Secondary Nav
New Video Flow
Newest
First Version
Current Version
NEXT STEPS
PLANNING AND PROCESS44
• Further testing and iterating • Further technical research to determine how app could interface with hardware • Design sharing options across platforms • Nail down visual design consistency across app (e.g. differing keyboards, back button
vs. text) • Create Web interface for video-viewing experience • Begin iOS development
WHAT I LEARNEDNot surprisingly, some features and interactions are more difficult to prototype than others. In this case, a mobile video editor is one of the more difficult things to turn into a working prototype without writing a line of code.
But some tools are better at that than others. Hype, with its ability to manipulate and animate elements on-screen, is a far better tool for accurately replicating the complex, nuanced interactions of a mobile video editor — such as dragging and dropping video clips into a timeline — than a simpler prototyping tool such as InVision.
Yet that doesn’t necessarily mean that Hype is the better choice for use throughout the design process. Throughout this project, I learned that if testers try to replicate an interaction that would work in theory, even if it doesn’t in the prototype, that may be all you need to validate an existing design decision.