Posts

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.

Daily Scrum for Freelancers

Daily Scrum for freelancers and other teams of one

Thrill & Create does user-centered digital product design for the amusement industry. In other words, we design websites, microsites, apps, and any other digital products with a view toward making these products easy to use and enjoyable for park guests, business partners, and any other prospective buyers in the amusement industry.

Although we work hard not only on design but also on running our business, we also endeavor to work as smart as we can. We regularly see how we can improve our process.

My background in work processes

As a former software engineer for large, mid-sized, and small companies, I was able to ship products successfully in each setting using widely varying processes.

The large company, a multinational corporation which had a team in the hundreds for our project, used a traditional waterfall process. The requirements team handed off their work to the logical design team, which handed theirs to the physical design team. The waterfall proceeded to the development teams and to the test teams before it was turned over to the customer. Meetings and signoffs abounded, and going back to a previous step was largely impossible. To speed up the schedule, the project team was split in half, with each half of the team working on a separate release. While with this company, I started becoming very interested in software development processes and read my first several books on agile.

The mid-sized company used a team in at least 3 states and a spiral development process. They, likewise, had separate people working on each step: requirements, design, development, quality assurance, and integration testing. But the teams staggered their work so that each group could stay one step ahead of the next group.

The small companies used geographically distributed teams and agile processes. I was generally responsible for working on individual features and bug fixes and carrying them through to completion through design, development, initial testing, and supporting quality assurance engineers or systems engineers as they tested my work. Our teams would have daily stand-up meetings and twice-weekly calls with team members in other locations. In each stand-up meeting, members would answer three questions:

  1. What did you work on yesterday? (or on the most recent work day)
  2. What are you working on today?
  3. Are you blocked, or stuck, on anything? (Are you waiting for anything to happen which is keeping you from being able to finish your tasks?)

The advantages of agile

First published in 2001, the Agile Manifesto lists 4 core tenets:

  1. Individuals and interactions over processes and tools
  2. Working software over comprehensive documentation
  3. Customer collaboration over contract negotiation
  4. Responding to change over following a plan

While agile teams still value the items on the right, they value the items on the left more. Agile processes allow companies – particularly smaller companies – to respond quickly when their clients want something changed. They also tend to minimize, but not eliminate, paperwork.

1. You spend more time doing design, development, or testing.

I was surprised at how little time I spent writing code at software development companies that used a waterfall process. Other team members and I spent many weeks between development iterations writing comprehensive documentation and waiting for other groups in the project team to hand off their deliverables to us. In the agile shops, I wrote code nearly every day.

Designers in an agile project can spend more time designing. Developers can spend more time developing. And testers can spend more time testing. They all become better at their crafts faster. No more sitting around for weeks with nothing to do while you wait for another group to get their work done. There is generally a lot less waste in agile processes.

What that means for you: Agile gives us more time to master user experience design, so that each new site, app, or other digital product we ship is noticeably much better than the previous one. It allows us to become UX experts faster.

2. A product’s users are more likely to end up with a product that they want.

The Lean Startup movement emphasizes the notion of the minimum viable product (MVP). The MVP has only the features that allow a product to be launched. Typically, the MVP will be deployed to only some of your customers: those who are likely to be more forgiving and more willing to give helpful feedback on the product. With fewer features to work on, the project team can focus on making each feature exactly right.

MVP helps companies to understand what customers want more quickly and to focus on developing the right product ideas for serving them best. Later releases of the products can include more features and a wider release.

What that means for you: You’ll know very early in our design process what your users think of our designs. We start our testing with users far before the first release of a product. Many products can be tested with users starting with as little as a sketch. We will use test users who represent your target market well (verified with user research), so that we will take your digital products to market with greater certainty that they will want them.

3. You can ship (and make money from your product) sooner.

This is tied to the minimum viable product (MVP) strategy from the previous point. Because an MVP has fewer features, it does not require as much time to design or develop. This allows the product to be released and sold (or used to help sell other products) much sooner.

Scrum, a widely used agile method which I have also implemented at Thrill & Create, organizes work into a product backlog. The backlog is a list of requirements (features, bug fixes, user test comments, non-functional requirements) that the project team maintains. After the product owner identifies which items need to be in a shipped product, the team needs to work through items on the backlog in order to be able to ship the product. Story points help us to estimate how long everything will take.

What this means for you: If your website, app, or other digital product does not need to be launched in an all-at-once fashion, we can release it in stages. This helps provide you with a fast return on your investment before our team is even done with design and development.

