Portfolio Category ArchivesMobile

Case Study: Shark Tracker App Redesign

Shark Tracker iOS App

About

I’m a huge fan of what Ocearch.org is doing in terms of tagging sharks and educating the public about them and their habits. So when I downloaded their iOS app a while back, and saw that it was still in the iOS6 style, I decided I would have a stab at redesigning it. This meant that I would try to include features that do not exist and see if there was room to improve the user engagement.

Again, this is all meant as a case study for me to push my design skills with a topic that is close to my heart. Ocearch has no affiliation with this, and as of right now, doesn’t even know I have been putting this together. In fact, it looks like they just updated their app to iOS8 compatibility.

Splash

Shark Tracker iOS App - Comparison of Splash Page

For the splash page, I decided I wouldn’t mess too much with their logo. I changed the font to Lato, which I am using throughout the app. I restacked the elements to flow a little better. And I included an image of a white shark, because that’s what this app is all about, sharks!

Home

Shark Tracker iOS App - Comparison of Home Page

Ok, so this is a big change. Currently, the app lands you on the tracker page, not the home page. Understandably so, the current home doesn’t add much value as a landing page.

So what I’ve done is move all the existing home content to a new “more” page (more on this later). I’ve then replaced the home with a personalized feed of sharks I follow. Following sharks is also a new feature to this app.

You might have notice that I’ve included some gamification to the sharks you follow. Currently I’ve only designed it to show when a shark breaks a personal record. But what if you could really push this idea and have it so you pick sharks and pit them against your friends sharks. And then there are all kinds of leaderboards and whatnot. Hehe, it’s only an idea…

Tracker

Shark Tracker iOS App - Comparison of Tracker Page

The main changes to this page are within the header. Of course I’ve included more information in the popup. But what I have really done here is move the settings page into a filter, which is displayed in the header. Moving settings into a filter allows me to move the home content into that slot instead.

Sharks

Shark Tracker iOS App - Comparison of Shark Listing Page

Sharks! Another big change here. I’ve carried over the filter from the tracker page and included a search icon. Additionally, I’ve gone away from the list with icons and moved into a image focused list.

Currently, the list icons serve no real purpose other than telling you the status of the last ping. Also, they are all silhouettes of white sharks (aside from the M/V Ocearch vessel), when in fact there are many other kinds of sharks and even sometimes sea turtles.

Moving to the photos let’s me know if the shark has images (which is important) and I’ve included what kind of shark it is so I know what I will be tapping into.

Shark Details

Shark Tracker iOS App - Comparison of Shark Details Page

Ok, down to the details! Aside from removing the segmented control, reformatting the specs, and placing the “where have I been” into an icon in the header. I’ve created a line graph that plots the shark’s activity against it’s species average.

You might be thinking “But Nick, that’s so tiny, no one can read that”.

Rightly so, which is why, when you turn the phone sideways, you get the full graph view!

Shark Graph Details

Shark Tracker iOS App - Graph Details

Booyah! Shark data visualization!

The user can adjust the amount of time between average pings. And I’ve set the comparative ring graphs to be dismissed with a swipe if the user would like to view more of the graph instead.

Media

Shark Tracker iOS App - Comparison of Media Page

Media page doesn’t see much change here aside from removing the extra details and pushing them to the full image view, if the user is curious enough to want to know more about the image.

I didn’t mock up the YouTube list because it would just be a list with video thumbnails.

Settings/More

Shark Tracker iOS App - Comparison of Settings Page

So here is where the content from the homepage has landed. Now that settings have been placed into the dynamic filter function, I have a home for all this additional information.

The main change here is that I’ve taken the social icons and placed them into a list. And I’ve moved the small donate button to the top and stretched it to fill out the width of the screen. My reasoning behind this is currently the button is hidden within social sharing, and this is a free app that can use people’s support. So front and center it goes.

Tab Bar Icons

Shark Tracker iOS App - Tab Bar Icons

Honestly, some of my most favorite icons I have ever illustrated. Of course the “more” icon isn’t anything new. But the rest of them, especially the “home” icon, I’m quite fond of.

System Icons

Shark Tracker iOS App - Icons

And here is a set of icons I ended up creating for this app. I kept to the apple line icon style, even though, I personally feel that solid icons are easier to read.

