Strol_logo_500

 

Mobile redesign and web app build

2014-2015

strol_hompage_hero

Project.

There are an average of 1B+ international travelers world-wide. Strol is a web app that helps these travelers turn any route into a scenic one. The previous experience was complex, challenging to navigate, and did not leverage basic interaction design patterns. Our challenge was to design an experience and interface that stood out, could evolve over time, and appealed to our target audience.

Goals.

To create a digital travel companion for users who enjoy interesting sights and attractions when walking the streets of London, New York, Dubai or anywhere.

Involvement.

UX Design, Visual Design

strol_discovery_notes

spacer

strol_discovery_personas

The Approach.

When I joined the Strol team v1 of the overall experience was already in place. I was tasked with rethinking the user experience and interface design prior to the next major iOS release. My first question was, who am I designing for? I conducted a series of stakeholder interviews to ensure I had a solid understanding of the primary purpose, vision and goal the team wanted to achieve.

Armed with the vision as well as many key assumptions I conducted competitive research to get a better understanding of the market landscape. User interviews were also conducted to better understand current user patterns and habits as well as identify the tools they use to mitigate frustrations when sightseeing today in unfamiliar places. Both of these activities were important to help validate the teams previous key assumptions. From the discovery research three key personas were developed to help guide the design decisions moving forward.

strol_10

spacer

Sketches + Wireframes.

For the first time I tried sketching in a digital notebook which had its pros and cons. A plus because gave me a new level of access on the go. I could sketch and quickly prototype a few ideas to get user feedback almost instantly. This allowed me to refine my sketches more frequently which was key in helping me arrive at better design decisions faster.

Drawback… it is not pen and paper. I often found myself printing the sketches so I could further iterate and in order to get better feedback. I also still needed to print sketches to get a broader view to the system and how the screens flowed together. I do still use my digital notebook as a secondary tool when I need a quick sketch prototyped with mock interactions.

Prototype + Testing.

With the sketches to a decent place jpegs were uploaded into Invision to enable users to test interactions. Prototyping the sketches enabled the team to review and comment on the design and interactions as well as provide early feedback on any technical limitations.

Next, we scheduled a few user interviews so we could get an understanding of how users completed some of the basics tasks that aligned with screen goals. Insights from user tests were used to refine the wireframes as well as validate assumptions from discovery interviews.

spacer
spacer
strol_discovery_moodboards

Setting the tone.

This project presented a unique opportunity for me to stretch my branding chops in order to more closely align the look and feel of the application with insights learned about user preferences during discovery. Three mood boards were developed and reviewed both internally and with users to capture feedback and reactions. The final board was refined and used as the base of a Strol style guide.

spacer
spacer
strol_3

spacer

strol_4

Mockups + Testing.

With a few rounds of revisions and testing the team finally landed on mockups that were ready to move to development. I worked closely with our developer to bring our designs to life in the staging environment. Communicating requirements via Skype and discussing constraints and possibilities was an effective way of solving interaction problems as they arose. We worked collaboratively, tested constantly and iterated progressively.

The team also developed a desktop version of the web application in which I mocked up some quick visual design ideas for that portion of the project as well.

Download the Strol app and start exploring!
en-play-badge-border download-app-store-badge-300x91