4. Problems are easier to identify and fix early.

Design and development are not exact sciences. User research can help us anticipate what users will want. However, it doesn’t absolutely ensure a correct design. And many software development projects encounter problems that require extensive rework to fix properly.

Fortunately, the Agile Manifesto emphasizes working software and customer collaboration. At a development level, this means that as early in the process as possible, there is always a version of the product that they can ship to customers at a moment’s notice. That version keeps receiving updates as the developers continue to deliver work. At a design level, we test designs with users at many stages to identify problems with their usability and validate which design directions are correct. This allows us to avoid wasting budget developing solutions that do not work.

What that means for you: Your budget will be used more effectively because we won’t spend it going far down the wrong path in our designs.

5. It is easier to allow customers and users to change the product without having the product ship late.

One of the main reasons why agile processes were developed was that waterfall processes respond to change poorly. Waterfall projects often use slow, involved approval processes in order to have changes approved. Teams often have to work at an unsustainable pace in order to ship changes without slipping the project schedule – if that is even possible.

Agile – and in particular, Scrum’s story point system – makes responding to changes easier. Scrum iterations have a fixed duration and a fixed number of story points or hours available. With a fixed timeline, we can use these estimated task durations to determine what makes it into each sprint: new features, bug fixes, testing, and any other work items. Changes that happen often result in lower-priority tasks being removed from the sprint and either deferred to a later sprint or removed from the project. The ship date is only pushed back if the changes do not result in existing tasks being removed from the project.

What that means for you: While we are the designers, we collaborate with you consistently to make sure that you are getting what you and your users need. We are able to accommodate changes in a project in a way that does not jeopardize ship dates as long as our overall project scope remains the same.

How Thrill & Create implements Scrum

At Thrill & Create, we have had different ways of working with our project teams.

When I worked on the Coaster Crew projects, I had one primary and one secondary point of contact with the other Coaster Crew staff. My main point of contact was their webmaster, who also handles the back-end development for their sites. I sent him a weekly status email which detailed what I was working on and whether I was blocked on anything. On tasks that required more involvement from him, we would communicate more frequently via email or Facebook chat. I handled project management and usability test triage using an Excel spreadsheet, which was mainly for my reference.

My secondary point of contact with The Coaster Crew was their vice president of membership. The webmaster and I interfaced with him for more directional-level decisions and budget approvals. Beyond this, I was also able to ask questions or post comments for the rest of The Coaster Crew’s staff to answer.

When I worked on a redesign for a local nonprofit, I initially had a project team consisting of myself as UX designer/PM, a graphic designer, a developer, and an idea guy. We met weekly over dinner to discuss our project and move the project forward. This project was done in a more waterfall-like setting. Due to multiple factors beyond our control, I ended up completing the development myself using a daily to-do list for project management.

I decided to make the rebrand from Dalandan Concepts (pronounced “dah-LAHN-DAHN”) to Thrill & Create a purer application of Scrum processes.

But how do you do daily stand-up meetings as a team of one?

Partway into the project, I created a Daily Scrum spreadsheet with the following columns:

  • Day of week and date
  • What I did yesterday
  • What I still need to do from yesterday (if anything)
  • What I’m doing today
  • What my main project for the day is
  • What iteration I am on in my main project
  • What my second and third projects are (if any)
  • Am I blocked on anything?

I’ve added an entry to this spreadsheet each day since then. Typically, I begin the day by checking my email and doing any other administrative tasks unrelated to my main project. After a break for breakfast, I fill out my Daily Scrum spreadsheet for the day and get into my main list of tasks.

Often, my tasks for the day in Daily Scrum come from my master to-do list. This makes the Daily Scrum process very easy.

Early iterations would be focused on preliminary design tasks, such as user research, persona generation, brainstorming, and sketching. After that, my iterations would usually take the following format:

  • Work on design for items in the iteration
  • Work on development for items in the iteration (Note: For multi-person teams, UX design authors have advised making the design team stay 1-2 sprints ahead of the development team)
  • Draft a list of tasks for user testers
  • Run a round of user testing
  • Write down feedback from each tester, including some metadata indicating which users were closer to our target persona
  • Triage feedback from each tester based on the item’s priority, severity, and level of effort. (Items that multiple users cited and items cited by users with characteristics closest to our target personas’ were given a higher priority.)
  • Determine what would go into the next iteration.

