UX Process in Action: Consistently pushing myself toward a better design
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:
Why should I be in a coaster club?
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.
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.
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.
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.
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.
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.
On mobile, the mission statement displays as one long, single column. The emphases on different phrases within the mission statement becomes more obvious.
Here is the original layout for the infographic, which was focused on the pictures.
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.
The layout changed slightly after I migrated it to Zurb Foundation 4.3's responsive grid system in development.
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.
Here is the call to action to join Coaster Crew at the bottom of the infographic.
The infographic displays like this on a mobile device.
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.
The original layout took on a zigzag pattern and provided space for other content such as images in the empty parts of the page.
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.
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.
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.
Per a tester's recommendation, I added dividers to distinguish between the levels of memberships.
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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
UX Process in Action: Navigating a network of 10 sites and counting
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.
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.
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.
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.
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.
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.
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.
The footer now features a panel with the Coaster Crew's mission statement.
The network bar currently takes almost exactly one screenful for a tablet in landscape orientation.
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.
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.
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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
UX Process in Action: The new Gospel Life Church of Bowie site on mobile devices in the wild
This is my eighth post in a series describing the design process of the new Gospel Life Church of Bowie site. Earlier posts described how the designs evolved on the church's homepage, Big Questions (introduction to Christianity) page, affirmation of faith, leadership page, ministries page, and membership articles. The most recent post explained the unique challenges and opportunities of redesigning a church website for a church which does not have a pastor.
Today, I will close the series with a series of screenshots of the live site on mobile devices.
The home page features a slider with a very long interval between slides. The slider is hidden on small mobile devices. More screenshots of the design process are on the Home article.
The Activities page has four sections. These screenshots show how the Bible Studies section adapts from a single-column mobile layout to a multi-column layout for tablets and desktops.
The Leadership page has separate sections for elders, deacons, and the church's pastoral search. These screenshots show how the Deacons section changes between the layouts. For more screenshots, see the Leadership article in this series (TODO: link).
Mobile devices give attention to the Big Questions page's lead paragraphs, which describe why the church is here and what it seeks to accomplish via its website. The single-column width looks similar across devices. For more screenshots, see the Big Questions article.
These screenshots depict how the full-width pictures of the ministries adapt across devices. The worship ministry, once the largest ministry in the church, has the largest picture on the Ministries page. The layout is one column on smartphones. For more screenshots, see the Ministries article in this series.
I am a user experience designer specializing in the amusement industry. However, I also design websites for non-profits, including churches and ministries. If you are from a like-minded church or ministry and are open to hiring a freelancer to create your website, please contact me. You may also like my company page on Facebook or follow me on Twitter.
UX Process in Action: Designing a new signup flow for a roller coaster club
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.
My original idea was to allow people to fill out their own membership badge. This would have been displayed next to completed membership badges. The Coaster Crew staff really liked this design idea, which would have required more development time than I could have given. (I worked on this project as a volunteer.)
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.
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.
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.
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.
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.
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.
The overall page used some copy which did more to highlight the benefits of membership in our club.
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.)
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.
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.
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.
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.
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.
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.
This confirmation page shows up when users submit their membership information.
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:
Multi-page,
Responsive to any device,
Able to calculate prices based on what users enter in previous steps, and
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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
This is my seventh post in a series describing the design process of the new Gospel Life Church of Bowie site. Earlier posts described how the designs evolved on the church's homepage, Big Questions (introduction to Christianity) page, affirmation of faith, leadership page, ministries page, and membership articles.
Today's article will explain the unique challenges and opportunities of redesigning a church website for a church which does not have a pastor. One of these opportunities was an exercise in designing the Senior Pastor Job Description for the church.
My website redesign effort for Gospel Life Church of Bowie began in summer 2012. The site only recently went live because of several substantial delays that kept me from working on the project. However, due to experience I acquired in the other projects I was doing in the meantime, I think the end result of the site is better for it.
Shortly after I began this project, the church's pastor announced his upcoming resignation. Many families left the church as a result, which has made the church's financial situation and pastoral search more difficult. Since Southern Baptist churches do not get their pastors assigned to them from the denomination, several other deacons and I volunteered to form a pastoral search committee. As deacons, we also needed to care for the other remaining members of the church. At the time, I was also prospecting for my first set of projects in my main target industry (amusement), the Coaster Crew redesigns, which have had me fully booked for much of this year. As a result, I did not work on the Gospel Life redesign for several months except while on vacation over the holidays.
After the new year, the four-person team I had been working with was reduced to two. One member of the team unexpectedly moved overseas, while another stopped working on the site due to increased diaconal and pastoral search responsibilities during the church's pastoral transition.
Gospel Life's transitional pastor started in the beginning of May. I am now a co-chair of the pastoral search committee as the church continues to search for a new senior pastor. After turning over the new site for Coaster Crew to go live in August, I had time to complete development on the Gospel Life site. Because I had also assumed development duties on the Coaster Crew sites (an unplanned responsibility with both clients), this development effort and WordPress migration went much faster.
After the pastoral search committee's job description for Senior Pastor was approved, I decided to post it on the website. This was not originally part of the project and was designed primarily through direct work in the browser. I thought this design would give a quite different way to present job descriptions from what I have typically seen on job posting sites. The "map" link on the church address gives our prospective candidates, many of whom are out of town, a way to conveniently see the exact location of our church.
I think of this type of page as a landing page. People looking for jobs typically land on job description pages from either an external jobs site or a search engine query for the type of position they want. The white background on the header allows the navigation to stand out from the main job description. This alerts users that they are on a larger site and can use the site to read more about the church.
As is typical for Zurb Foundation 4.3, the layout becomes compressed into one column on mobile devices. The section breakdowns, icons, and headers draw attention to each paragraph in the job description.
The tablet and desktop layouts allows us to put the basic qualifications of the job into a long column on the right and highlight the personal skills we require in short blurbs.
Most of the section headers are actually from the job description itself except for "Clarify, sustain, herald.", which repeats words in the section below it.
The call to action on this page displays a similar rotated panel to the Pastoral Search section on the Leadership page. It repeats some of the same resources and requirements from the Leadership page, under the assumption that most prospective candidates who look at this page have not also looked at the Leadership page before seeing the button for applying for the position.
This screenshot shows how each element of the job description works together to form one cohesive long landing page with a single call to action. The full footer allows prospective candidates to also explore other areas of the site and learn more about the church.
I am a user experience designer specializing in the amusement industry. However, I also design websites for non-profits, including churches and ministries. If you are from a like-minded church or ministry and are open to hiring a freelancer to create your website, please contact me. You may also follow me on Twitter.
UX shows 8 reasons why you should join this roller coaster forum
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.
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.
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.
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.
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.
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.
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.
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.
The site looks very similar on a tablet.
Here is the row of calls to action on a tablet.
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.
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.
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.
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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
This is my sixth post in a series describing the design process of the new Gospel Life Church of Bowie site. Earlier posts described how the designs evolved on the church's homepage, Big Questions (introduction to Christianity) page, affirmation of faith, leadership page, and ministries page.
Today, I will explain design decisions for the site's two pages on church membership, Join Our Church and Why Join a Local Church?.
The Join Our Church page has retained a very similar layout to its first wireframe, aside from the pictures being replaced by large icons. This first wireframe, created in Axure RP 6.5, was presented to the church at their annual members' meeting.
The church's bylaws permit members to join the church in four ways. I decided to make this a tab layout because most people in the church have only needed information on one of the ways of joining the church to apply to them. Other tabs remain available in case they did need to join the church a different way.
Next, I added colors, fonts, and icons to the prototype.
I changed the layout of the Ways to Join tab after realizing that it provided a more powerful grid for users to focus on.
The individual tabs kept the same layout from the first wireframe. To maintain consistency, they retained the same color schemes as their choices on the first tab.
The list of steps was broken out very easily for prospective members. Since the membership steps need to be done in person, the calls to action are links to send the church an email or read about the church leaders.
Development allowed me to add more CSS styles that the Axure prototype did not have, such as the letterpress effect on headers, which is seen throughout the site. This section of the site remained substantially identical to the wireframe, save for some fonts which needed to be switched out due to licensing. Zurb Foundation 4.3 also has larger line heights by default than Axure does.
The tab layout translated well into Foundation's tab functionality. The tab names moved to the top of each tab.
The live site is not using the tab layout due to difficulties in the WordPress migration. I wrote a short section of copy to communicate the same information.
The wireframe for the Why Join a Local Church? article initially looked like a very standard blog article. I had already written the copy based on the articles I found in the Related Resources section at the bottom of the page.
In the next iteration of the wireframe, I decided to emphasize the seven reasons that the article presented for joining a local church. The zigzag layout with staggered, large numbers and parentheses pointing toward the reasons made the design more memorable.
This was my first pass at adding colors and fonts to the prototype to this page.
Overall layout for the initial development version.
The mobile layout uses Foundation visibility classes to partially preserve the zigzag structure of the page while keeping all of the article's paragraphs aligned left for readability.
A Foundation panel provides a summary of how the church hopes readers will respond to the article. A link allows people to learn more about joining the church.
This is the mobile layout on the live site, after the WordPress migration.
The live tablet version preserves the desktop version's layout. If Foundation 4.3 had a separate breakpoint for tablet portrait and landscape layouts, I would have made the main content column wider on portrait for readability.
The live site on desktop preserves much of the Axure prototype's intention and reads like a poster.
I am a user experience designer specializing in the amusement industry. However, I also design websites for non-profits, including churches and ministries. If you are from a like-minded church or ministry and are open to hiring a freelancer to create your website, please contact me. You may also follow me on Twitter.
UX Process in Action: Evolution of a coaster club's events list in 17 screenshots
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
Here is the live site on desktop. When the 2014 events are populated, they will fill in three to a row, left to right.
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.
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.
Mobile users see what exclusive ride time is front and center before they are told about events that have it.
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.
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.
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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
UX Process in Action: Another take on one-page layouts
This is my fifth post in a series describing the design process of the new Gospel Life Church of Bowie site, which recently went live.
The first post described how the homepage design evolved into its layout today, while the second one addressed how the Big Questions page geared a part of the church's website toward non-Christians. The third one described how typographic tricks gave people a readable idea for an important document that few people find engaging to read: the church's statement of faith. The fourth post discussed the church's leadership page. Today's post will show my design process in action on the Ministries page.
The idea for the one-page layout for the Ministries page came during one of our team's initial brainstorming sessions. The Mars Hill Church ministries page uses a similar but simpler layout. We wanted to show pictures of the church's ministries and information about when they meet.
This screenshot was from my presentation to the church in their annual meeting. The navigation was initially expected to show the entire ministries submenu with the current menu option highlighted. Unfortunately, our site's WordPress theme does not provide that feature, which explains why the live site today does not show second-level menus.
As with the other pages, I added colors and pictures to the Axure prototype. Two ministries in this screenshot went away during the church's current transitional season.
This project allowed me to do some on-location photography. My camera, a Canon EOS 7D, did particularly well on this wide-angle picture of the kids. This screenshot was from a rework of the layout late in the project when I was close to going live but did not have copy for some of the ministries.
The live page uses responsive full-width images for each ministry. Each ministry's section is designed to stand out from the rest of the page and show some of the ministries' personalities.
The men's ministry layout is one of my favorites on this page because its photo is especially high-quality. It was taken at a special event, and I had to crop out some of the men giving each other bunny ears. The section background for this also provides strong consistency with the Pastoral Search section of the Leadership page, as well as the Senior Pastor Job Description page.
The page provides a call to action form to join or learn more about the ministries. This screenshot is from the original Axure prototype developed very early in the project. It uses a lot of the same design elements as the original contact form on my company site.
When I added colors and fonts to the prototype, I decided to tighten the column layout to focus on the form more and make the link to email the webmaster more clear. I also extended the Submit button.
The live Join a Ministry call to action has an icon above it for consistency with the rest of the site. I made the ministry options match the church's current list of ministries. After research into best practices for calls to action, I changed the "Submit" wording to "Send Message" to make the objective of the form more clear and more focused on the user.
Here is a development screenshot of the same call to action form in a mobile layout. This displays in a very similar way to how it appears on desktop.
The Ministries page takes a single-column layout in mobile width.
I am a user experience designer specializing in the amusement industry. However, I also design websites for non-profits, including churches and ministries. If you are from a like-minded church or ministry and are open to hiring a freelancer to create your website, please contact me. You should also follow me on Twitter.
You are In The Loop - with my UX design process for The Coaster Crew
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).
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.
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.
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.
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.
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.
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.
Here is the podcast section at mobile width after the second round of development and second round of usability testing.
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.
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.
Here are the Events and Podcast sections on the live CoasterCrew.net homepage. The merch section is below this.
Here is the Podcast section on the live CoasterCrew.net homepage at mobile width. The site adapts to any device and window size.
Tablets were the main reason why I changed the Guests and Archives sections to be part of the same column.
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 (1920x1080) 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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
A UX Challenge: Interesting, responsive leadership bios
This is my fourth post in a series describing how some of the unique design features of the new Gospel Life Church of Bowie site came together. The first post described how the homepage design evolved into its layout today, while the second one addressed how the Big Questions page geared a part of the church's website toward non-Christians. The third one described how typographic tricks gave people a readable idea for an important document that few people find engaging to read: the church's statement of faith.
This post will talk about how the site presents the church's leadership team. It will also discuss some cross-cultural ministry considerations that went into my design decisions for this page.
Originally, this page used a very conventional layout for leadership bios. I intended to have each of the church leaders write one paragraph about themselves. The layout was not as interesting as the current layout. The F-shaped reading pattern most users employ on websites meant that they would read a few people's names, see that many of the faces are Filipino, and assume that they must be Filipino to attend the church. For these reasons and for helping ensure that people actually read the bios, I decided to make the pictures not be one distinct column of the page.
At this point, I added copy and pictures. Jeku Arce, a friend of many of us in the Remnant ministry, came to Maryland to take professional headshots of most of our church leaders. The pictures confirmed to me that I should keep the zigzag layout. I wrote most of the bio copy; the rest was sent in by the church leaders.
This section needed to give prospective pastoral candidates information about our church and how to be considered. The staggered column layout helps users' eyes follow a zigzag pattern similar to the other sections of this page. During development, I would decide to use a dark background with reverse type on this section to clearly set it apart from the elders and deacons sections.
As with the other pages, I migrated the Axure prototype to Adobe Dreamweaver CS6, using HTML5 and CSS with Zurb Foundation 4.3. Some of the site's fonts changed due to licensing issues.
The second iteration of development saw some updates to the CSS styles. I also added more spacing between the bio rows to help readability. Circular images allowed us to take advantage of another current design trend. (I also later scaled up the bio image which was too small and removed its background.)
The live WordPress site shows the same layout for the desktop and tablet versions of this page.
To keep the headshots from dominating the page in a mobile layout, I put the headshots in small-4 small-centered divs in Foundation. This keeps users more focused on the content of the leaders' bios.
Reverse type on a dark background allowed for the pastoral search section to have a quite different look from the rest of the page. CSS rotations on the To Be Considered panel allowed this panel to pop from the rest of the page and show prospective candidates what they needed to do to get in touch with us.
I am a user experience designer specializing in the amusement industry. However, I also design websites for non-profits, including churches and ministries. If you are from a like-minded church or ministry and are open to hiring a freelancer to create your website, please contact me. You may also follow me on Twitter.
UX Process in Action: From a Multi-Page Site to a One Page Site and Back Again
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.
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.
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.
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.
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.
This shows one of the segues between sections on the one long page.
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.
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.
>
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 */
}
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.
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.
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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
A UX Challenge: Helping people read a complex, yet important, document on the web
This is my third post in a series describing how some of the unique design features of the new Gospel Life Church of Bowie site came together. The first post described how the homepage design evolved from initial user surveys to its layout today, while the second one addressed how the Big Questions page geared a part of the church's website toward non-Christians.
Today, I will walk through the most challenging and most interesting design problem in this project. The Big Questions post earlier mentioned that hardly anyone reads long sections of text on websites. But one section of the Gospel Life site had to have a lot of text - important text.
Like many other churches and organizations, Gospel Life Church of Bowie has a membership covenant, a constitution, and bylaws. All prospective and actual members of the church see these documents, and new members need to sign the membership covenant. Since the constitution describes what the church believes, the website now makes the section of the constitution which describes those beliefs available online.
Many churches simply make their beliefs available online without any special formatting. These pages, which are quite important to read, rarely get read because they are not designed. Contrasting them with the homepage is like contrasting a backstage area of a theater (purely functional) with the eye-catching presentations on the stage that make people want to have a nice night out at the theater.
I began from a similar starting point to what I had seen on other church sites. The prototype I presented in the church's annual meeting was very raw. The Beliefs section was one of three sections on its page, which all looked relatively similar.
I began laying out the Beliefs section, enlarging key phrases within the text to make it easier to remember. Quickly, I detected a pattern in the organization of this document. The Affirmation of Our Faith section had twelve subsections. This divided neatly into two sections (The Word of God and The Trinity), three sections (God the Father, Jesus Christ, The Holy Spirit), one long section (regeneration), and six sections (regarding the local church, Christian living, and eschatology). I arranged these sections into a cross in Axure. However, it did not really look like a cross yet. There was more work to do.
I began to color in the prototype. Icons (part of a custom icon set I developed from several others at IcoMoon) and ribbons proved useful in setting the Foundation, Goals, and Priorities sections apart.
Long announcements in church Facebook groups often have a "TL: DR?" (too long; didn't read?) summary at the bottom. Realizing that the affirmation of our faith might be too much text for people to bother reading, I added this header to point people to the Big Questions videos.
Manipulating the alignment and text colors of each section within the Affirmation of Our Faith allowed me to start seeing the cross taking shape. The checkmark icon moved above the ribbon later for consistency with other parts of the site.
Zooming out, the cross shape started to become more apparent. Later, I changed the non-cross text colors again so that the cross shape would stand out more.
During a pastoral search committee meeting, I found our church's vision and mission statements from the previous version of our site, which had gone offline due to an expired hosting plan from a previous host. During development, I added the vision and mission sections above the foundation, goals, and priorities.
During the CSS editing, I modified the text colors to bring out the cross shape more but keep the other text readable. The Jesus Christ header took on a different set of CSS styles to make the list of beliefs appear more Christ-centered. The misalignment of some headers was fixed during the WordPress migration.
A challenge of maintaining the cross shape is ensuring that the right words stay on the right rows to keep the colors consistent. In a tablet width, this becomes much harder. Using Foundation 4.3, I created a separate layout for the document in Axure. The layout in this screenshot did not turn out to be final. The Scripture references were removed from the tablet and mobile versions of the site, which display a link to a page that does have them.
This shows how the cross layout degrades on a mobile screen. Scripture references were later removed from the mobile site.
The live site as it displays the cross section in the mobile layout.
The tablet version of the site retains some of the basic layout of the page but does not have the cross shape. It does have a call to action around the Regeneration section for visiting Big Questions. This did not really fit with the cross shape.
This section of the page was originally supposed to have an artistic background showing the typographic cross on a hill. The artist who had been working with us on the site unexpectedly moved overseas during the project and was not able to complete it. Using CSS styling, I made this section of the page look like a hill. The "Christian conduct" header shows as the bottom of the cross on the desktop version.
The Foundation, Goals, and Priorities sections stay intact on the mobile version of the site.
The cross typography degrades into this mobile layout for mobile screens.
The top of the beliefs section currently looks like this on the live site.
When desktop users resize their windows from the tablet layout to the desktop layout, the typography rearranges itself into the cross shape, which now looks like this.
I am a user experience designer specializing in the amusement industry. However, I also design websites for non-profits, including churches and ministries. If you are from a like-minded church or ministry and are open to hiring a freelancer to create your website, please contact me. You may also follow me on Twitter.
The 5 kinds of people who would visit a coaster club's website - and what I learned about them
Last week, I started a new series of articles about The Coaster Crew's new site. So that I can expand my design portfolio, The Coaster Crew has graciously allowed me to redesign all of their sites. The new Coaster Crew site, which recently went live, follows the new Coaster Crew Network Portal site.
Many people who aren't familiar with my exact field would read all of this and think, "He redesigns websites. He is trying to build a design portfolio. He must be a web designer."
Not quite.
I am a user experience designer.
User experience (UX) includes a lot more than just web design. In effect, in a UX project like this one, I am dealing with affecting how you feel about the Coaster Crew and how you feel about the fansites. UX designers use established methods. This is to make sure that their sites are meeting the needs of their users. These needs include being able to find what you are looking for easily, having a pleasant experience browsing the sites, and wanting to come back to this community of people who love the same parks that you do.
As a field of work, UX involves a lot. UX designers come into the UX field from graphic design, human factors engineering, computer science, marketing, and many other fields. My background is in computer science. I was a software developer before becoming a full-time freelancer in UX.
UX also has a lot of sub-fields within it. Most commonly, people would divide UX into information architecture, interaction design, human-computer interaction, and visual design. In other words, as a UX designer I deal with how websites and pages are arranged (IA), how you interact with the site (IxD and HCI), and how it looks (visual design). Many people also say that industrial design (for example, design of iPhones and iPads), sound design, copywriting, sound and video production, and architecture of buildings play a role in user experience too.
Today, I will describe how I used some common interaction design practices, surveys and personas, to help the Coaster Crew sites reach out to a broader audience.
The Coaster Crew sites have long done a great job reaching out to coaster fanatics: people who ride coasters anytime they can, who know a dive loop from an Immelmann and a B&M from an Intamin. However, not very many park visitors are this crazy about coasters. Most people who go to parks love coasters and/or the other great experiences that amusement parks provide. But they don't often know the makes, the models, the engineering behind all these great rides, or the terms that coaster enthusiasts use a lot. Reaching out to the general public more would give Coaster Crew a much larger base of park fans to join the club, invite to their events, and contribute to their sites.
So I began this redesign project a different way. Instead of jumping right in to writing code or sketching new designs, I began by trying to understand the people that we are trying to attract to the site. My premise, which seems to have held up so far, is that coaster enthusiasts would still be served well even if the sites were designed for the general public as top priority.
I took surveys and began to understand the average park visitor, not from just my general observations at parks (which helped), but from real data - from them. Here are a few of the questions I asked in the survey:
How often do you visit amusement parks?
If you were to visit an amusement park's fansite, what would you want to find out while you're there?
What frustrates you the most at parks, fansites, and forums?
What do you think of the current fansites?
Based on the whole survey, I came up with personas. Personas stand in for users throughout the rest of the design process. They are based on what designers find out in surveys, interviews, and contextual inquiries (watching people use their computers, tablets, and phones in the real world). But they're not an average. No one has exactly 2.1 kids or visits parks exactly 3.5 times a year.
So our personas included these people:
A coaster enthusiast who visits a lot of parks and rides coasters quite frequently
A young coaster enthusiast who is quickly learning a lot about coasters but doesn't have as much budget or opportunity for visiting parks out of town
A young adult general public visitor who loves coasters but only visits parks once or twice a year
A general public mother of two young children who doesn't ride coasters but is interested in learning about fun things she and her kids can do together.
A mid-level manager at a theme park (we did not include them in our surveys)
I designed the fansites with Karen (4th column) as the primary persona since she is more interested in family activities at parks. She wouldn't be served well by a fansite that only talks about roller coasters. Javier (3rd column) is the primary persona for the Coaster Crew site since he is more interested in coasters and Coaster Crew keeps coasters front and center in their activities.Here are a few highlights of what we found in our surveys:
Long lines were the top frustration for both enthusiasts and the general public, but a much bigger problem for the general public. I think this is because coaster enthusiasts tend to visit parks more often at off-peak times. The next-biggest frustrations for general public guests were costs and crowds. Coaster enthusiasts were more frustrated by a lack of appealing food options and ride closures.
The general public's biggest frustration with fansites was that it was too hard to find what they were looking for on the site. Coaster enthusiasts overwhelmingly reported that a lack of recent updates is their biggest frustration. More general public respondents than coaster enthusiasts reported that they were frustrated with fansites' professionalism and look and feel.
On fansite forums, coaster enthusiasts' biggest frustration was that discussions go off topic. The general public's biggest frustrations were 1) "I can't post as a guest" and 2) "Rude/annoying people".
Both enthusiasts and general public visit fansites mainly to learn more about a park's rides. Among other goals, coaster enthusiasts were most interested in special events, food at the park, and construction updates. General public were most interested in construction updates, special events, and visit tips.
None of the general public respondents I polled have ever been a member of a coaster club, and only 1 of more than 60 had heard of Coaster Crew before the survey. Just over a third of the enthusiasts I polled had been in a coaster club, and over half had heard of Coaster Crew.
Coaster enthusiasts liked the existing design more. They gave it higher marks in visual appeal, layout, and findability (the ability to find information they are looking for easily).
Since many people reported that they hate long lines, the new Coaster Crew site reports in plain view that our group usually has at least one ride to ourselves during our Exclusive Ride Time (ERT) sessions. Many people who tested the new Coaster Crew site noticed this and had very positive feedback.
The mobile site brings Exclusive Ride Time and behind the scenes tours even more to the forefront.
Right after the list of event perks, we give an invitation to our next event and a list of more future events. Many events list ERT as one of their perks, so this combination goes very well.
In later articles, I'll explain how several of the pages in the new CoasterCrew.net design came to be. I'll begin with the homepage design, which is a radical departure from their previous 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. I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
An entry point: The UX design story of Big Questions
The next several posts about the Gospel Life Church of Bowie site, which recently went live, will detail how my design process has played out in individual pages of the site. The first post addressed how their new homepage took shape. This post will address the Big Questions section of the site.
Our team got the idea for the Big Questions section from the website for Mars Hill Church, pastored by Mark Driscoll. That church's site has been featured in many blog articles showcasing the best church website designs, and several aspects of that site played into our design of this site.
The section titles came from a list of questions that our personas would have asked us given the chance. An early navigation idea, which we scrapped based on simplicity and "Don't Make Me Think" concerns, was to use question keywords for the titles of each page. Leader bios would be under a page called Who, Big Questions would have been under a page called Why, and so on. The "Big Questions" title was suggested by one of our card sort participants.
Initially, we anticipated writing a great deal of copy for this page. When our church became pastorless, two members of our four-member team had to stop working on the website to attend to other ministries in the church. I assumed copy and development duties for the entire site and wrote a shorter section of copy for this page. This worked out well because people don't like to read long sections of text on the web. Gospel Life's services also used to frequently employ sermon jam videos and occasionally still do.
I then found and embedded videos that directly or indirectly answer each of our Big Questions. Although each video is from a different preacher, the videos' ordering is very intentional, going from a big view of God's sovereign lordship over all to a more personal view of how He cares for His children, then to two videos explaining what God does for us in the gospel and two more videos explaining how we are to respond. I added a contact call to action panel at the bottom of the page that allows people to request more information.
Because the content on this page is very important, I treated the copy like a lead paragraph. I increased its line height and font size and made its column narrower to draw more attention to the copy. On mobile, this meant that users only see the lead paragraphs before scrolling down to the videos. Red header text and icons provided consistency with the other section headers around our site and broke up the long stream of videos into clearly defined sections.
The single-column layout and responsive videos translated quite well to mobile.
I am a user experience designer specializing in the amusement industry. However, I also design websites for non-profits, including churches and ministries. If you are from a like-minded church or ministry and are open to hiring a freelancer to create your website, please contact me. You may also follow me on Twitter.
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.
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.
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.
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.
After that, I created wireframes for each page. This was an early idea for what is now the header on the homepage.
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.
After a second round of user testing on a beta site, I created a final prototype. This Forums section is from that prototype.
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.
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.
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.
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.
I mixed different font weights throughout the new Coaster Crew site design. This is the event list at mobile width.
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.
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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
