Made as a proof of concept in 2015 for Sandals
If you’ve ever been to a Sandals resort, you might be familiar with all of the print collateral you are handed when you check-in and get every morning under your door. It’s all to help you understand what activities are going on that day, give you information about each restaurant, and make you aware of where everything is. The problem with this system is that’s a lot of paper waste and who wants to carry around a folder of papers anyways? Besides, you don’t get any info on the excursions or spa treatments you can purchase. You have to go to different desks for that. And if you want to see the menu of the restaurant you have a reservation to tonight you have to go to that restaurant and hope it’s while they’re open. Oh yeah, and you had to go to another desk to even make that reservation.
With free Wi-Fi on the resorts, and the fact that most guests have their phone with them anyways to document their vacation, I thought, what better solution than a native mobile app?
So I designed one, as an exercise to put all of this content into a clean easy-to-use app and to pitch to the media team.
Step 1: Preparation
To help wrap my head around the project, I created a document that outlines the why, what, and how statements, along with the text-based user flow of the app.
Why: To help Sandals guests better engage with property features while on resort.
What: Provide a way for guests to find what they need more quickly and efficiently.
How: Through a clean mobile app that replaces all paper waste on property.
You can see the entire document here.
Step 2: User Flow
Once I had the textual flow written down, I created a digital flowchart in Illustrator. There are some things that changed slightly once I moved into the interface design, but this is the flowchart for the entire app.
Step 3: Wire Frame
The visual flowchart really helped understand how the user navigates through the app. It was time to move into some sketching and wire framing. I used an index card I made in the shape of my Nexus 5 phone screen to build the shape in my sketch book. The app has a lot of content to it, but is relatively basic when you look into it. It has a few different template screens, then a handful of ones that are slight alterations of those. So I sketched out four different screen layouts to get started.
Step 4: Assets
Time to get digital. The next step was to start getting together some assets for the app that I knew I would need. Some of these are listed in the document I shared above. But overall I needed a set of navigation icons, a color palette, and some photographs.
Here are the icons I created that I am using in the design.
Here is the original color palette I made for the app. My thought with this palette was that each different resort would have it’s own designated color, categorized into islands, then accompanied by two secondary colors. I ended up not using these colors, and going with a more simple approach only using a few hues and tones.
Step 5a: Organization
It was in this step where I realized the color scheme I made wasn’t going to work. It was too busy, too many colors were clashing with one another. I moved into designing the app. Designing for both iOS and Android platforms was a must, which was good to know from the beginning, but is always a fun challenge. I enjoy the hardships of adapting a look that stands on it’s own but fits in with the iOS 8 and Material Design looks. I’ve been using Sketch for a few months now, and has been amazing for UI design. I don’t think I’ll ever go back to Illustrator or Photoshop when designing for web and mobile. There are many resources for Sketch to help with designing for multiple platforms. This is where I get most of the templates and plug-ins that I use.
Here’s a peek at the Sketch project files for both platform designs.
Since we’re looking at the project files, and some organizational aspects of this project, I figured I’d show you some more. Here are some screenshots of the project directory from my desktop. It’s important to stay as organized as you can, especially with big projects.
Step 5b: Design
I’ll usually design for iOS first, since it is a larger user base, although I am an Android user. For the most part, the two designs look very similar at a first glance. But I’ve changed parts of the design to fit each platform. For example, most text in the iOS design is centered whereas left-aligned for Android. As far as fonts go, for iOS I used San Fransisco and for Android I used Roboto. Some other slight changes are where the main navigation is positioned whether at the top or bottom to work with the native Android navigation and standard iOS layouts. Lastly, I changed the background color of the main body as well as some slight color block layout nuances.
Here are a few stills of the app for each platform.
Step 6: Prototypes
The goal with this project was to get it to a prototyping phase so that viewers can click through it. I use InVision to prototype. I find that for showing the design and usability of the app, InVision works best. For native animation prototypes, and if you need to get a little more detailed into the user experience, Pixate and Proto.io are really great resources.