Posts

Header image with the text, 'Mobile app or mobile site?', on a multicolored background.

Mobile app or mobile site?

In my most recent post, I described some challenges that amusement parks and their suppliers would face in hiring a designer, developer, or company to build them an app. Namely, these:

  1. Smartphone users don’t all use the same kind of phone. Responsive design helps designers today be better at designing for different screen sizes, but the phones can use several different major operating systems.
  2. Developing for each operating system – iOS (Apple), Android, Windows Phone, etc. – requires developers to have different technical skills.  It is very hard for a developer to cultivate deep specializations in coding for more than one operating system.  One developer with a deep specialization in Apple devices and one with a deep specalization in Android will be more knowledgeable and more useful to you, in most cases, than one generalist developer who knows a little about both, but…
  3. If you hire both the iOS developer and the Android developer, it will cost you more money.
  4. If you hire the generalist who tries to do both, the app’s quality will likely suffer, and/or the developer will not be able to work as efficiently.
  5. If you have an app for iOS but not Android, or vice versa, users of the other operating systems won’t have an app that they can use.
  6. Even if you do spend the money on a larger development team or an app that will work on more devices, users aren’t guaranteed to use the app.

In other words, I understand that you can spend a lot of money to hire a big development team, have them deliver – on-time – an app that works great on almost any device, and still have wasted your money because the app is collecting dust in the App Store. I’ll be describing some of the reasons why apps don’t get used and some ways how each one can be avoided.

The first hurdle: Download

What if you had an app that worked for all smartphone users?

In order to get your prospective customers to use the app, you must first convince them to download it. Sites do this in a variety of ways:

Notifying existing customers

They may call or email existing customers about a new app in their device’s app store. If it’s their device, this strategy can work for customers that you already know about. But still, they need to be persuaded that they do in fact need the app before they just disregard the call or email. And people in your target market who could give you new business but who aren’t already your customers still won’t know about the app this way.

Creating a partial mobile site

They may present a mobile site that has some of the functionality of the desktop site and the app, but not all of it. The 80/20 rule works well in building out features in this strategy, assuming that time and budget constraints don’t allow building out the whole site. But it still leaves users wondering why the mobile site does not have everything.

Displaying an app pop-up

They may pop up a mobile-friendly message over a mobile or desktop site, telling users to download an app. Users don’t click or tap on anything that they think is an ad, and they will find repeated prompts annoying. Even 10 years ago, leading usability experts said that 95% of users react to pop-ups “very negatively or negatively”, which makes it users’ most hated online advertising technique. This still holds true today.

Displaying the desktop site on mobile devices

You may give users a desktop site which tells them about an app. But then users have to deal with a page layout with too much information on it for their screens. They probably need to pinch and zoom to find the button for downloading your app from the app store.

But do these work?

Recent Deloitte and Comscore studies have said that one-third of smartphone users in the UK and the US, respectively, no longer download any new apps in a typical month.  And 9 out of 10 app users don’t spend any money in apps.  Fewer than half of all smartphone buyers in 2013 were buying their first smartphone, and the “wow” factor of downloading new apps for a new device wears off in as little as four months.  Paid apps have an even harder time with this.

The second hurdle: First-time use

What if you did get them to download the app?

Most apps aren’t used at all

Your site still needs to persuade them to actually use it. If your app is downloaded (not even opened) at least once from the App Store, you will have done better than 60% of all other apps. 95% of all apps are used for less than a month and never opened again.

Don’t make them commit too soon

The design of the app itself must keep both existing customers and possible customers in your funnel. If your app begins with a screen that forces users to register for an account they don’t already have, you have already presented another hurdle in getting users to use it.

The problem with passwords on mobile

Passwords, in particular, are a problem with registration. Since smartphone users have to type on a smaller keyboard, they make a typo on every fifth character, on average. Suppose that a new user creates a password with 8 characters, a standard that most IT organizations consider secure enough. The chance that they get just one character right in confirming a password is therefore 4 in 5.

The chance that they get an entire 8-character password right is 4 in 5 to the eighth power, equal to 65536 in 390625: only about 1 in 6. And that’s only if they can remember the entire password for signing back in.

Digital products often don’t know the difference between a mistyped password and a forgotten password, so they just tell users that their password is wrong. An error message that merely says that the password is incorrect misleads users into thinking they forgot the password. At this point, most users will abandon.

Bring users up to speed, with the right amount of information

Similarly, even if your app doesn’t make users register, it still may leave them confused when they first open it. The app might not give users what they need. Or it might not make it possible to show them where to find it. Or the benefit of your app versus a competing (or built-in) app might not be clear. Or your app might give users a first screen that is really only for advanced users – or screens that treat them like they’ve never seen a computer before. It may need a tutorial and not have it – or have a tutorial that is irrelevant or too long for users to remember anything.

If users are confused about anything, their chance of abandoning keeps going up. As Alan Cooper, Robert Reimann, and David Cronin wrote in About Face 3, users do not want to remain beginners very long, and our designs should cater to the vast majority of users in a product’s target audience: the perpetual intermediates.