Final Thoughts

It’s taken me a long time to get this all together, and I kind of wish I had finished this a lot sooner. But that’s what happens when you take on a project in your spare time and are only doing it because you love sharks and mobile applications. But honestly, this project has opened more doors for me than if I had been just sitting on my butt watching TV. So to me, it’s completely worth it.

And if someone at Ocearch sees this, and wants to chat with me about any of it, you can get in touch with me via my contact page. I would be more than happy to share ideas and assets from this. Anything to help bring further the awareness to these amazing creatures.

Stack Lighting

Stack Hero Image

About

While working with the amazing team at Octopus Creative, I took the lead in designing the identity, web presence and iOS app for Stack Lighting.

A little about Stack Lighting: As the world’s first responsive lightbulb, each Stack light contains an embedded sensor that allows it to intelligently respond to the surrounding world.

Brand Identity

Stack Logo

Stack Lighting is more than just a bulb, it’s a customizable network of lights that you build to suit your needs. Hence the work “stack” and the imagery to support the idea of stacking components on top of one another.

Logo Placement

Stack Logo on Product

Here is an example of their initial product with logo placement.

Unused Logo Marks

Stack Alternate Marks

There were so many good alternate logo marks that I couldn’t resist showing them. While we are more than happy with the final design, there were a couple that I might have been a bit too attached to.

Marketing Site Overview

Stack Website Overview

Along with the identity for Stack Lighting, we designed a marketing site where users can learn more about a day in the life with “Alba”, place preorders, and stay up-to-date on the latest news from the company.

If you would like to check out some of the animations and other portions of the site, you can visit them at their website: Stack Lighting

Please note, now that this is has been released, what you see live might not match what I have here.

Marketing Site Illustrations

Marketing Site Illustrations

These are some of the custom illustrations that were created to highlight four of the key features of the product.

iOS App

My pride and joy in this project was being able to work with the team at Stack and help bring their product to life in the mobile app. This has honestly been one of the more challenging app builds I have done. Their product (behind the scenes) is rather complex and has an overwhelming amount of user features.

Since we were working with a startup who needed to hit a hard deadline, in order to present at Tech Crunch Disrupt, I did not have time to user test these designs outside of our immediate circles. I was able to create a fully tappable prototype with Invision App, which we used as the basis for our in-house testing.

iOS Wireframes

iOS Wireframes

Due to the complexity of this app, clearly understanding what I was creating was vitally important. Most of the architecting phase was spent building out detailed wireframes (as seen above).

Once the wireframes start to become coherent, I then began placing them into annotated user flow document for the clients review.

User Flows

Stack User Flows

Here is an example page from the user flow document. Each major function in the app is broken out into it’s own page and basic functions are annotated below their associated screen. The client can then cross reference this with their spec doc and answer any questions I have outlined in the doc.

iOS App Overview

iOS App Overview

Now that the app has made it past all of the major wireframe reviews, it’s time to start fleshing it out. Every wireframe gets a coat of paint and is then placed into a tappable prototype. If there are any questions on the functionality, the user flow has been updated to show the mockups so the client can easily cross reference the document.

Final Thoughts

Taking someones idea, and building out complete product from it, is one of the most rewarding things I can experience as a Product Designer. Sometimes it might feel a little overwhelming with all of the stages involved. But the thrill of seeing it slowly come to life and then end up in the hands of the users is more than worth the effort.

It’s also pretty awesome to see your work up on the stage at events like Tech Crunch Disrupt and then slowly make it’s way into blogs that I read on a daily basis.

So, if you had to ask me what I do for a living, this would just about answer it.

Geocaching Pro App

Official Geocaching iPhone App

About

Geocaching is a real-world, outdoor treasure hunting game using GPS-enabled devices. Participants navigate to a specific set of GPS coordinates and then attempt to find the geocache (container) hidden at that location.

While working at Geocaching HQ I was tasked with re-skinning their existing iOS6 app into iOS7 style. Unfortunately, the development time limited us on what we could change in terms of UX. However, wanting to push things further, I spent some of my own time mocking up other ideas and trying things that are not currently offered in the app.

What you see below is a mix of what was released and what I was experimenting with.

Welcome and home screen

The welcome screen sticks to, rather closely, what was released. While the home screen is a complete divergence. I’m not even sure how well those settings and search icons would go over as I never took this past mockup.

