Case Study: Shark Tracker App Redesign

A look at how Ocearch's shark tracker iOS app could be redesigned

Shark Tracker iOS App


I’m a huge fan of what 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.


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!


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…


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.


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.


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.


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.

Comments are closed.