However, my role for the Thrill & Create site was bigger than design. I was also responsible for the site’s development. This made estimation more of a challenge. Several iterations had spikes, shorter timeboxed periods for researching concepts or creating a simple prototype. (Some spikes, such as the ones I did, do result in more features and bug fixes being delivered for the product.) This is why my Daily Scrum spreadsheet has some days listed as Iteration 3.5, 5.5, 6.5 and 7.5.

I also use task breakdowns fairly extensively in estimating the duration of a task. Task breakdowns enable more accurate estimates because they force thinking about the details of finishing a task. Agile methodologies encourage further breakdown of any task estimated to take longer than two days. Incidentally, my biggest lesson learned from the Coaster Crew launch was to not assume that migrating the site from a prototype to WordPress was a short task. Initially, I had estimated it to take 3 days, but the extensive development required for the migration added weeks of work to the project.

The way I do triaging is somewhat different from the story points method in classic Scrum. With the Thrill & Create site, I assigned the effort of work items on a more relative scale. My spreadsheet, then, had columns for priority, severity, effort, and priority times effort. That helped guide me through selecting work items to include in sprints.

The priority and severity scales I use are based on several I found in this Interaction Design Association (IxDA) forum thread. Thank you to Jim Drew for these scales:

  • Severity: Critical: a crash or data loss; users are blocked unless they restart the app or reload the webpage. UX issues rarely reach this level.
  • Severity: High: A major feature is broken and can’t be used fully, or a minor feature is either too broken to use at all or not present
  • Severity: Medium: A major feature can’t be used fully, a minor feature is blocked, or a feature is broken but has a workaround.
  • Severity: Low: The problem doesn’t affect (or only lightly affects) users’ ability to use a feature. An example of this would be poor message wording, or color contrast that meets WCAG AA but not WCAG AAA.

The priority scales I use are based on the following. I adjust them according to how many users are reporting a problem and how close those users are to our target persona:

  • Priority: Critical: This needs to be fixed in this iteration, or other items (priority high or medium) cannot be addressed until a fix for this one is complete.
  • Priority: High: We need to fix this item in this iteration, or at least before we ship the next release.
  • Priority: Medium: We would like to address this item in this iteration or release, but we might not get to it.
  • Priority: Low: We are likely to not do this work item; we only have it in the spreadsheet so that we can track the issue.

As a bonus, here is how I scaled the required effort for a task for the Thrill & Create site:

  • Effort: Extreme: Significant increase to the project scope. Feature is either impossible to build or would require significant development effort or substantial budget/travel to build. For example, one tester on the Thrill & Create site did not like the fonts in several portfolio items. To change this honestly, I would have had to essentially redesign the typography of sites I had already delivered to other clients.
  • Effort: Very High: Bugs that are probably fixable but have a great deal of uncertainty and/or require testing in many configurations. New features that require a great deal of thought and care and/or a full design process to implement properly. For example, comments concerning the overall mood of a site require a thorough review of many aspects of a site to identify the best solution for changing the site’s mood.
  • Effort: High: The work item requires extensive, well-thought-out changes to implement properly and may require new sketches, wireframes, and/or prototypes. For example, when we are asked to change a site’s color scheme, we research new color schemes and test them out in prototypes. High effort could also mean that a bug is affecting different kinds of devices in different ways. For example, the How Can We Help? buttons on the Thrill & Create homepage were displaying unusual behavior around some breakpoints and had to be tested extensively on multiple devices since they essentially required a partial rewrite of a grid system.
  • Effort: Medium: The fix seems simple, but dependencies make it so that we have to make sure it doesn’t break anything else in the site. For example, if the site’s grid system on one page needs more padding at tablet widths, we need to make sure that changing it will not cause undesirable effects on other pages.
  • Effort: Low: Bugs that I already know how to fix when I see them or features that only require a few lines of code to implement. For example, during the Thrill & Create site’s development, the text on the Send Message button was too small. This was relatively high priority but a very simple fix.

Tips for freelancers and teams of one who are considering implementing Daily Scrum