The third hurdle: regular use

Your app probably won’t be in heavy rotation on a user’s phone unless it truly provides value that they can’t get anywhere else. According to recent research, 55% of smartphone users used less than 5 apps per day on their phone.

For example, many park map apps are in the clear here for guests that prefer using their phone to carrying around a paper map. But they won’t be accessed if guests leave their phones in a locker or in their car – or if your guests ignore your pleas and lose their phones on roller coaster with them.

For users who wouldn’t otherwise open your app again to routinely use the app, the app has to give them another benefit that they will definitely use. This could tie in to other touchpoints of your park’s service. For example, users of your app could have a rewards system that gives them their choice of several discounts on items in the park in exchange for using a check-in service to tell their friends that they are at the park, or sharing a photo of themselves at the park for the park to use on social media.

When to opt for a mobile app over a mobile site

When your users need integration with other features in their phones

Some features of a smartphone cannot be accessed by mobile websites.  For example, mobile websites cannot access a phone’s camera.  Support for website access to push notifications is increasing but still limited.  iOS 8 allows websites to have access to a user’s location, which Apple has been allowing since at least iOS 6.

Most apps at least allow users to access them while they are intentionally offline or unable to access Wi-Fi or mobile data.  Offline First, a new initiative which follows Mobile First design strategies, aims to design and develop apps which can be used offline.  In contrast, mobile websites are only accessible while users are connected to a wireless network or able to receive mobile data.

When many of your users would benefit from time-sensitive information

The 2014 IAAPA Attractions Expo, which I attended several weeks ago, set a record with over 30,500 amusement industry professionals in attendance.  The official IAAPA Expos app  allowed users to have quick access to a wealth of information about the trade show: exhibitor profiles with links to each exhibitor’s website, maps of the trade show floor, a list of all education sessions, press releases that came out during the event, and push notifications reminding them of upcoming events.  IAAPA has had mobile apps for their Attractions Expos every year since at least 2010.

While there were some changes I would have made to the app, I did find the app’s content quite relevant.  I used it every day on the floor to find new exhibitors to visit, and it cut down on the time that I spent searching.

There’s ROI in developing an app for a large event like this because attendees commit hundreds of dollars, minimum, to attend the Expo, and there were over 30,000 attendees.  Over 19,000 were registered as buyers, and anything that would help make buyers more productive with their time helps maximize the chances that everyone will get what they need from the show and that the exhibitors will find it worthwhile to return next year.

Furthermore, the IAAPA Expos app helps users be aware of IAAPA’s other trade shows.  With the same app, users can learn more about who was at the most recent Euro Attractions Show and Asian Attractions Expo.

When your app’s purpose matches why users use apps

According to a recent New York Daily News article, mobile users now spend 88% of their time on their devices in apps, compared to 12% of their time on mobile websites.  The article says that 60% of all media that users consume is now via mobile: 52% from apps and 8% from websites.

A recent Harvard Business Review article describes how average users use their time on their phones.  46% is devoted to relaxation or entertainment.  19% is for interacting with other people, while 12% is shopping and 11% is for managing finances, health, and productivity.  Preparing for upcoming activities, reading the news, and self-expression each account for less than 10% of mobile users’ time.

Web apps: a hybrid solution

Part of the problem for organizations which want apps is the overhead associated with app stores.  App stores have to approve apps before they will make them available for download, a process that can take weeks.  Apple maintains a lengthy list of reasons why apps may be rejected.  These include the following:

  • Apps that don’t work
  • Apps that “do not provide any lasting entertainment”
  • Apps that are only for marketing or advertising
  • Apps that use notifications to send advertising
  • Apps that require personal information from users (including their email address or birthday) in order to function
  • Apps that don’t comply with Apple’s Human Interface Guidelines

Web apps do not have to go through an approval process.  Also, Apple takes 30% of all revenue generated by an app.  A web app can keep all of its revenue, but it can’t be listed on the App Store.

Test, test, test

Therefore, taking the app route successfully requires testing with users at every possible point where they may drop out of the process: the landing page which tells them about the app (which needs to be mobile-friendly, or users won’t stay on it), the listing in the app store, the initial screens of the app, routine use, and any sort of checkout process within the app. And the app has to be designed and built with a solid understanding of users’ goals, the tasks that they want to perform in accomplishing those goals, and their frustrations.

Successful apps like Facebook, Twitter, Evernote, and just about every successful mobile game that you can name have done well because they understood what users needed, delivered on it, and kept on testing with users.

If you don’t go the app route, your site will still need to do an effective job delivering on users’ actual needs. I still recommend frequent testing with your users in either case, but at least an effectively-designed mobile site will have several hurdles eliminated: getting people to download the app and convincing them to use it. Then you just have to deal with the engagement and conversion problems that desktop sites also need to tackle.

