User Testing – Medium Fidelity

 

Screen Shot 2017-05-08 at 3.16.20 PMWith the paper wireframes completed it was fairly simple to move into Xd and create medium fidelity screens to be used in a clickable prototype. Some feedback I received from Take It Or Leave It was that the medium fidelity screens should not be designed at all, simple enough so that users understand this is not what it’s ultimately going to look like.

 

testing-photo

Notes from user testing

User 1:

    1. User didn’t notice the list view when entered into the map
    2. Make the times clickable to take to purchase
    3. Add information to the Boarding Pass
    4. Users don’t notice the purchase button – CTA needs to be stronger
    5. Link times to Ferries – User wants to see what boat they are buying for
    6. Update boarding pass screen
    7. User doesn’t look for trip planner – tries to scroll through the map or find the islands through a list view
    8. Change from “Schedule” to “Routes” – Routes is more inclusive and more indicative of the 
    9. Match the list view options to what’s available on the map view (purchase, schedules)
    10. From the calendar view, should be able to see sailing times, not just purchase tickets for the day
    11. Add reservations to the list view/map view – remove trip planner
    12. “More” should be changed to “Profile” – No one will ever know what to look for in a “more” category

User 2:

  1. Links from the map don’t look clickable – Too small for phone
  2. Should be able to see ferry times when purchasing (even if ticket doesn’t depend on the time)
  3. Likes to see a map (but doesn’t notice the list view – a recurring theme)
  4. Add list-view to the map itself floating over the map
  5. Icons should be symmetrical
  6. Too much information to view at one point in list point – try some sort of visual representation breaking apart the different ferry lines
  7. Would want to see same options listed out in list view
  8. Calendar view – “cancel” and “purchase” holds too similar weights – add an “x” instead of having same hierarchy
  9. Would be nice to have the times listed out from the calendar view to see the times – maybe put “schedules” where “cancel” is
  10. Visually, the bookmark notification is confusing – don’t use a circle – maybe a bar, but try using a different color.
  11. Remove the trip planner bucket
  12. Icons from purchase need context (too similar to google directions)
  13. Important to consider tourists, user would use the app even if in town for a short term
  14. Would frustrate user to need to use another app to find directions (like bussing or driving directions)

User 3:

  1. Kind of confusing with all the numbers on the schedule detail screen – Add minutes to the information so it is clear what each number represents
  2. Note to self – Users all try and tap the actual time of the ferry
  3. Want more feedback from the purchase screen on what they are purchasing
  4. Confused by “link to pass” – User recommends removing everything from the boarding pass login screen
  5. Add more confirmation screens seeing if users are committed to purchasing
  6. Don’t care about being bothered by the location services screen
  7. Didn’t notice the words for list view – just thought it was some hamburger menu – should add something that is an actual list icon
  8. Change the language on the calendar to “cancel” instead of “clear”
  9. Wants to see more information about the routes after clicking on the tickets
  10. Wouldn’t expect to see much in profile – Not interested in seeing any personal information of other users or including any social components
  11. Bookmarks should be set out on it’s own

 

These items provided me a fairly comprehensive list of things to fix moving forward to the high fidelity screens.

Site Map

Screen Shot 2017-05-08 at 4.37.42 PM

Creating a site map was helpful in generating a greater understanding of how each of the components worked and interacted with each other.

Listed Below are some of the annotations for a couple of the steps that needed additional clarification:

Screen Shot 2017-05-08 at 4.40.29 PM

{A} – Map view is the default view that is brough up upon logging in. Map view can be switched to list view by tapping on the list icon, but the same information is available regardless of the view type.

{B} – Search function is available from both the Map and list functions at the top of the screen

Screen Shot 2017-05-08 at 4.41.09 PM

{C} – Users from the schedule view typically tried to tap on the time for the routes when attempting to purchase tickets. Tapping on the time would take the user past the “departure time screen” and immediately into the screen for determining their mode of transportation and types of tickets.

{D} – Though it is not required that you buy a specific time for a ferry departure, users found it confusing when they were not presented with the option to select a time. When coming from any direction that the user has not yet selected a time, they would be presented with the option to choose which ferry they would be riding.

As routes fill up often for cars, users attempting to purchase for a route with a long wait time would be notified that they would not be guaranteed a spot on the ferry based on the ticket they purchased, rather, they would board in the order that they arrived to ferry terminal.

Screen Shot 2017-05-08 at 4.41.29 PM

{E} – Users would be given the option to star rides from the departing terminals view. Once those routes had been starred, they will show up in this section. There would be the option to search, add and remove routes from this main bookmarks screen.

Paper Wireframes

Before moving into what the app looks and feels like, I wanted to make sure that I had a logical plan in mapping out the overarching ecosystem of the app – How each of the functionalities work with each other and connect.  From my conversations with my regular rider friend, I decided on four major categories that would be found in a static nav bar at the bottom of the screen:

  • Boarding Pass
  • Schedules
  • Trip Planner
  • More

Once these items were established I moved into the process of drawing some paper wireframes. This allows for quick iteration of ideas and layouts, while not getting to focused in on what it the overall end product looks like. The below pictures include some annotations for items to remember / consider when moving into higher fidelity screens or notes on how the interactivity would work.

Upon entering the app, the user would first be prompted to link their monthly pass. Rather than create a login for the app, with a separate user name and password, I wanted to explore the direction of making the only account being hinged upon your pass #. Or simply proceed to the app without linking the pass. (In later iterations I decided that simply creating a login would fix a lot of issues that otherwise would occur)

Artboard 3

After logging in (or skipping the login process) the user would first see the map. From feedback I got from some user testing some people suggested a bookmark system that might float over the map when

Artboard 1

The all important Artboard 2 Artboard 6 Artboard 5

WSF App