Maintain a Daily Scrum spreadsheet which says what your current projects are, what you did on the previous work day, what you are doing today, if there was anything from yesterday you didn’t get to do, and if there is anything blocking you from finishing today’s tasks.

  • Make it daily: Set a reminder every morning (on work days) to update your Daily Scrum spreadsheet
  • Consistency: Don’t worry if you miss a day. Just make sure you get back to it.
  • Billing: If you do not bill hourly or use value pricing, bill in iterations.
  • Schedule: Timebox the length of an iteration. In other words, if you say at the beginning that an iteration lasts for 3 weeks, keep the length of an iteration at 3 weeks. Don’t go over.
  • Clear communication: Especially if you are remote, always be clear with your clients on what you are working on and whether or not you are blocked on anything.
  • Collaborate: Make sure to collaborate with your clients, especially with your main point of contact. “Here’s your assignment, now go do it and give it back to me when you’re done” is not a way of thinking that Scrum encourages.
  • Minify?: The optimal size for a Scrum team is 5-9 people. If your team has 1-3 people, consider a process with less overhead by replacing some of the meetings with less formal sessions.
  • Remember what it’s for: Use it to stay accountable (to yourself and your client), productive (the point of any good work process), and happy (probably one of your reasons for being in business for yourself).
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.

In their redesign, the Coaster Crew's fansites have a new Network Bar at the bottom of every page for easier navigation to the other fansites. The Network Bar uses the fansites' individual color schemes. An example of the network bar for one fansite is shown here.

UX Process in Action: Navigating a network of 10 sites and counting

image

Ever since the new Coaster Crew website launched in September, I have been writing articles describing my design process and design decisions.  The series began with a post about how I learned about both the roller coaster enthusiasts and the “general public” segment of The Coaster Crew’s audience and determined how to best target the site toward the general public while still meeting enthusiasts’ needs.  Later posts outlined how several of the pages on the site came to be: 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.  I also went over a new membership signup flow which is not currently on the live site due to technical limitations.

Today, I’ll discuss how the Coaster Crew Network ties together with a feature that you can see now on CoasterCrew.net.

The Coaster Crew currently owns and operates ten live websites.  Their official site has been live in various incarnations and web addresses since 2004.  They started operating fansites for amusement parks several years ago when the Kings Dominion Fan Site went under their ownership.  (Prior to this, several Kings Dominion fansites had come and gone over the years.  Usually, these sites had one or two owners and would be maintained well for several years before the owners no longer had time or no longer had interest in working on the sites.)

They later launched fansites for Busch Gardens Williamsburg and Six Flags America.  Most recently, they have added fansites for Cedar Point, Kings Island, Canada’s Wonderland, Dollywood, and Valleyfair.  The Coaster Crew Network site originally just served as a gateway to their forums.  Earlier this year, I launched a complete, responsive redesign of that site with a focus on tying together all of their fansites and social media channels and providing a consistent look and feel with the other sites I have been redesigning for them.

Selling users on the idea of the fansites as being part of a network is important for the Coaster Crew.  The fansites have not always had a consistent way to navigate between them, and it can be hard to remember which fansites are in the network.  The staff suggested a network bar in the sites’ header or footer.  I decided that since tall footers with site maps are common in designs today, I could merge the network bar into a tall footer.

image

I sketched five different ideas for the network bar at the beginning of the project.  The first was a simple listing of all of the fansites across one row.  The second divided the list of sites into four columns.  The third put the names of the parks with the fansites.  The fourth arranged the sites in columns by the park chains represented by each fansite.

image

The layout that seemed to scale best arranged the parks by geographic region.  It seemed to be the best at handling new sites’ being added to the network bar.  If park chains sold a park, we would not need to update the network bar and users would not be wondering if we still had a fansite for that park.

image image image image image

I tested each idea’s strength by creating wireframes for them.  The first three ideas seemed to work for a header or a footer, while the last two were definitely for footers.  In addition to scalability, the fifth idea also seemed the best for the design since a tall footer on each page would allow for some strong design ideas there.  I continued to work on that idea through the prototype and later stages.

image

In Axure, I initially added bright colors for the network bar before I knew what the background pictures would be.  The copyright and footer links were initially very minimal at the bottom of the page.

image

I took this background picture of El Toro with a point-and-shoot camera. It has remained the desktop background on my old desktop computer for several years. This picture seemed to go very well with the network bar, so it became the background.

I built the network bar locally using Zurb Foundation 4.3.  The fansite’s logos fill 100% of their container’s width with auto height.  The copyright and map statements were minimal.  User testers seemed to receive this layout well, but I thought more could be done with it.  It also didn’t have the ribbon yet.

image

For performance reasons, the live site on mobile doesn’t keep the background in one place.  It shows the fansites two to a row instead of four to a row to size the logos ideally for the smaller screen.

image

The footer now features a panel with the Coaster Crew’s mission statement.

image

The network bar currently takes almost exactly one screenful for a tablet in landscape orientation.

image

In portrait mode, most of the blue footer panel can also be seen.  Zurb Foundation 4.3 automatically hyphenates words on mobile devices to keep the parks’ names from becoming too wide for their columns.

