Whiteboarding

Our team began by creating a short list of goals that could be accomplished through the app: learn more about available river cruises, buy tickets for river cruises in advance, access purchased ticket information, and contact GO RIO. We took inspiration for the basic structure of our app from some of our favorite apps that we use every day. One of those elements that we included in our own design was Instagram's tab bar located at the bottom of the screen. Its large icons are great for accessibility and ease of understanding for those of older age which are a lot portion of our audience. Another app that we took inspiration from is Twitter. We needed a way to give the user access to more information, such as contact and about information, that would not be as needed as often as the menu options in the tab bar. Thus we chose a hamburger menu for the top left corner of our layout. Putting it in a familiar location and giving it visual weight makes sure that the user doesn't miss anything and isn't left searching.

Project Type

Small team project

Duration

4 weeks

Skills Developed

Wireframing, prototyping, user testing, iterative design, teamwork

My Role

I focused on the overall visual design, prototyping, and user testing. Our team's goal was to create an application that would create an effortless and enjoyable experience for purchasing tickets for the San Antonio river cruise.

Software Used

GO RIO

Mobile App

Design

The color palette used was inspired by the original GO RIO website. We decided to update a few of the colors to create a more vibrant look but still include many of the same shapes and symbols used on the website for consistency. We decided to change two of the colors within the color pallet, the red-pink and the blue-teal. The original pink color had more red to it's tone but we chose to make it more of a true pink in honor of the rich Hispanic culture and colors that could be found along the river walk. We chose to add more green to the original blue to give it more of a teal hue. Doing this gives the site a more nautical feel and we believe better-complimented lime green. Another design choice we made was to introduce a "wave" shape that can be found all throughout our app. Along with the choice of teal, it is a visual element that resembles the shape of water and the bottom of the GO RIO logo. All of these design choices contribute to our overall design goal to create a vibrant app that reflected the bright, lively colors of the downtown San Antonio River Walk. We want to create more than just an app, but an experience as well.

User Testing

Our team went through two separate rounds of user testing. Each group was deliberately diverse in age, background, and major. We used GOMS to measure how long each user took to complete each of the four tasks on the prototype: learn about services, purchase tickets, review ticket information, and contact the GO RIO company. With this information, we were able to learn where our users were getting lost in order to solve those issues.

Try it out yourself!

What We Learned

We had two major take aways from our user testing.

First, the homepage. We made two major changes from the first to the last iteration. Our users did not know that there was more to the page than just the logo and picture. By adding the arrow, we were able to indicate that the page was scrollable. We also chose to lighten the color of the chosen icon from the dark teal to a lighter blue. Changing the color allows more accessibility to those who may not be able to see the less contrasting color.

Second, the contact page. Originally we only had the option to send a message. Our users all had a similar confusion when we asked them to contact the company with a question. Many had the instinct to call a phone number to gain a quick answer. They voiced concern that they would not hear back from the company in time and would rather go to their website to find the number. We decided to add multiple contact options including mail since not everyone may have access to email or a phone.