WIFT: Whidbey Island Ferry and Tides
Concept
WIFT is a mobile application that provides frequent Whidbey Island visitors with access to ferry and tide information in an effortless way. Information about the ferry and tides as well live video feeds from popular beach webcams are all easily accessible through the app and catered towards users who frequently visit Whidbey Island.
Goal
The inspiration behind this prototype came from a discussion with some family and friends about current apps that they use when planning a weekend trip to Whidbey Island. They all used several different apps in order to gather information about the ferry, tides, and beach conditions and many of the apps made it difficult for them to access what they wanted. I decided I could design a mobile app that would provide all of the information they wanted in a more accessible way. The goal of this prototype was to assess the desirability of the application as well as some of the basic usability. I wanted to test and see if the application included all of the information the user wanted to know and see if it was presented in a way that was easier for them to view and comprehend than the other apps they use.
Implementation
I created an interactive wireframe for my first version of the prototype and then created a higher fidelity prototype based off of the user feedback I got. Before designing anything, I wanted to make sure I had a clear vision for the project. I made sure to talk with some target users throughout the whole process starting with the brainstorming phase and ending with the high fidelity prototype evaluation phase. To start the brainstorming phase, I created the below document to help organize the goals and focus for the project so that I could prioritize and make sure I got the high priority aspects done first leaving the lower priotity features in case I happened to have extra time. I looked at some of the apps that some of the users I talked with used to see what they liked and disliked and what I could implement in my app to improve their experience.
I came up with some core features based off of the improvements I could think of in addition to the user feedback I got. Users seemed to use the ferry apps when they wanted to know about the ferry line and current ferry status. They mentioned that they would like a way to pay electronically or speed up the payment process. They also said they like to get food at Ivars at the ferry dock before getting on the ferry but it can be hard to know if they have time to go to the restaurant, order, and get their food in time before driving on the ferry. They mentioned they like checking out the tides but the current tide apps don’t show the tide information in the way they want to view it. They also said it would be cool to include a webcam function so that they could easily view some of the live video feeds from some beach webcams on Whidbey.
I decided to prioritize and focus on the presentation of the ferry information, tides, and webcams. I spent the most time working on the ferry features because there were more components included within that category. Next I worked on the information architecture by making a system map.
Based off of this system map, I started to sketch the flow of the application to track some of the interactions. I wanted to make sure that the things the user wanted to access were less hidden than in the other apps and so I wanted to make sure the app wasn’t very deep. Below are some of my sketches of the interactions.
Below is an outline of what each page does.
My Passes: stores frequent rider passes for quick payment at toll booth
Schedule: displays the ferry schedule
Ferry Status: displays the available spaces for the upcoming ferry so riders can know if they will make the ferry or not, shows the arrival time for the ferry to let the riders know if it is running late or early, presents views of the ferry line and ferry lot to keep track of the ferry wait
General Information: provides information about the ferry, ferry system, and other details pfrom the WSDOT website
Ivars: allows users to preorder Ivars food while in the ferry line
Tides: provides information about the current tide, the high and low tides for the day, and the month’s high and low tide
Webcams: allows the user to watch live video from various webcams on Whidbey Island
Next, I worked on sketching the layout. I consulted users throughout this sketching process because I wanted to be able to create a wireframe that was already based off of user wants and needs. Below are some of my design sketches for the app.
Once I felt like I had a good understanding of what I wanted the app to include and roughly how it might look, I started building the wireframe. I used a prototyping software called Justinmind which I had used in a previous project. I wanted to use something that I had used before because I didn’t want to have to spend time learning a new tool since the project was already constrained by time. Below is the link to the wireframe I created.
I decided to leave the General Information and Ivars features for a later iteration because, while users were interested in them, they felt like they needed the other features more and therefore those other features were more important to test.
I made modifications when moving on to create the high fidelity prototype. I got some user feedback that helped me refine the app a little bit but I didn’t get as much feedback or comments about changes to make as I had hoped. I was concerned about the layout of the tides information screen but the users I talked with thought it was simple and communicated what it needed to. Below is a link to the high fidelity prototype I created.
Below is a demo video of WIFT to help demostrate the features, use cases, and purpose.
Evaluation
I tested my wireframe informally with some friends and family that frequently visit Whidbey Island. I wanted them to feel comfortable giving feedback and make the evaluation more discussion based. This worked well because it led me to think of other features when creating the wireframe and helped me shift some of the design based off of their suggestions and ideas. I initially had several pages in addition to the current ones but some users pointed out that they wanted things to be fast and easy. They wanted popups as opposed to new pages with tide information or with webcams. They also pointed out that they would like some icons to be easy to access and so I thought that a toolbar at the bottom seemed to fit that need.
For my high fidelity prototype, I had a more formal user test setup. I had a few tasks that I provided users to complete and I asked them questions about their experience along the way. The users were all really excited about the idea and concept of the product and so I think the desirability was appropriately evaluated. One user thought that the app was real when he was completing the tasks and viewing the webcams. He said the app was “so brilliant can I download it now?”. He later said “that would be so sweet to be able to order Ivars in line!”. I didn’t get as much feedback about the actual functionality and usability of the app as I would have liked. The users I tested with were pretty unfamiliar with UX and usability testing and they had a hard time critiquing the product. They didn’t mention many areas where I could improve and I think that could have been partially because they weren’t sure if there were technical limitations and they didn’t know what was technically feasible.
Analysis and Reflection
Overall, I think the prototype went really well. I got positive feedback from users and they seemed very interested in the product and hope to see it get developed so they can use it. I think the usability testing could be improved to better assess the navigation component of the application. I tried to design the navigation so that the user could jump to any of the screens from anywhere but it would be interesting to try and test this in a more focused and detailed way to see if there are areas that could be improved in the current layout. I think some of the visual components could also be improved. I spent more time working on the content and functionality as opposed to the visual design and so it would be interesting to work more on the visual design and see if that could enhance the user experience.