image

The desktop layout shows the blue footer panel mostly obscuring the roller coaster hill behind it.  It gives clear access to The Coaster Crew’s social media channels under the club’s logo in the footer.

image

Lastly, here is a preview of how the network bar will look on the redesigned fansites.  I did this as an overlay, similar to the In the Loop background, because each fansite has a different color scheme and that will allow each fansite’s personality to translate into its network bar design.  This is a prototype and still subject to change as the sites move toward going live.

You can see the Coaster Crew network bar live on any page of the Coaster Crew site.  The next and last article in this series will discuss the About page: the best example in this project of my consistently pushing myself toward a better design.

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.

We redesigned a membership signup form for The Coaster Crew which used a more natural-language approach. This screenshot shows a step of the new membership signup process as shown on a beta site.

UX Process in Action: Designing a new signup flow for a roller coaster club

image

The new Coaster Crew website launched in September. I’ve been writing articles about our target audience and how each page on the site came to be (Homepage, In the Loop, Events, and Forums).

Today, I’ll show you something that isn’t on the live site. I designed a new membership signup form, which was available in the prototypes that we tested with users.

image

My original idea was to allow people to fill out their own membership badge.  This would have been displayed next to completed membership badges.

image

Fresh off of conducting a round of surveys for this project using AYTM, I was used to pretty robust tools.  So my design for this form had a good deal of skip logic, custom buttons, and a full order review.  I tried adding input fields within labels as the third slide depicts, but our plugin did not support that.  To allow a quicker checkout process (and probably boost conversions), I made it possible for users to bypass the Coaster Crew merch and charity donation steps.

image

I added some space for the badge background and some copy in the wireframe.  The low-fidelity prototype already had a full set of input fields and logic for navigating between the pages of the form.

image

For internationalization reasons, I used “First/Given Name” and “Last Name / Surname” language.

In this form design, I really wanted to highlight natural language. Interacting with one of these sites should not feel like interacting with a computer. I recently saw an insurance website whose search form is just “I drive a (car’s year, make, and model), and I live in (ZIP code).” That language makes a website feel human. Websites’ forms are often terse, and interacting with them feels like interacting directly with a machine.

image

It is likely that we would have needed a premium e-commerce form to handle the skip logic and purchasing logic here, even though the choices are quite simple for users.

image

This screen would have detected whether users had selected an option in the beginning that would have not given them the best possible deal on their membership.  Another way to do this would have been to ask for the user’s and their guests’ information and recommended a membership type based on what they had entered.  This may have required disclosing the price to be a later step and felt like bait and switch to people who had seen a low membership price advertised on the pages that gave them links into this checkout process.

image

This order review slide cannot be developed with the plugins available to us at this time.  This is how it was intended to work.

There were actually 12 steps in this signup process, including all guest information pages.  I have omitted the rest from this post for brevity, but for the near future I will make the wireframe and prototype available online.  Submitting that form does not actually submit any data, so feel free to try it out.

A few screenshots of the prototype are available below.

image

The overall page used some copy which did more to highlight the benefits of membership in our club.

image

The Family memberships step allows for a quick checkout but also has options for extras.  Most of our test users actually did buy extra merch and donate to the ALS Association.  (The form they tested was not actually submitting anything.  I had them do what they would have done normally.)

image

If users opted to go to this screen, they could add Coaster Crew merchandise to their membership order. Some users in early rounds of testing had not remembered that some merchandise was included with their platinum memberships, so I added that copy here.

image

The charity slide had a quick writeup explaining that the ALS Association raises money for research related to ALS (Lou Gehrig’s disease).  I recently launched a site for a non-profit, and I know that people want to know more about the charities they are giving to without being asked to give out of guilt.

image

The payment page would have included the order total, calculated from previous slides’ data.  Users really needed to know this, and Coaster Crew staff required it, but we couldn’t find a free plugin that would meet our needs.

image

This confirmation page assumed that Coaster Crew staff needed to process PayPal payments manually, but the staff wanted that to be an automatic process.  That is the technical reason why we needed to be able to calculate the payment amount.

The prototype’s form had 12 pages, like the wireframe’s.  The prototype will still be available online for the near future.

image

Our beta site, which is still online as of this writing, had the signup form implemented with the closest plugin we could find to what we needed.  Here is how it looked in the desktop layout.  The benefits of each membership type were reprinted here so that this page could serve as a landing page.  Commonly, The Coaster Crew shares out the link to their membership page directly rather than sending out a link to their homepage or another page.