I agree with Econsultancy’s conclusion based on Deloitte and Comscore’s recent research: the percentage of web traffic coming from mobile devices is now far too big to ignore, and it is getting bigger.  So when developing a native app is needed, it becomes a “both-and”; you would need both a responsive website to cater to mobile traffic and a native app to draw upon capabilities of the phone.

Even if 88% of smartphone time is currently spent in apps, the website provides a very important “shop window” (Econsultancy article’s term) for helping prospective customers to perceive your brand.  But for most businesses catering to other businesses in the amusement industry, a responsive website by itself will do the job.

Let’s talk about mobile strategy

Part of design thinking involves making sure that a digital product you are considering creating is the right solution for your business.  In a brief, free consultation or a more extended discovery phase, I can help you determine whether a responsive website, a web app, or a native mobile app would be an effective solution for your business.

Use this contact form or send me an email to start discussing some ideas.  You should also follow @DavidParmeleeUX and @ThrillAndCreate on Twitter for more useful articles about how to improve your product’s user experience.

Blog header image which says, "Why go mobile?", in front of a colorful background.

Why go mobile?

In November, I met many new contacts in the amusement industry in Orlando at the IAAPA Attractions Expo, an annual trade show which is the biggest such event in the amusement business. Some of my contacts there had had their websites redesigned to be responsive or mobile-friendly. Others had not yet but had plans for this to happen, and others were unsure about whether or not they needed to do this – or were convinced that they should not.

I’ll begin by describing general reasons for any site to go mobile. I’ll conclude with reasons why sites with a relatively small number of prospective customers should go mobile too.

More users are accessing the web from mobile devices than ever before.

 

Even a year ago, many countries had more mobile phones currently in use than they had people. The distinguishing feature of smartphones over earlier feature phones is that they have operating systems.

But, as of May 2013, 63% of adults who owned any cell phone used it to go online, and 34% of those users went online using mostly their phones. This percentage is substantially higher in upper income brackets, such as those of park executives. (In fact, I saw several park executives doing business on their smartphones at the recent IAAPA Attractions Expo.) Now toward the end of 2014, these percentages have only increased.

Users spend most of their smartphone time using apps, which are designed for their phone.

Several months ago, Nielsen research estimated that adults who use Android phones or iPhones spend 65% more time using apps on their phone than they did two years prior. An app’s design will typically be tailored for the device displaying it, such as an iPad or iPhone. I have occasionally seen iPhone apps display on my iPad as though they were on a giant iPhone instead, but these were commonly development builds rather than proper releases.

The only times I’ve ever seen an app give me a screen that was not optimized at least for a mobile device were when the app opened a webpage in my phone’s browser and it wasn’t a mobile-friendly webpage. Users find the experience of being taken from a mobile app to a mobile site jarring enough, but being taken to a desktop site on a mobile device is an even more jarring experience that forces users to pinch and zoom to learn anything meaningful from a webpage.

The smaller mobile screens cause users to have more trouble understanding what they are reading. Jakob Nielsen reported that many mobile users were more “visibly angry” when confronted with a page full of content that they could not understand than desktop users were. They were less interested in reading whole news stories and just wanted to grasp a story’s main points and move on.

Mobile is taking on a more significant role in the workplace.

In a piece for TechCrunch, Roger Lee observed, “Some 95 percent of knowledge workers own smartphones, and they reach for them first to do all kinds of tasks – from email and document sharing/management to meeting planning and videoconferencing.”

The reach of mobile is rapidly extending into industries which did not think they would have it. The increased mobility of workers across industries may contribute to this. According to the U.S. Department of Labor, the median number of years workers have been with their companies in 2014 is 4.6 years. Workers ages 55 to 64 had been with their companies an average of more than three times longer than had workers ages 25 to 34.

Switching industries is also quite likely, at least for workers with technical backgrounds. Many job postings and hiring processes in software development stress having skills in particular programming languages and frameworks and consider domain knowledge or experience in a particular industry to be a “plus” or “nice to have”.

My career attests to this. It began in retail while I was in college. After graduating, I worked on a large financial application. After this, I switched to the satellite industry and then to the call center industry. The reason for switching industries so often was that this was where jobs were available in my area. At the time, I didn’t want to relocate. When given the chance to start my own company, I considered what I most wanted to do for a living and for whom. This led me to the amusement industry a little over 2 years ago.

So don’t be surprised if our industry’s composition drastically changes. The amusement industry contains dream jobs for many people. Those who enter an industry mid-career bring their experience, processes, and expectations from one or more previous industries.

Parks’ sites are increasingly going mobile.

At the IAAPA Attractions Expo, I spent four full days on the trade show floor, networking with people all over the industry. I was able to meet several of my clients and other recent contacts. And I realized that the busiest booths at the show often belonged to ride companies. Trade shows are their most major setting for landing new deals. Often, these deals happen with parks or park chains.

More and more amusement parks have seen the business case for making their site mobile-friendly. In response, they have redesigned their sites to be responsive or have created new, separate mobile sites. As trends in the internet catch on, users’ expectations change accordingly. Companies expect their business partners and prospective customers and vendors to adapt to changing trends in technology. If you run a ride company that makes innovative rides and your site doesn’t look innovative, that is a poor reflection on your brand.