Geocaching Pro App - iOS7 Style

List and map view

Creating a list view of content with complex data sets is…well…rather complex. I ended up with eleven variants before deciding on the design shown below. I only tested my designs internally before turning the project over to the rest of the UX team who will further user test it and make the needed changes.

Geocaching Pro App - iOS7 Style

Geocache overview and description

So here’s something you will probably never see in the official app. This design was created by me in my off time as a way to play with new ideas and push the boundaries of what might be possible.

Geocaching Pro App - iOS7 Style

Navigate with compass or map

Just your standard compass functionality redesigned to be a bit more user friendly. Previously it was a compass needle with the distance marked above. I basically integrated the two so the user only has to look in one place to get all the important data.

Geocaching Pro App - iOS7 Style

Illustrations

Here are some of the illustrations you will see when logging your experience. Original concepts were put together by the in-house creative team. I re-illustrated and re-tooled the illustrations to fit into the rest of the mobile experience.

Geocaching Pro App - iOS7 Style

Icons

As part of some of my design explorations, I created matching icon sets for both iPhone iOS7 and Android Holo.

Geocaching Pro App - iOS7 Style

Final Thoughts

Working on this has been a lot of fun. And even though not all of my concepts made it into the live app. It was rewarding to take what was there and polish it up. Maybe some of these concepts will make their way into the apps. I know I would like that as I use the pro app for my geocaching needs.

Oh, and if you haven’t seen in yet. Check out the companion intro app we designed the previous year.

Geocaching Intro App

Official Geocaching Intro App

About

Geocaching is a real-world, outdoor treasure hunting game using GPS-enabled devices. Participants navigate to a specific set of GPS coordinates and then attempt to find the geocache (container) hidden at that location.

The Geocaching Intro App enables a user to freely play the game with their iPhone. They can create an account, view some of the best geocaches in their area and find as many as they like, as long as they keep moving to a new area.

Signup Flow

Navigation Game iPhone AppNavigation Game iPhone App

Browse vs Navigate

Navigation Game iPhone AppNavigation Game iPhone App

Navigating in Compass Mode

Navigation Game iPhone App

Cache Details and Recent Activity

Navigation Game iPhone AppNavigation Game iPhone App

Logging The Find

Navigation Game iPhone AppNavigation Game iPhone App

Breakdown of Cache Stats

Navigation Game iPhone App

AmpLynx

Amplynx Web App and Mobile App

About

AmpLynx, while still in beta, is a startup focusing on innovative ways to distribute content. The offering is currently focused on music distribution, but it’s ultimate goal is to encompass all media.

I was approached in the initial stage to help create a brand for AmpLynx and then see the idea into production by creating wires, mocks, illustrations, and working with dev’s to implement the designs.

Logo Design

Amplynx Logo

Homepage Overview

Amplynx Homepage

Homepage Details, Card Sorting

Amplynx Homepage

Homepage Details, Illustrations

Amplynx Homepage

Content Filtering

Amplynx Content Filtering

Track Previewing

Amplynx Track Previewing

Uploading Confirmation

Amplynx Uploading

Sample Portion of the UI Style Guide

Amplynx Styleguide

Adventures

Adventures, Location based gaming

About

For the 2013 Geocaching Block Party we wanted to create a series of unique caches for our attendees to find. These caches all played into the theme of the Block Party and were available only on the day of the event. While these were not traditional geocaches, they did allow everyone who participated to get the points awarded to their account.

Since we needed to allow for everyone (read: device agnostic) to play the game, we came up with a responsive design that supported all the recent mobile browsers. We also provided printouts for users who only have GPS and then enabled them to log their find on their computer when they reached home.

The feedback from the event was tremendous and we are already well on our way to tweaking the experience for future events.

Sample User Flow

User Flow

Selector and Game Set View

Location Based GamingLocation Based Gaming

Individual Lab Cache and Find Reward

Location Based GamingLocation Based Gaming

Prototype Game Builder

About

This is more of a work-in-progress area where I can post little snippets of the creative process. And what things look like when I’m trying to not only come up with, but also flesh out rough ideas.

Whiteboarding

Mobile Gaming

Sketching

Mobile Gaming

Sample Edit Interface

Mobile Gaming