image

Because our plugin did not have skip logic, I combined all of the guest signup information onto one longer page and made all fields optional so that users signing up for individual memberships could skip it with one click.

image

This confirmation page shows up when users submit their membership information.

image image

Here is an example of how the form displayed on mobile.  I wrapped our form plugin instance within a Foundation framework (4.3) column class so that it would be responsive.

So due to technical limitations, the new membership signup form didn’t go live.  The live site shows the first page of the signup form but with a button at the bottom to take users into the old signup process on a separate server.

I had basic assumptions at the outset about WordPress plugins for forms. We assumed we could find a form plugin that was:

  1. Multi-page,
  2. Responsive to any device,
  3. Able to calculate prices based on what users enter in previous steps, and
  4. Free.

The closest we could get while I was working on this project was BreezingForms, which lets you build multi-page forms for free.  This plugin was in use on the beta site.  Since we were using this form for e-commerce, being able to carry prices forward was very important.  Our site’s new store runs on WooCommerce, but the free version of that doesn’t do the calculations that we need for memberships and event signups.

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 a page explaining why users should join The Coaster Crew's forums. This screenshot for this responsive website shows how the site adapts on an iPad 2.

UX shows 8 reasons why you should join this roller coaster forum

image

I have recently been explaining the design decisions for the new Coaster Crew website, which launched in September.  During this series, I have demonstrated how I came to understand our target audience and have illustrated my design process for the homepage (this site went from a multi-page layout to a one-page layout and back!), the new In the Loop homepage, and the Coaster Crew events list.

Today, I’ll look at a page which received some very interesting feedback from users: the Forums page.

As a freelance user experience (UX) designer, I wear a lot of hats for my one-person business.  Part of this means I maintain accounts on a lot of websites: social media sites, sites for freelancers, software vendors, and many more.  Before I started using a password manager, I was forgetting a lot of passwords.  When I evaluate a website or app, one of my first gripes tends to be this: they assume I will create an account without telling me why I should.  The worst offenders make me sign in before I even see what their site is!

Yet, this is almost exactly what I was doing with an early design for the Coaster Crew forums page.  I was giving a quick description of what the forums were and leaving them hanging.  When they tested one of my old one-page layouts, some users told me that this section “doesn’t look important, so I skipped over it.”

That’s one of the big reasons why every park, every ride company, every coaster club, and every other amusement-related organization with a website needs to have their target users test their site.

image

Here is my initial wireframe for the Forums section.  Part of a one-page layout, users would have seen this after the Events section.  The content seemed to stand out well enough at this stage of development.  But as other sections of the page evolved throughout my design process, this section got lost.  And that was a problem because The Coaster Crew is trying to increase their forum activity.

image

The original prototype gave the Forums section a similar white-on-orange color scheme to the Podcast section.  This provided good consistency through the one-page layout.  I was planning to add a background picture but had not yet decided which ride it should be.

image

I decided on Dominator at Kings Dominion for the background picture. Several years ago, the KDFansite forum merged with the Coaster Crew Network forums, where it became a board within the larger network’s forums. It’s still the most active part of the forums. The most active topic was the Intimidator 305 announcement, but I decided to use an I305 picture as the background for the mission statement. More users would see that in the one-page layout because that was almost prime real estate in that layout.

The background picture in this mockup was just a placeholder. I had taken it on the way out of Kings Dominion several years before I bought a professional camera, and it was an old Facebook upload. It did the job for a prototype even though I needed to make the picture bigger, but I wouldn’t use a background picture like this in a live site. Our first round of user testers saw the prototype with this background image.

image

By now, I had a much better picture of Dominator thanks to Nikki at KDFansite.  I darkened the picture slightly to make the section’s text easier to read.  I also decided to put the calls to action on their own row instead of in front of the picture.  Users did their second round of testing on this beta site.

image

Here’s the forums section at this stage in mobile width.

One of my questions for user testers in the first two rounds was, “Do we present good enough reasons to join the forums?” One positive thing they mentioned was actually the Register call to action. They didn’t want to see spam on the boards. But users also didn’t find the Forums section that eye-catching in this layout. By this stage, I had added icons in several other sections of the site. They found those sections drew their attention more.

image

Going to the next round of user testing to the third was a big leap. I added a panel for readability and icons to draw users’ eyes.

image

Some users in the last round of testing remarked that I had drawn attention to the wrong features of the forums.  The number of members and number of posts sounded more intimidating and tedious than helpful when it was placed in the top row.  I ended up moving those down and putting the visit tips and trip reports at the top on the live site.