If your amusement park, ride company, or consultancy has not made their website mobile-friendly, why not?

Mobile forces you to focus your selling on the most important aspects of your product or service.

Responsive design problems are typically tackled in one of two ways.

Top-down, or desktop-first, design approaches date back to web design’s less complex, desktop-only days. A page that is designed top-down will be prototyped in a tool like Axure RP or Balsamiq, or comped in a tool such as Photoshop, to have its full desktop-only layout. Designers traditionally build desktop-only sites using a grid with either 12 or 18 columns on it. This allows a good deal of flexibility on a desktop screen, but mobile becomes an afterthought: often, content just keeps getting pushed down the page or hidden as less important.

Bottom-up, or mobile-first, design approaches involve first thinking about how a site should look on the smallest screens. This forces the designer and the client to think of the site as a billboard that users are reading along a highway – where they only have a couple seconds at most to understand a site’s message and make a decision. Consequently, most nonessential content is stripped out of a mobile site designed with a mobile-first approach. These page layouts tend to not be very busy at all, and in working their way up to larger screens, designers are able to use progressive enhancement techniques to increase the wow factor on devices that can handle it.

Desktop users benefit from responsive designs too.

Mobile-first design helps simplify a site and make the way through its sales funnel clearer. Progressive enhancement allows the mobile experience to be enhanced appropriately while maintaining the site’s “billboard” mindset. This results in sites whose purposes are easier to remember.

B2B sites that offer a wide range of products or services have to think about how to best present those for mobile users. User experience designers may use card sorting studies so that users can help organize the products in a way that makes the most sense to them, simplifying their journey through the site. These studies influence the whole structure of a website or web page, so they benefit mobile users and desktop users alike.

A mobile site eliminates several hurdles present in developing native apps for mobile devices.

The first is on the business side: the cost to develop and maintain an app that works for all smartphone users. The vast majority of smartphone owners use either an iPhone or an Android phone, although a smaller percentage use Windows phones and other kinds of devices. Each of these types of phone uses its own operating system, requires different skills to develop apps for it, and would therefore require developers (or, depending on the size of your app, development teams) with different skills in order to develop and maintain it.

Development teams that lack the budget and resources to develop an app for every type of phone counteract this by focusing all of their efforts on one platform – most commonly iOS, the operating system used by iPhones and iPads. But this leaves users of other platforms wondering if an app will ever be available for them. If they don’t have an app they can use, they are forced to interact with your brand digitally using only a desktop site. This is at best an inconvenience – switching devices to complete their tasks – and at worst, lost sales for you from an entire range of users.

If you had an app that worked for all smartphone users, you still would not be guaranteed a return on your investment. You would have to design your existing site and your App Store listing in a way that convinces users to download it. From there, you would need the app’s onboarding process to ensure that users will use the app that they have downloaded. And you would need the app itself to be useful enough to users to get them to use it on an ongoing basis.

Each of these is a big hurdle for any app in the App Store. If you’re committed to having an app designed – or if you’re still not sure about what benefits you will get from a mobile app versus a mobile site – the next post is for you.

Why go mobile if your potential customer base is small?

IAAPA is known as a trade show which puts smaller businesses in the amusement industry on a relatively equal footing with its bigger names. While smaller companies may not have the largest booth in the most prime location, they are still respected organizations that make a positive difference in the industry year after year. Some smaller organizations even sponsor the trade show.

Still, hiring a UX designer is not cheap, and in an ideal world, a UX designer would not work alone and be fully responsible for both designing and building a website. The assigning of design and development tasks to at least two separate people makes a project more expensive. Even if they individually make less money from a project because less of their time is involved (assuming a time-based or fixed-price pricing method), they do require time to work with one another on the project. For example, the designer will need to meet with the developer to make sure a proposed change in a design is technically feasible. Therefore, while the cost to a client is not the same as hiring two contractors for the life of the project, it is still more than the cost to hire only one.

However, there are still reasons to go mobile even if your customer base is small.

B2B projects typically involve more money.

Many ride companies produce relatively few projects per year. Companies who work on the most expensive ride projects often get a great deal of business from trade shows and have a waiting list. So what would be in a redesign for them? They may be able to use a UX design project that focuses on mobile as a way to learn more about their prospective customers just as much as a way to provide their prospects with another way to engage. And in utilizing mobile touchpoints, the value adds up. If you want to land more projects and use your site to this end, the ROI is substantial.

It provides an opportunity for scaling your business.

Similarly, more work allows a company to hire more employees and contractors. It allows the company to become bigger. For example, some companies in the amusement industry recently mentioned at IAAPA’s education sessions that they use mentorship to develop the next generation of leaders in the attractions industry. Some ride companies have formal programs for allowing young ride enthusiasts to pursue their dream jobs designing rides. If a company has more work, these programs can be helped.

It reinforces that you provide good customer service.

