How it began
I’ve recently started using the GoPro app for iOS quite a bit. The more I’ve used it, the more frustrated I’ve become with the lack of functionality in the live view screen, as well as the overall strange flow of the app. I started thinking about how I would want the live view screen to function, and a couple days later I decided it would be fun to completely redesign the whole app. So that’s what I spent a few evenings doing over the past couple weeks.
I haven’t accounted for absolutely everything in my redesign, but this is going to be my stopping point, mostly because I need to start sleeping and get other things done in the evenings. I’ll include a link to download all the files I made during this redesign for anyone who wants to adapt, add to, or learn from it.
I started by connecting to a Hero 3+ Black Edition and mapping out the whole app in Omnigraffle as completely as I could while taking screenshots of every screen. The Hero 3+ Black edition is the most full-featured model currently available. If I had tested with a Hero 3 White Edition, I would have missed some settings options. That might not have ended up being that big of a deal, but I’m trying to be as complete as possible. Mapping everything out like this really helped me get an overview of just how extensive the app actually is.
I came into this project with some observations and assumptions from my personal experience with the app. Here are my big ones —
- The Video of The Day & Photo of the Day sections are difficult to navigate and feel out of place; I never look at them.
- The live view screen requires too many steps to change basic settings.
- “GoPro on Your iPhone” is just a link to the album view of all photos on the device, without any options, despite GoPro promoting the ability to share to social networks as a feature of the app.
I tentatively decided to remove Video of The Day and Photo of the Day. I had already figured out LiveView was going to be a big part of this redesign, and I wasn’t quite sure yet how to handle importing/viewing images from the GoPro.
I didn’t want this redesign to be based only off my own experience and assumptions. I’m only one person, and my uses for the GoPro are pretty basic. Luckily, I know a variety of people with GoPros, a few of whom were willing to put up with me pestering them. I interviewed a professional videographer who had just recently started using a GoPro, a photographer who had a couple of years of experience using GoPros, and a non-professional who uses a GoPro to film things like motorcycle rides and pond diving. I also read through all of the reviews of the app, both on the GoPro website and on the App Store (this isn’t a good way to get user research, but if you don’t have any users, it’s better than absolutely nothing).
Here’s a summary of what I found. I’ve limited my results to issues I can address with design. For example, I can’t change that certain video formats can’t be played back on mobile.
- No one I spoke with looks at the VotD or PotD, although a couple of people mentioned that they have seen both before on either Facebook or Twitter.
- Everyone I spoke to commented on how small the initial preview screen is when you first connect to the camera. This was also mentioned in several reviews.
- Everyone I spoke with and a few reviewers mentioned that they were annoyed by how long it took to adjust shooting settings within a mode.
- Many reviewers seemed to have issues figuring out how to get their GoPro connected to the app for the first time. No one I interviewed had any problem with this.
- Most people I spoke with mentioned that using the app made managing their GoPro memory card much easier since they could review images and move them to their device or delete them without plugging in to a computer.
- One reviewer mentioned the lack of contrast in the app made it difficult to see the controls in bright daylight.
- A couple of reviewers did mention they used the app to share files to Facebook. Presumably, they saved to a photo album and then shared, or just made up that they shared to Facebook, you never know with app store reviews.
I knew that I wanted to start with the live view screen, it’s really the most essential part of the app. I tried to start out by sketching, but once I had my first decent idea, I jumped into visual design. I should have finished sketching this one out, because I would have realized some of its issues without wasting so much time on the visuals.
I had an idea of this mode button that would sling out the other modes when you tapped. It was stuck in my head. I figured I’d put a similar one that toggled the core settings screen on the other side. This already felt wrong. I wasn’t appropriating space well, and I hadn't really done anything to improve on the existing system, aside from dressing up the interaction to switch modes. I started making slight iterations and added in some more essential features, like quickly adjustable settings, a standby button, and a concept for full-screen landscape mode.
It took me way too long to get over this idea. The mode circle buttons felt like they took up an unnecessary amount of space. Overall, it just didn’t feel serious or well put together. The quick-adjust settings buttons are too small, and my idea for changing them was to tap repeatedly until you hit the desired setting. The video resolution setting can have 11 modes. That’s a lot of taps. On top of that, I had established two different paradigms for making “quick” adjustments. It was a mess.
I spent some time just looking at these screens and pretending to use them. One of the things I realized was that I didn’t like how far I had to reach my thumb to get to all my various settings options, they were all over the screen. So I decided to consolidate them.
I pushed up the live preview, time display, and record button, and I moved all of the settings into boxes along the bottom. This also allowed me to add some additional quick settings, since these boxes could be swiped to view more. Therefore, when ProTune is turned on, it’s additional settings are simply added in the list.
I checked to make sure this concept would work with the settings from other modes, and I tested it out in landscape mode as well. This finally felt like a good option. I just needed to come up with a way to adjust these settings.
Here’s one of my first stabs. It’s a good start, but there are too many possible resolutions for a space this small, the line items are already almost too small to tap easily, and scrolling in that box is really uncomfortable.
It looks just as bad in portrait mode. Even though there’s additional space, scrolling and selecting in a popover box like this is irritating.
I tried a few other options; none of them seemed to work well either.
Finally, I figured it out. If I was going to make these settings boxes swipe-able, I could do the same for adjusting them. It’s intuitive, it’s fast, it’s easy to do with a thumb or finger, and it works for any length of options list.
I switched over to Adobe Edge Animate to do a rough interaction prototype, which you can view here (I’ve simulated scrolling in a couple of places, because Edge Animate doesn’t allow for horizontal scrolling elements yet).
Now I have a pretty complete concept of the live view Screen, both in portrait and landscape. The most common settings for each mode are now quickly accessible and adjustable, and the live view is now full width all the time (no more tiny preview window).
Making some changes
It’s pretty clear from both my user interviews and the app store review that the Video of the Day and Photo of the Day aren’t that important to people. Despite being called “GoPro App” this app’s primary purpose is to serve as a remote control and viewing monitor.
The VotD and PotD feel out of place. They’re creating unwanted noise in an app that already has a clear purpose to its users. My thinking is that GoPro needs to double down on the sharing/inspiring and make the VotD and PotD sections into a mini social network that anyone could post to (a la VSCO Cam), or just remove it completely and let this app focus on being the best remote possible. I opted to remove them completely.
I also decided to remove the “GoPro on your iPhone” section from the app because it’s just a link to the album view of Photos.app (but with all the options removed).
This leaves the home screen of the app with two core purposes: controlling a GoPro, and viewing the media on it. I’ve also made the “How to connect to the GoPro App” button more prominent and persistent throughout the connection process, instead of hiding the prompt in a tap on the “Connecting” window. This should also help to eliminate confusion as to whether the app is trying to connect or is already connect to a camera.
Once the camera is connected, the app displays two main options: Launch Live View, and View GoPro Media. View GoPro Media would function the same way it does now, but with a full set of share options.
When a software update is available for the camera, the install prompt is prominently displayed right above the live view button, making it next to impossible to go unnoticed, but it won’t interfere with the actual remote use if the update is ignored.
The App settings are accessible from the Cog in the menu bar, much like the current app. This screen, along with the Camera settings screen, are essentially standard.
Meet GoPro Remote
Summary Thoughts & Further Ideas
I really enjoyed redesigning this app. I would like to have finished it out completely, but I’m not sure I would have ever declared it finished.
Here are a few ideas & issues I didn’t address in my redesign -
- I tried to keep the contrast concerns in mind when I was working on polishing the visual design. I’ve made all of the text and icons in live view 100% white, and I tested the screens outside on a bright day. I think a High Contrast mode could still be useful, especially on android where screens don’t always work as well in bright daylight (the reviewer who mentioned this issue also noted he was using a Galaxy Note).
- The standby button is really prominent on the live view screen. The more I think about it now, the more I think it should have been in that quick options section, off the left of the screen. That way, it’s never really in the way but always accessible.
- I don’t show the name of the GoPro camera on the live view screen. I’m not sure if this is a big deal, it seems to be in the existing app, but it wasn’t to anyone I interviewed. (It’s possible this has something to do with previewing multiple cameras on multiples devices at once?)
If you want to talk more about the GoPro app, unsolicited redesigns, or really anything, you can tweet at me — @cyborgnation.
Note: I’m well aware of our community’s mixed feelings about unsolicited redesigns. Personally, I think redesigning an app in your off time can be great practice and really helpful for experimentation and learning what does and doesn’t work. But I think if you’re going to take the time to redesign an application, it should be done as properly as possible. If you’re in this to learn and practice, chances are you need just as much practice mapping features, researching use cases, and finding limitations as you do making things look pretty. That’s what I’ve tried to do here. This might also give you a leg to stand on when someone claims you’re just being an “arm chair critic.” (It’s also worth noting that I actually did this entire redesign while sitting in an arm chair, so in this case, the title actually holds true).