image

The site looks very similar on a tablet.

image

Here is the row of calls to action on a tablet.

image

At mobile width, the page draws users’ attention toward viewing the forums before registering.  This width is the best for this flow of events.  Users now expect to be given concrete value before they register for a site.

image

When I was directed to split the site back into a multi-page layout, this created a new challenge because each section needed to be represented well on the homepage.  I opted for a shorter section of copy and just a few of the forums’ features to make it onto the homepage.

image

In the live site, the social media section appears right below the forums section to enhance the feeling of being part of a community of coaster fans.  Further up the page, users are given a list of events for real-life meetups.  The forums and social media sections encourage discussions at any time of the year, regardless of whether or not parks are open.  Actually, in my experience as a Coaster Crew forum moderator, forums get quite a lot of activity in the offseason too because members take the offseason to speculate on what will happen at the parks in the following season.

image

In the mobile width, I hide the icons on the homepage and try to just communicate the right things with the text. I didn’t want to go too far off of the desktop width for this because the mobile site and desktop site are the same site. The design both adapts to users’ devices and responds to their window size.

Thanks for reading about Coaster Crew’s new forums page. You can see it live here. The next article will detail a new signup flow I designed for the Coaster Crew site, which could not be delivered yet due to technical limitations. I’ll close the series with posts about the new Coaster Crew Network bar and the About page.

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.

We redesigned the homepage for In the Loop, the longest-running podcast for the amusement industry, now in its tenth season. This screenshot shows what this page looks like live.

You are In The Loop – with my UX design process for The Coaster Crew

image

Designing the new In the Loop homepage, at http://coastercrew.net/podcast/, gave me a great opportunity to try out and refine my user experience (UX) design process.

Coaster Crew’s old In the Loop page provided a podcast player and a place to chat when the show was live. Beyond that, it was pretty bare-bones. It didn’t really have a design per se. And for an audience of coaster enthusiasts, many would say that was enough.

However, as a designer, I am interested not only in the great features of a site but also the presentation. The site appeals to a different audience based on how it is designed. I decided to give this page the same design process as I gave all of the other sections of the site that I worked on (the only exception being the store, which is from a third-party vendor).

image

Here is my original list of ideas and idea selections for the new In the Loop page.  Most of these ideas made it into the final design.

image

I sketched two primary design concepts based on the ideas that I selected.  This first one was selected by the staff and refined through several rounds of usability testing.  The basic structure of the page is still intact today.

image

This was a more aggressive design concept which was not selected.  It would have lent a more retro feel to this section of the site.  The first idea allowed for better consistency with the rest of the site.

image

The sketches translated directly to the wireframe.  After testing the beta site on other devices, I would decide to make two changes to this layout.  I moved the Listen Live player below the summary of the show and converted the Our Guests and Archives sections from two narrow columns to one wider row with the guests listed first.

image image

When I colored in the prototype, the “cutout” look of the Meet the Hosts section became much more apparent.  So did the problems reading the black text on the orange background.  That would become even harder to read after the background image was added.

image

Then I added images to the prototype.  The hosts’ images would become circular during the development phase with CSS.  The ride in the background image is Dragon Fire at Canada’s Wonderland.  Joshua from CWFansite took this picture, which I edited so that it would fit with the orange background.  Fellow enthusiasts may point out to me that the train is in a corkscrew, not in a vertical loop.  That’s true, but the user testers didn’t have a problem with this.

The background for the About page actually does have a train in a vertical loop.  That image uses Great Bear at Hersheypark.  The Dragon Fire picture gave a stronger silhouette which I felt better communicated the nature of the show.

image

Here is the podcast section at mobile width after the second round of development and second round of usability testing.

image

The In the Loop page was the hardest page in the site for our user testers to read.  I added some translucent backgrounds behind the sections with text in this prototype.

image

By this time, I was also switching the site back to a multi-page layout.  I sketched some more ideas for the new homepage design and made a new wireframe of it to collect my ideas before moving forward with development again.

image

Here are the Events and Podcast sections on the live CoasterCrew.net homepage.  The merch section is below this.

image

Here is the Podcast section on the live CoasterCrew.net homepage at mobile width.  The site adapts to any device and window size.

image image

Tablets were the main reason why I changed the Guests and Archives sections to be part of the same column.

image image

The layout at desktop uses a wide layout grid and a fixed-position background to let the train in the loop stand out more.  I widened the Foundation framework’s maximum width to about 1600 pixels for this design.  In this screenshot, the browser window is maximized on a 1080p (1920×1080) display.