This September, Salesforce reported that how the customer feels they are being treated influences 70% of buying decisions. Customer service is well-regarded as important in retail and in the amusement industry, and it plays a pivotal part in how people perceive brands.

Digitally, investing in usability is a form of investing in customer service. Organizations want to maximize their ROI from their digital products. To this end, they design their sites to optimize conversions, email their lists about new products, and often employ live chat teams to answer customers’ questions about products. Companies that were previously not known for good customer service have had to invest in making their sites more usable because not doing that costs them sales.

Similarly, giving users a site that works on their devices is a form of courtesy. Users come to their site with the mindset of, “I want to learn more about this company and perhaps buy from them.” Giving them a desktop-only website that is a huge inconvenience to navigate and read, or telling them outright that you won’t serve them on the device they are using, gets rid of their goodwill and often causes people to leave your site – possibly for your competitor’s.

It shows that you want the sale, by meeting prospective customers where they are.

Imagine that you are in a mall with several large department stores. Both stores have products that you are interested in and advertise that they won’t be undersold. They are giving you the same items at the same price, and you are the same distance away from both.

However, one store is known for how its customer service gives adequate attention to every customer. If a customer is indecisive, experts are on hand – but not annoying – to help them choose and buy the item that is best for them. They honor customers’ requests if they don’t want to be bothered while they are shopping, but they converse with the customers who want that and are helpful to anyone who has a question. Their staff sets their sales floor before the store opens each day, and throughout the day, they make sure that the floor is neat and that all merchandise is easy to find. They use good customer service to remove barriers

The second store has employees that are just punching the clock. Their sales floor is ill-prepared; sizes aren’t in order, and the right item in the right size could be in any of several different areas of a department. Its employees are indifferent, spending most of their day talking with one another or texting their friends. Customers are expected to fend for themselves. If they look in one stack of clothes for a pair of pants in their size and their size is not in the pile, they pick a different style or leave the store thinking that the store doesn’t have their size: a lost sale.

A website that is mobile-friendly and designed with a user-centered approach says, “I care enough about you to present myself carefully and meet your needs. If you’re not sure about something, don’t be afraid to ask. I won’t make you fit your questions into my format in order to get a helpful response.”

A website that is not mobile-friendly or not designed with a user-centered approach says, “I really prefer users who use this other kind of device. If you have a question, pinch and zoom and maybe you’ll find what you’re looking for. But I’m not promising that I have it, and I don’t know where anything is. Good luck!”

What’s next

Later this week, I’ll explore reasons why you should consider a mobile site versus a native app.

Work with us

I would love to discuss new design or evaluation projects – especially if I saw you at IAAPA, but even if I didn’t.  You can use this contact form or email me at info@amusementUX.com.

Screenshot showing the redesigned live About page for The Coaster Crew. This section of the page explains the different tiers of membership, which build on each other to include more benefits for individuals, families, and Platinum members.

UX Process in Action: Consistently pushing myself toward a better design

image

Describing the new Coaster Crew website, which launched in September, has been a long story.  I began this project by learning more about the site’s target audience and developing personas, including the primary persona for CoasterCrew.net: Javier, a male in his mid-20s who typically visits parks in the Southeast US once or twice a year and loves big roller coasters and drop towers.  The ideas and design process for each page of the site have been centered on showing people like Javier, who typically aren’t familiar with coaster clubs or coaster enthusiast terminology, two things:

  1. Why should I be in a coaster club?
  2. What can I do in a coaster club – specifically, in The Coaster Crew?

In later articles, I described my design process for several of the pages on the site: the new homepage, the new In the Loop page, the events list, and a page inviting users to participate in the Coaster Crew Network Forums.  Most recently, I explained the Coaster Crew Network bar, which appears in the footer of each page of CoasterCrew.net and (in the future) the fansites to allow users to navigate around the network more easily and be more aware of all of the sites the organization offers.

I skipped over the About page intentionally.  Because it is a complex page with multiple sections and many iterations in its design, I wanted to describe it last.

Read on to see how several sections within About the Coaster Crew came to life.

image

The original sketch envisioned an infographic with a playful design below an attention-getting mission statement in a blockquote.  The infographic was going to tell the Coaster Crew’s story of how they increased from 4 members to more than 1000 in less than 15 years.  The copy for the infographic was already on the old Coaster Crew site’s About page, but it had not been styled to get users’ attention more.

image

The original mission statement in my redesign looked like a block quote printed for a poster.  Here is the original wireframe.  At this point, no decisions had been made about the background image.

image

The second iteration of the prototype included the fonts and the first background image.  I decided to use Intimidator 305 for this picture because it has been the centerpiece of several of Coaster Crew’s biggest events since its opening in 2010.

image

After two rounds of usability testing and feedback from the Coaster Crew staff, I used a more traditional row layout and dropped the novelty fonts. The text was easier to read after adding shadows behind it in development, but user testers still found it too hard to read.

The new background picture, also of Intimidator 305, was taken by a member of the KDFansite staff and donated for this site.

image

