SUMMARY

Often while driving my phone buzzes every half hour or so with text messages asking for updates on my location or arrival time. Even though it has been proven dangerous to text while driving, I feel obligated to respond. There are many apps that allow the recipient to see the location on a map, but there are not any cross-platform solutions that don’t require a download.

On My Way™ is my solution to this problem. An app that not only lets your loved ones know where you are but sends that information periodically through text messages, using human-friendly language.

In this process page, using text and images, I will explain my process in designing the interface for the On My Way™ app. I also included icons of the skills used during each phase of the project.

OUTLINE & APP FLOW

The app should be simple and straightforward to use, while making use of the user’s own text message system.  Because this app will be used right before the user begins their journey the preparation needs to be quick and painless. There will be no log-in screen, no set up wizard or any extra steps to getting started. The user only has to enter the destination and add the people they want to send updates to, the app will do the rest.

Using Microsoft Word, I (roughly) outlined the functions and how each might relate to the other. I realized early on that some recipients will want to receive more or less data than others. So a preferences section would also be needed to address both the users needs and that of each of their contacts.

View Outline

Once the outline was established, I mapped out the app flow using OmniGraffle’s flowchart software. Although this app is fairly simple, it was crucial to map everything out to get a good understanding of how it will work.

View App Flow

LAYOUT SKETCHES

After listing out the functions, categorizing them into sections and mapping the flow, I began sketching out ideas for the layout of the app. I like to start with a pencil and paper to get my ideas on the page quickly. This helps me get an idea of how much each section should take up and where the sequence should be on the app screen.  I was able to quickly visualize how the user would interact with the elements and whether or not they could quickly interpret what they see and then reach their goal.

I developed a simple layout that splits the app into two major sections; location and contacts. When launching the app the user would have to ask themselves Where am I going and Who do I want to tell?.  The choice of layout allows the user to immediately answer those questions and get on with their trip.

Once the user is on their way, and it is safe to do so, they may want to know if the app is functioning properly or see what messages it is sending out. The Trip screen displays a map with the user’s location along with a log of the messages sent out. 

WIREFRAMES

After the setup and trip log screens were established I set out to build wireframes for each screen and setup a user flow showing the process and interactions. While building the wireframes and user flow in Adobe Illustrator I was able to imagine in more clarity how the user would interact with the app and then I refined the design.
I discovered, that I should indicate to the user which contacts were favorites and also which had exceptions to their messaging. In order to display the most amount of contacts on the screen I decided to show the exceptions below the contact names when they are selected. When they are not selected it will show a dot next to the avatar image indicating some preferences had been changed.  

View User Flow

UI DESIGN

Using mainly Adobe Illustrator I worked on the details of the User Interface (UI). I prefer to start with illustrator so I can easily keep each iteration of the design on the art board. I can quickly and continuously compare iterations.  This comes in especially useful when making decisions on color or button design. While fleshing out the UI, without division lines in between the contacts, I can bring them in tighter. This provided some extra space to show an additional contact. 

I also took the time to finalize the logo and splash screen. The logo was designed to fit the app’s bright and friendly appearance while giving some incite into it's purpose. Later I brought the app design into Photoshop to refine the details, produce better gradients and create mockups.
 
The app’s most current design is bright and friendly and easy to use. It gives the user all the relevant information needed in a straight forward manner. 

Large Image

CONCLUSION

Although I’m happy with the current iteration and the progress of the app, I still have a ways to go in ultimately refining the design. Beyond development, I’m currently designing a survey to understand how useful this tool will be for users and how they might expect to use it. I am also working with the online tool InVision to get a working prototype of the UI for some direct user feedback on the layout, flow and feel of the app. In the future I refine the animation visualizations, using Adobe After Effects.  There are also some questions I will need to answer, like how do you keep distractions (like responses from recipients) to a minimum?

I will continue to update this page with the app’s progress.

Copyright 2015 Michael Worthington Designs
Patent Pending

CONGRATS, You made it to the end!

BE SURE TO CHECK OUT MY OTHER WORK