GoPro iOS app retrospective: A General Assembly project

Keith RangnowEric Blattberg Jesse Smith// //

iOS APP RETROSPECTIVE

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.


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.


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.


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.


The wording in this “Exit” notification confused me. Additionally, there is no other way to leave other than that X button.



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.


Given that I don’t think captions are necessary, having preset themes for those captions also seems unnecesary.


RESEARCH9

Mobile Video Editing Flows - Instagram, iMovie, Videoshop, VidLabSelect a Cover Frame Filters - Sound Off Select Video Filter Trim

Instagram

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


Video Trimming Adjust Speed


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


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.


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



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…)


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



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

RESEARCH14

USER RESEARCH

RESEARCH15

USER RESEARCH

RESEARCH16

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

PERSONAS


POWER USER

PERSONAS


CASUAL ENTHUSIAST

PERSONAS


SEASONED ENTHUSIAST

STORYBOARDS


FEATURE PRIORITIZATION


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


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



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



NEWESTHome

AT&T 9:41 AM 100%






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



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


RashidaSkater

11 comments23 likes


RashidaSkater

MY FOLLOWSSkate

AT&T 9:41 AM 100%a

b c

d



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



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



+ FOLLOWSurferdude_42 23,649 views

SENDAdd a comment …

VideoAT&T 9:41 AM 100%



57 minutes ago



1 hour ago




SENDGorgeous shots! Nice work dude.


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



57 minutes ago

Eric2929 Gorgeous shots! Nice work dude.1 second ago



1 hour agoSENDAdd a comment …




VideoAT&T 9:41 AM 100%a b

c

d

e

e Add comment field invites users to add their own thoughts

fg



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



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



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



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



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



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


Navigation & commenting

4 comments8 likes

Huge waves at Rockaway Huge waves at Rockaway

NevanSurfer


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



57 minutes ago



1 hour ago




SENDGorgeous shots! Nice work dude.


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



Fullscreen player

a

3/3 tester could perform all interaction and leave fullscreen player

b






NEWESTHome

AT&T 9:41 AM 100%

0:23 0:23 10:08 10:08

15 15 15 15

a

b



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



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



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



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


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


• 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.

GoPro iOS app retrospective: A General Assembly project

Design

Transcript of GoPro iOS app retrospective: A General Assembly project