To enhance readability and make the mission statement pop more, I put a full-width yellow panel behind the mission statement text.  I also switched the fonts to different-weight fonts in the same typeface to keep a common theme with the fansites’ design, which are currently using different weights of Open Sans.  The About Us header was added for consistency with other pages of the site after we switched the layout back to multi-page.

image

On mobile, the mission statement displays as one long, single column.  The emphases on different phrases within the mission statement becomes more obvious.

image

Here is the original layout for the infographic, which was focused on the pictures.

image

Here is the first round of the infographic with pictures.  I was unhappy with the broadcast icon used here because its background was still visible.  Several of the graphics were full-width and did not scale well for mobile, so I changed them after receiving this feedback in testing.

image

The layout changed slightly after I migrated it to Zurb Foundation 4.3’s responsive grid system in development.

image

Throughout this project, I challenged myself at several junctures to find the part of the design that I liked the least and improve it.  The About page, especially its infographic, easily stood out the most.

I decided to edit every image I had used in the infographic.  I switched to a four-column layout with the last two columns empty to show a train for Great Bear going by.  The focus moved more toward the number of members an events and away from the less important number of states where we have offices.  That is because users are more interested in an organization’s benefit to them (and the organization’s proving it) than in an organization’s structure.  The infographic would lead to a call to action for people to join The Coaster Crew and attend events.

image

Here is the call to action to join Coaster Crew at the bottom of the infographic.

image

The infographic displays like this on a mobile device.

image

The mobile layout’s single column keeps viewers more focused on the statistics that the infographic is presenting.  The state icons display in three columns to save space and keep viewers’ attention on the statistics.

image

The original layout took on a zigzag pattern and provided space for other content such as images in the empty parts of the page.

image

Testers had trouble trying to find the part of the site which talked about membership benefits.  Changing the more creative but less obvious “You may ride again.” header to “Why join?” was the first move toward rectifying this.

image

I redesigned the rest of the About page, including the Rules section, after the second round of usability testing.  After the icons in the Events section received very positive feedback in testing for being able to attract users’ attention, icons were added in the Forums and Membership Benefits sections.  I added the prices in the left column based on tester feedback.

image

Some usability practitioners speculate that on mobile devices, the first page has replaced “above the fold” with regard to page content.  Mobile users are more likely to scroll up and down pages than to tap links to other pages.  So I added a quick blurb of copy about the events to the Membership Benefits header.

image

Per a tester’s recommendation, I added dividers to distinguish between the levels of memberships.

image

The Coaster Crew Network row moved below the Membership Benefits in the final layout.  Users were generally more able to comprehend the membership benefits and network when each was presented across one full row.  They are more able to think of this as one unit rather than having their eyes bounce back and forth between columns with unrelated information.

You can see the About page live on the Coaster Crew site.  You may also view my design stories for the other pages on this site here: Intro, Personas, Homepage, In the Loop Podcast, Events, Forums, Signup, and Coaster Crew Network Bar.

I am a user experience designer specializing in the amusement industry. I work for amusement parks, ride companies, coaster clubs, and any other company or organization affiliated with amusement. If you would like to hire me, please contact me through my website or tweet at @AmusementUX. You can also like my company’s Facebook page or follow me on Twitter.

Screenshot of the Coaster Crew's new Events page. The page begins by listing the perks that guests can expect, such as exclusive ride time and behind-the-scenes tours.

UX Process in Action: Evolution of a coaster club’s events list in 17 screenshots

image

The new Coaster Crew site went live recently. I designed it, and in a series of articles I have been explaining how. First, I explained some of the design considerations for refocusing a coaster club’s site toward the general public and not only toward coaster enthusiasts. Then, I showed how the new Coaster Crew site moved from a multi-page layout to a single-page layout and back. Most recently, I walked through the new In the Loop homepage – from sketches to wireframes to prototypes to a live site on several different devices.

Today, let’s look at how the design for the Events page changed over time. It’s one of the more visually striking pages on the live CoasterCrew.net site now, but the design today is a radical departure from how it looked earlier in this project.

image

As with the other pages, I began by sketching some ideas that I had selected earlier.  This first idea called a lot of attention to the very next event in hopes that 1) people wanting to go to multiple events would be able to keep track of what is next and 2) Coaster Crew might get more signups to events that they need to fill up soon.  This is the idea which got selected early on and lasted well into usability testing.

image

The final design turned out more like this idea.  This idea highlighted the next three events, which are usually all at different parks around North America.  Site visitors could easily see which events would be closest to them.  The top row of 3 was the idea that persisted and became part of the live site’s homepage.  In reality, we went with a hybrid of these two original sketches.

image

In the first wireframe, I used the original idea of highlighting the next event on the left.  ”Join us at our next event!” would have been the page title.

image

The page would continue with more future events, “save the date” notices, and a way to sign up for The Coaster Crew newsletter to find out about more events.

image