As an extension of the WSF branding project, I thought it would be fun to go through the UX / UI process of creating an app for regular ferry riders. I started first and foremost with the overall strategy of the app (the goals of the business as well as the goals of the users), keeping in mind what I had learned about the ferry system’s audience when going through the branding process. Washington State Ferries breaks its consumer base into three main categories: Regular Commuters, Regular-Non Commuters, and Tourist/Recreation Riders. Regular Commuters and Regular Non-Commuters combined account for 65% of ridership. Seventy percent of riders drive, 30% walk, and less than 2% bike. Riders tend to be between the ages of 35 to 65 and are aging overall (average age has increased from 42 in 1993 to 49 in 2013). Riders land solidly in middle to high income brackets: approximately half of ferry riders systemwide have a household annual income of more than $100,000, while less than a quarter make under $50,000. Roughly 80% are white.

Screen Shot 2017-05-07 at 7.19.36 PM

Ferry ridership has been in decline since around year 2000, though intermediate data reveals that ridership has increased slightly in the last few years, likely due to population growth in the Puget Sound area. The reduction of state subsidies in 2000, increases in telecommuting, and the beginning of a significant demographic shift may have contributed to this decline.

As regular commuters make up the largest percentage of their audience, I thought that they would be a great demographic on which to focus. That combined with the fact that they have the greatest potential longevity in using the app, as they have a repeated / daily relationship with the ferry. To get an understanding on what regular commuters are looking for I talked with my friend who lives on Bainbridge and commutes to work in Seattle with her husband. Together we came up with the below list of primary features that they would be looking for:

  • Electronic Boarding Pass
  • Ability to purchase/renew passes
  • Notifications of schedule changes and delays
  • Vessel tracking
  • Approximate wait times
  • Traffic cameras (indicating potential wait times)
Screen Shot 2017-05-07 at 7.28.21 PM

With these ideas in mind I set off to create the app itself.

High Fidelity Wire Frames

Now that the brand has been established, with the colors, textures and overall visual direction, it is now time to use the low fidelity wireframes constructed earlier to build out a more robust idea of what the site will look like.

In creating the high fidelity wireframe, I decided to use the skewed div wireframe which is a little less common and provides a more active / action-filled experience.

Screen Shot 2017-03-19 at 4.05.42 PM

The menu would respond a little differently than many, and come out at an angle. In the menu I thought it was important to highlight the company and their credentials almost above everything. Including links to social media helps with establishing some trust as well as it shows the real life experience and photos of a group of people with content that is updated consistently.

Screen Shot 2017-03-19 at 4.05.54 PM

Another important feature would be a pop-out window to request a quote. Just adding another polished and professional piece to the site that assists with a trustworthy look and feel but that also takes away some important information about the users goals for the trip.

Screen Shot 2017-03-19 at 4.05.07 PM

As the user scrolls down the page they come across the key qualities highlighted in the first window.

Screen Shot 2017-03-19 at 4.04.54 PM

It’s still a little rough, but these wires have established a visual direction for the company that sets it apart from a lot of the other competitors in the industry.

Mountain Cheetah – The Brand

With the logo locked up, it was only a matter of pulling from my visual inspiration board to establish a further defined identity for the company, focusing on these three brand pillars.

Screen Shot 2017-03-19 at 4.02.12 PM

With those words in mind, I built out the below moodboard.Screen Shot 2017-03-19 at 4.02.26 PM

Bringing in bold type with strong textures and overlays provided a bit of wild adventure, however, focusing on a strong grid with fairly structured component helped keep the overall aesthetic trustworthy and confident.

From there I established the brand type as well as colors:

Screen Shot 2017-03-19 at 4.02.58 PMScreen Shot 2017-03-19 at 4.15.18 PM

Some brand assets might look like the below:

Screen Shot 2017-03-19 at 4.03.16 PM

The Logo

With the company taking on a more specific direction, I was able to pull several different looks and feels into a final logo version.Screen Shot 2017-03-19 at 4.02.38 PM

Above all the logo looks to establish a trustworthy and professional feel. In my research these components will be the most impactful in attracting users. As mentioned, the final logo combines a number of the original logo exploration ideas. See below for a few different lockups on some of the potential brand colors.

Screen Shot 2017-03-19 at 4.02.46 PM

Low Fidelity Wireframes

maxresdefault

It’s really easy to skip a couple steps ahead in the process and start trying to make a website that looks cool. However, in this process I wanted to make sure I was coming up with the right solution for the given problem. So for this project I made sure to start thinking about how the information should be structured and the website set-up to interest people that find the website through Google, a recommendation, a paid advertisement, or any other source on the internet. Ultimately, the website needs to be useable, trustworthy and responsive, and the layout and structure of the site needs to support that.

 

Option 1:

This is a very familiar option in today’s web. By being familiar it accomplishes a few easy goals: It’s trustworthy and it’s relevant. The old website outdates itself (even though it wasn’t even designed two years ago) but sticking to modern conventions immediately establishes it as a contender, and the familiarity of design is comforting for people who are looking for something reliable and trusted. I’ve come to the conclusion that a video might be more beneficial than still photography, as it really helps convey an emotion and sell an experience. While a navbar would be available in the upper right hand corner, the information present would be simplified enough that someone might be able to scroll down the page and know exactly what they are looking for next. As mountian climbing is Mountain Cheetah’s forte, this piece is going to be pushed. The three circles represent icons and they would be “Mountain Climbing”, “Safari”, “Combination Safari & Climbing”.

V1

Option 1A

This option is similar to the first layout, it just moves the logo to the center and strips away the text over the image. This is attempting to push the trend a little more and highlight the brand more by making it front and center.

V2

 

Option 2:

A little more cutting edge…

 

V3

 

V4A

 

Version with takeover request form

V4B