I hope you’ve enjoyed seeing how the new In the Loop site came to life.  The next article is already ready to launch soon, and it will show you how the Events page got built.  That page went through a lot of layout changes to get to where it is today.

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

UX Process in Action: From a Multi-Page Site to a One Page Site and Back Again

image

I recently launched the Coaster Crew site and explained how I came to understand its target audience.  Today, I will discuss the design of its homepage.

The site began as a multi-page site with separate pages for In the Loop, About, Events, and many more.  These screenshots will walk through my plan to turn this into a one-page site – and how I was able to change it back into a multi-page site, keeping many features of the one-page design.

image

The new Coaster Crew homepage differs significantly from any of their previous designs.  In the first sketches, I originally envisioned the new CoasterCrew.net as a single-page site. About, Podcast (In the Loop), Events, Forums, and the store would have been sections within this one page.

image

I conducted card sorting studies, where participants helped me determine the navigation menus for CoasterCrew.net and the fansites.  This also told me what I should include in each section of the one-page site.  The navigation menus’ links went to different parts of that one page.

image

Then I created a wireframe.  This had the layout and content of the site.  This first screenshot is the whole page zoomed out.  It’s hard to read the page at this distance, so here are some of the sections.  I will include more pictures of this in future articles about the individual pages.

The header of the site is largely the same as what you see on the site now.  The current site’s header just uses a full-width background image and has only one button.  I changed this later in the prototype.

image

Here is the first prototype with no images yet.  In the theme we decided on using later, the logo is on top of the background image and the background image is full-width.

image

This shows one of the segues between sections on the one long page.

image

This prototype had the logo and background image.  The top section in this screenshot looks a lot more like the homepage’s header today.  In development, I toyed around with putting the logo on the left and in the middle.  Ultimately, I decided to leave it in the middle.

image

Our first round of usability testing was on the aforementioned prototype.   I took the testers’ feedback into account on this first development version of the page.  This is a local version of the page rather than the actual WordPress site, so it only shows the page’s body.  I developed this using the 1180px grid.  Later, I switched to Foundation 4.3 because that framework was able to do more.

image

This shows the About to Podcast segue and a technical problem with WordPress that took me weeks to resolve.  Its auto-paragraph feature (wpautop, for those who know WordPress) was needed by our staff so that they wouldn’t have to know code to write content.  In the layout I was developing, this feature added a lot of unnecessary spacing in the layout.

Here’s how I fixed extra wpautop spacing in our theme (The One Pager by WooThemes).  This goes in the custom.css file.  #network-bar is one of my custom styles for this client’s site.

/* Removes empty paragraphs. */ p:empty { display: none; /* hides all truly empty paragraphs. Paragraphs with spaces will still show! */ }

/* Remove whitespace between sections by displaying only non-empty paragraphs in the entry */ .home p { display: none; }

#header p, #network-bar p, .home .entry div p:not(:empty) /* all non-empty paragraphs in a post/page, header, or network bar */ { display: block; /* default for p */ }

image image

That development version was deployed to a beta site for the second round of usability testing. Based on that feedback, parts of the prototype went back to the drawing board. The biggest changes were to our Events and Forums sections. These had a lot of content added to them in order to help the users of our site. Stay tuned for future posts about these two sections.

By now, several sections of the site had become quite long. Linking to different sections of the single-page site was not as straightforward either. So our staff requested that I convert the site back to a multi-page layout. This involved substantial rework in the homepage design, including new sketches and a lot of tinkering with the design in the browser with Firebug.

image

Moving back to a multi-page design takes more than copy and paste because, as a designer, I have to keep in mind the paths that users will take through the site. I have to make sure people will still visit all of the pages by making sure that the homepage gave a fair amount of space with them. I ultimately decided to shorten the sections of the one-page layout, link to the full pages, and add one more section for The Coaster Crew’s social media feeds. This screenshot shows the segue from the shortened Events section to the shortened Podcast section. On desktops, the sections feature fixed-position backgrounds.

I then did a third round of usability testing, incorporated nearly all of the feedback, and sent off the project for final launch prep. The site finished going live in early September.

image image image

This is how the top of the live homepage looks at desktop, tablet, and mobile widths. Any of these layouts can display on your computer depending on how wide your browser window is.

Stay tuned for the next article in this series. It will explain how my process enables Coaster Crew podcast listeners to stay In the Loop on the new site.

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.