With no background image, the first prototype looked like a Windows 8 style flat design.  That’s not what we were trying for here.  I also later decided after a round of usability testing that less was more regarding the fancy typography.  Rather than using multiple fancy typefaces, I opted for multiple weights of one typeface with other fancier display fonts used sparingly.  This design strategy will be used on the fansites too.

image

I liked how the newsletter call to action turned out in this layout.  I never liked this transition between the events list and the forums.  In later iterations, I used background pictures more liberally to help the flow between the sections.

image

This background image overlay came from BGWFansite‘s special hard hat tour of Verbolten.  My intention here was to show an example of one of the perks that Coaster Crew members get at events.  I edited the background image the way I did to have consistency with the previous section (Podcast).

image

The events section received a lot of requests for changes during the second round of usability testing.  Testers didn’t like how the section was very long.  Scalability would have been a problem when the staff adds the Coaster Crew events for 2014 to the page.  Coaster Crew already has a lot of events on their schedule for next year.  Testers also wanted to know what they could expect at events, and they thought the existing page wasn’t doing this well enough.

After The Coaster Crew’s Big Bang event at Kings Island with exclusive ride time (ERT) on The Beast, they posted new pictures to their Facebook page from the event.  Using an ERT picture in the background for the Events section gives the page a much more human feel and helps visitors to the site connect with the organization more.  Testers could tell that this was a picture from a real Coaster Crew event and were much more interested in the content because of it.

image

I kept the page’s attention on the next event, having it fill the whole top row.  The future events list switched to a 3-to-a-row layout as in the second sketched idea.  The second idea also had future events 4-to-a-row after the first row, but I decided against this because it would not give enough room to display the event info on tablets.

image

I added this What to Expect section after the list of events.  It used similar icons to the rest of the site.  Testers eventually wanted this further up the page because it was below the fold and they thought people new to Coaster Crew wouldn’t see it soon enough to notice it.  In the live site, I tightened these icons to one row and moved it above all of the listed events.

image

Here is the live site on desktop.  When the 2014 events are populated, they will fill in three to a row, left to right.

image

The activities list shows up for all devices because users who are unfamiliar with our events may be using any device.  For performance reasons, and because iOS doesn’t currently support fixed-position backgrounds, I stacked several images from Coaster Crew’s Big Bang event at Kings Island and made that one background image.  The top image is a sign Kings Island had for their event group.  The bottom image, shown if you scroll down on a tablet, is from a behind-the-scenes tour of The Beast.

image

The stack of images shows up more obviously in portrait mode.  You won’t see The Beast’s logo after the 2014 events are populated here.  This section has the live event data that is currently in the system.

image

Mobile users see what exclusive ride time is front and center before they are told about events that have it.

image

After users see what they can experience at Coaster Crew events, they are invited to the next event.  More events are listed further down the page.

image

The fall colors for the More Future Events list really stand out on mobile.  Calls to action take users to places where they can get more information about the event or register.  Some registrations are handled through the Coaster Crew site, while parks’ sites take care of others.

image

The way to see pictures from past events shows up more clearly on phones. It allows users to go to the Coaster Crew Facebook page, fansites, or forums for more information.

I hope you’ve enjoyed seeing how Coaster Crew’s new events list came to be. The next article is already ready to launch soon, and it will walk you through how the Forums page got built. It shows how I responded to users’ feedback to grab their attention with the design of the page and tell them why they should register for the forums.

I am a user experience designer specializing in the amusement industry. I work for amusement parks, ride companies, coaster clubs, and any other company or organization affiliated with amusement. If you would like to hire me, please contact me through my website or tweet at @AmusementUX. You can also like my company’s Facebook page or follow me on Twitter.

Live screenshot from the Coaster Crew's homepage

In 15 Pictures: The new Coaster Crew site goes live

The new site for The Coaster Crew has now gone live. Seven months in the making, this is my second site for Coaster Crew, after their new Coaster Crew Network Portal was launched in June. Like the Portal, the new Coaster Crew site uses a responsive design. This means that it is designed to look good on desktop computers, laptops, tablets, and smartphones.

The Coaster Crew is a roller coaster club with over 1000 members in the US and Canada. I’ve attended several of their events in the past and really enjoyed interacting with other roller coaster enthusiasts, riding coasters in Exclusive Ride Time, and going on behind the scenes tours! I hope my schedule will allow me to attend their events again soon.

image image image

One of the most interesting challenges of this site was helping Coaster Crew expand their audience of coaster enthusiasts to reach more of the general public. General public guests who enjoy riding roller coasters often don’t know about coaster clubs and tend to visit parks less often than enthusiasts do. However, there is not as much disparity between enthusiasts and GP in terms of which rides they tend to like, save for “hidden gem” rides at lesser-known parks that tend to receive much of their attention among only enthusiasts and small parks’ regional audiences.

Over the coming weeks, I will continue to work on redesigns for the Coaster Crew fansites. The fansites have a more direct benefit for the general public, who should find several new sections for the fansites helpful.

image

I began this project by researching the current and prospective users of the Coaster Crew sites.  This is a common strategy for people in my profession, user experience design.  I’ve written a whole article on how I did the user research for these sites.  It will be the next article to go live in this series.

image

Next, I sketched out every page of the new site.  Many ideas in this original sketch for the In the Loop section were included in what is now the live site.

image

After that, I created wireframes for each page.  This was an early idea for what is now the header on the homepage.

image

Then, I created the prototype for the site in three iterations.  This is the second round of the prototype for the In the Loop page, as depicted in Axure.

image

After a second round of user testing on a beta site, I created a final prototype.  This Forums section is from that prototype.

image

A third round of user testing on the beta site gave me some great feedback, like moving a section showing people what to expect at a Coaster Crew event to the top of the Events section.

image

The BGWFansite and KDFansite staff and I donated some pretty striking pictures of coasters to use on the site.  The mission statement appears over a picture of Intimidator 305 at Kings Dominion.

image

An infographic and call to action for membership highlight the new About section on CoasterCrew.net.  A future article will show more about the design process for this infographic.  I took the background picture at Hersheypark this season.

image

This is the first Coaster Crew site designed to be easy to use on mobile phones.  This page allows users to listen to In the Loop on their phones.

image

I mixed different font weights throughout the new Coaster Crew site design.  This is the event list at mobile width.

image

The new homepage features teasers of each section of the site.  User testers loved how the background for each section stayed in one place as they scrolled it into view.

image

A new network bar unites the entire Coaster Crew network.  (It does have a title, Coaster Crew Network, which is not in this screenshot so that I could show the full footer.)

This has been a great project to do. Explore the live site at http://coastercrew.net, and stay tuned for more articles describing how each page was built! The next one will describe how I learned more about the types of people in our current and target audiences.

I am a user experience designer specializing in the amusement industry. I work for amusement parks, ride companies, coaster clubs, and any other company or organization affiliated with amusement. If you would like to hire me, please contact me through my website or tweet at @AmusementUX. You can also like my company’s Facebook page or follow me on Twitter.

The new Coaster Crew Network Portal acquaints users with the Coaster Crew's network of fansites and invites them to join The Coaster Crew.

Introducing the new Coaster Crew Network portal

My first site for the Coaster Crew, the Coaster Crew Network portal, has now gone live.

When I started working for Coaster Crew in January, I intended to redesign their main site and their fansites.  I would redesign one fansite as a template for the other fansites’ staff to roll out the changes to their fansites.

During the design process, I realized that the sites needed more than a bar across the top or bottom of each page for unifying the network’s brand.  They needed a portal site to raise awareness of their brand and the different sites that they provide.  The new portal site provides this in a responsive design which adapts to any device and window width.

These screenshots show the design process:

image

Findability was an interesting problem to tackle with the Coaster Crew fansites.  Each of their fansites currently have very similar names, such as KDFansite, KIFansite, and SFAFansite.  I thought about classifying the fansites by park owner, but the primary persona for the design would have been confused for any park chain other than Six Flags.  Of all parks represented by their fansites, only one has the park chain’s full common name in its name (Six Flags America).  Parks change hands over time too, and this can be a point of confusion for the users.

I decided to solve this by classifying the parks by region and listing the parks’ names and locations with the fansite logo.  It makes the webpage longer, but it enforces the correlation between fansite, park, and location to people who may have trouble with it.

image image

I mimicked the final site as well as possible using Axure RP 6.5.  Certain features, such as the pinned background, work differently in Axure than they intend to work in the final product.  Axure RP 7 will have more features for responsive design and is coming later this year.

image

The site went through quite a few color schemes.  CWFansite’s manager sent me the nice background picture of Canada’s Wonderland’s B&M gigacoaster, Leviathan, which served as a nice frame of reference for the rest of the page.

image

Next, I coded the page using the latest version (4) of Zurb‘s Foundation Framework, with custom CSS.  Due to licensing, we had to switch out a font that we had planned to use in the Portal and in the forthcoming CoasterCrew.net redesign.  We’re now making better use of different weights of the same typeface, a theme you will also see in the fansites when their redesigns go live.

Until now, the site had been using a color scheme based on Leviathan’s.  The users who tested our site (in exchange for free Coaster Crew memberships) gave us overwhelming feedback that the text was too hard to read.  GIMP came to the rescue.  Putting two directional lights to focus the viewer’s eyes on the passing train made the background behind the text darker, and adding a translucent overlay or panel to the main content column made the text easier to read as well.

One last change got us to the design that you see now.  The “Coaster Crew” text in the header was replaced by a Coaster Crew logo, with “Network” placed to the right or below it depending on the window size.

image image image image image

I would like to thank the many others from Coaster Crew, listed in the site credits, who contributed in various ways to this design and launch.  If you are interested in doing usability testing for the other forthcoming redesigns, test opportunities will be announced via the Coaster Crew Facebook page.

I am a freelance user experience designer focusing on the amusement industry: amusement and theme parks, ride companies, and other related companies.  If you are interested in hiring me to work on a site or app for you on a freelance/corp-to-corp basis, please contact me via my website.