Redesign: Academic Senate Website

academic-senate-oldacademic-senate-new

We recently launched a redesign of the Academic Senate website.

The previous site was a framed website and managed by hand. Since the site isn’t overly complex that workflow was efficient for a long time. There were a few barriers to that approach, though, and the Academic Senate came to us for help with a solution.

What we came up with is a fully responsive website managed through the university’s central CMS and automatically pulls in data from across campus. A few key features of the new site include:

Built on Foundation 5

As we evolve our responsive approach we have settled on Zurb’s Foundation framework. It is light weight, flexible and allows us to extend it where needed without having it feel like a “Bootstrap” site.

Membership lists using CMS profiles

A big part of the Academic Senate website is broken down into committees and related information. Since the membership of these committees changes over time, and people can be on multiple committees, managing this information can be cumbersome. We transitioned each member into the “profiles” area of the CMS where they can be associated with multiple committees if needed and the information can be managed by the people themselves or by the Academic Senate staff with just a Web browser. They can be updated once and published across the site.

Profile images and content pulling from existing sites

Almost all Academic Senate members already have existing profiles on their school/college/department websites. We didn’t want to duplicate this information so we pull their existing profile information to reduce redundancy. When the member updates their profile, it will automatically update on the Academic Senate website.

Under the hood

A few things you won’t notice is we are standardizing our build process with new sites. We have a Yeoman site generator that we use as a base for each project. Next, we’re using Grunt (soon to use Gulp) as our “build” step to check and compile all assets into their appropriate folders. This not only reduces the initial project build time but also separates source files from their rendered machine optimized results. On that same spirit we have begun to deploy sites in a standard way to speed up the process and reduce the possibility for mistakes.

View the new Academic Senate website at: http://academicsenate.wayne.edu/

Refresh Road Trip: Keep The Mobile Web Quick & Better Design with Reusable HTML & CSS – July 25, 2013

RSVPWhen: Thursday, July 25, 2013 at 6:30 PM

Where: The Qube 635 Woodward Ave., Detroit, MI

Cost: Free

Speed by Design – Keep The Mobile Web Quick

As attention spans are heading towards zero and more and more of the population is constantly on-the-go, optimizing your mobile websites to load quickly and efficiently can make an enormous difference in visitor engagement, and most importantly, your bottom-line. Designing for performance should be a top-priority in keeping your visitors happy and allowing them do what they need to do quickly.

You’ll learn a few techniques on how to keep your mobile websites lean and loading quickly, how page speed is actually a component of good UX, how to test and benchmark under various network conditions, and how slow loading times can turn away visitors and potential paying customers.

About Jon Buda

Jon Buda is web developer who loves to design, or a designer who loves to code – depending on the day. He enjoys solving problems holistically, thinking about back-end, front-end, and design all as equally important parts in crafting great experiences. He helps to organize Refresh Chicago and is currently working with Table XI.

Front End Legos – Better Design with Reusable HTML & CSS

There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.

In this session, Shay will cover some best practices and performance tips for writing the highest quality HTML and CSS possible, and how it benefits your design. Writing code is the easy part, finding a modular practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice today.

About Shay Howe

As a designer and front end developer, Shay Howe has a passion for solving problems while building creative and intuitive applications. Shay specializes in product design and interface development, specialties in which he regularly writes and speaks about. Additionally, Shay helps co-organize Chicago Camps, Refresh Chicago, and UX Happy Hour. You can catch up with him on Twitter as @shayhowe or on his website at http://shayhowe.com/.

RSVP

College of Engineering website – then and now

Seth Godin recently posted about “Just the good parts“, a trap I think that all too many of us fall in to. The Web is no exception here, it’s great to have an amazing website, but it isn’t something you can make appear overnight or pay a company to produce for you. The quality of your website is a direct reflection of how much time and energy you put into it.

“The very thing you’re seeking only exists because of the whole. We can’t deny the difficult parts, we have no choice but to embrace them.”
~ Seth Godin

Two things happened a few weeks ago that talk to this point directly. The first was that we launched the last of 10 College of Engineering departmental and programs websites as an overall restructure of the College of Engineering Web presence. Secondly, their Associate Director of Marketing and Communications, Kristin Copenhaversent out this email to sum up the recent changes to the marketing of the college. The message was great to bring to light some of the great things available to the college but it intended to be brief. It didn’t get into the details about the process and hard work leading up to what seems like logical pieces of the Web.

College of Engineering “then”

College of Engineering “now”

More than skin deep

Looking at the screenshots above you can tell we made a dramatic change in the visual appearance across every engineering website. Before, every department was able to create their own interpretation of what it means to be part of Wayne State University. In theory, this seemed to work great for individual departments because they had the ability to create highly crafted messages. In reality, the Web was not something in which they specialized. The limited department resources were focused on their research, teaching, and education; the website was often the last thing addressed. This isn’t unique to engineering; it is something we see across our campus and across the entire Web.

Dean Farshad Fotouhi identified this situation, allocated funds and hired an Associate Director of Marketing and Communications to work closely with our team to create solutions that worked for each department and the college as a whole. It came down to every engineering department having a cohesive yet unique look, voice and set of values represented online to ensure consistency and success for prospective and current students.

Insightful statistics

The project overall took on a life of its own but we broke it down in to multiple parts and stages, and had a very consistent routine to starting, migrating and launching every department, alumni, student organization, and other websites, to ensure its success.

This is just a sample of what went into the project as a whole (this doesn’t include daily maintenance and post launch updates):

  • Project Scope: 39 websites, 8 email newsletters, 12 email templates, multiple digital signage templates, internal tools, and more
  • 550+ Web Communications staff hours
  • 45+ hours of meetings with College of Engineering
  • 2 homepage revisions after initial launch
  • 1,700 pages on the new site (compared to 5,000+ on the previous)
  • 75 unique “templates” across the entire website
  • 8 new tools created in the CMS to accomplish goals that are now available to everyone
  • 30,000+ of Web visitors per month
  • 50,000+ email interactions

Below is some insight into where the 550+ hours of Web Communications staff time was spent. The bulk was spent on transitioning content, this is moving the content from the old website into the new. I want to clarify this is not just a copy-and-paste task. It means evaluating and editing every single page, ensuring it’s up to date and possibly splitting it up, removing it, or combining it with other areas across the entire website. This takes dedicated time between the college and Web Communications. We talked daily with Kristin and met every Friday to track progress, ask questions and create a plan for us during the next week. These meetings were grueling but this is exactly a direct reflection of the focused time spent that resulted in a successful website. Simply put, without the talent from the college putting in the hard work, this website redesign would never have been a success.

Time spent - Engineering

Tools that make a communication strategy work

  • College website
  • Departmental websites
  • The ability to share news/events/promotions between them all with a click
  • Faculty Profiles with In the News, Publications, Books, etc.
  • Spotlight on Faculty, Students, Alumni
  • College HTML email template
  • College email newsletter
  • Departmental email newsletters
  • Faculty experts list
  • Social media with support behind the content
  • An analytics package focused on objectives and goals
  • A key employee focused on doing the hard work it takes to bring an entire college together to speak in a single voice to the public

Overview of the Engineering Web content workflow

engineering content workflow

View the new College of Engineering website at http://engineering.wayne.edu/ 

The trouble with OS X LCD Font Smoothing and webkit

I recently spent sometime working on a responsive header using foundation 4 and was in the process of testing it on other machines around our office. I noticed on a co-workers machine that the fonts looked a lot different than on my machine. I was puzzled as to why this was occurring.

My browser vs. Co-workers

Screen Shot 2013-04-05 at 9.45.40 AM

Screen Shot 2013-04-05 at 9.46.10 AM

We are both using Mountain Lion and Chrome in this example. As you can see the fonts look thicker and bolder on my co-workers machine. I did some investigation and found an option under Mountain Lion’s general system preferences called “Use LCD font smoothing when available”. On my machine this was unchecked. It looks like on newer machines this is checked by default. If you uncheck this option and relaunch your browser (Chrome in this case) you’ll notice the thicker and bolder fonts go away.

Screen Shot 2013-04-05 at 9.56.10 AM

We wanted to find a solution to normalize this on the web because we preferred the way it looked without font smoothing enabled. We found that if you apply this to your websites it fixes the problem. Please note that this only works in webkit browsers. We have not found any other vendor prefixes that accomplish this.

body {
     -webkit-font-smoothing: antialiased;
}

Redesign: Office of Student Financial Aid

Previous Financial Aid HomepageNew Financial Aid Homepage

This week we launched a redesigned Office of Student Financial Aid website. The previous (left) and new site (right) are pictured above.

Not only was the website due for a redesign but it also marks the end of a milestone for the work that we produce. This site will be the last non-responsive major department website that was in our pipeline. From here on out we will be designing and implementing for mobile first and responsive.

Information Architecture

Like most of our redesigns the push came from the overgrowth of the original scope of the navigation. Users can deal with “old” looking visuals, but as soon as the website is hard to find crucial information, it’s time for an overhaul. Our first task was to reign in the thirteen item main menu to just six. This helped the visitor scan and find a direction quickly.

We then took to overhauling the architecture of the information on the homepage. The previous website had information where it didn’t belong. New programs, deadlines and priorities cluttered the previous homepage. We set out to compartmentalize information in easy to scan columns that could expand if needed in the future.

Visuals

The structure of the page content was not the worst we have seen, but there were a lot of areas that needed improvement. For example, the new information chunking on the homepage gave us the ability to visually separate different information and allow for areas to grow in the future. For example the promotion buttons below the menu can expand or contract depending on the time of the year. The main image can be clickable if needed and each column can have more or less resources as needed.

On the child pages we highlighted the selected menu area to make it stand out. Since we only have six main menu items, the secondary menu list is a little larger than normal. We didn’t want to remove the other main menu items so we could keep the context but at the same time we didn’t want the local menu items to get lost. We also added a “Related Links” right side menu to each page. This allows the Financial Aid department to pull specific resources to the top even if they are linked from the content area.

View the new Office of Student Financial Aid website at http://finaid.wayne.edu/

So you want an HTML newsletter?

The types of projects our department takes on seem to go in waves. A bit of a history lesson takes us back to an abundance of websites which pushed us to build the CMS. The many events that followed gave us the idea to write and centralize them all in to a university events calendar. Then came the RSVP’s for those events. We got fed up creating hundreds of forms so we wrote an RSVP system for the events calendar. After that the campus community could maintain their own websites, and create events and RSVP’s by themselves. They then asked us to create pretty HTML emails to announce all of these components and we did that for a while before crafting the self- serve HTML email creator.

Everything goes digital

Now we are on the age of transitioning traditional print newsletters to digital pieces. These are a little more complex than the standard email and sometimes connect to a broader website with more information. In the last four months we have literally transitioned more than ten complete print publications to online editions. I would love to say that in those four months we created a self-service system for the entire campus to create and maintain publications, but I can’t. They all seem to have some unique factor that required individual attention.

Multiple flavors

Requesting a new HTML newsletter can result in a 2 hour or up to a 40 hour project. It’s important to know what you need before starting the process. Let’s walk through the process of the newsletter request and I hope I’ll be able to shed some light on the reason for the complexity.

Simple single column email

The most basic email is just a single column with a single message and any action items go off to existing websites. The types of emails have a custom header that identifies your department or group and is reusable at your leisure.

Here are a few examples of single column emails we have done:

Multiple column email

Typically a multiple column email is required when there is a single message that needs to be communicated and the content warrants “action items” on the side. These can be: upcoming deadlines, buttons for next steps or just “for your information.” They’re a little more complex but offer some flexibility to highlight multiple items “above the fold”. (BTW, there is no fold on the Web.)

Here are a few examples of multiple column emails we have done:

Multiple column newsletter

Using the same format as the multiple column email the newsletter takes it one step further and keeps a consistent format but with categories and articles feeding in to compile a complete email. Typically the format is set up and each month/semester/year a new “publication” is created which consists of article titles, teaser descriptions and links off to more information.

If the links for each article go to existing stories already published on the Web it gets the user to interact with multiple areas of your website and possibly explore things they otherwise wouldn’t have without being prompted by the email.

Here are a few examples of multiple column newsletters we have done:

Newsletter Web page

Lastly the most complex and time consuming is the HTML newsletter that has a stand alone website which features the full text of each article and is organized like a newsletter with editions and archives. This approach is really driven by the print mentality of compiling an entire edition of articles and publishing the entire thing at once. It wraps up the email and website into a single package for the user to experience. One of the downsides, just like a printed newsletter/magazine is once the user receives it and browses through, they typically recycle it or close the window and never come back. Their only reason to come back in the future is when their next email comes in. It isn’t “sticky” and doesn’t build continuous engagement, but in the end it’s what most traditional writers are comfortable with.

Here are a few example of newsletter websites that we have done:

Thinking about requesting an HTML email?

Make sure you have thought through how you want it to work and be prepared to answer some tough questions by our team. Just because “email is free”, aka you don’t have to pay postage, it doesn’t mean that your audience will engage the same way they have in the past.

A look back: 2011 conferences

Last year I was fortunate enough to attend two conferences. The first, Internet User Experience (IUE), was in October on the campus of Washtenaw Community College in Ann Arbor, Mich. The other, Usability Week through Nielsen Norman group (NN/g), was in December in Las Vegas. Both conferences had caliber in the information presented.

Internet User Experience (IUE)

At IUE, I was introduced to the Agile work environment. This environment was based on an Agile Software Development methodology where projects are broken into smaller and shorter deliverable phases with the initial product meeting the core needs of the client. I attended sessions such as Connecting with Customers: User Generated Content, Mosh Pit Memoirs: Lessons and Insights on Creative Collaboration, The Top 10 Things Every Designer Needs to Know About People, and Better User Requirements Through Story Mapping. My ultimate favorite session, though, was Hold the Sprinkles! Cupcake, Layers and Agile UX Design.

This session summarized the Agile method but applied it to design. The presentation was creative and very thought-out as Carissa Demetris created the parallelism in the process of designing to making a cupcake. Every project has base requirements just like a cupcake has cake as its base. The next layer in a project use enhancements like a cupcake uses frosting,  followed by embellishments which would be the sprinkles. How does this approach apply in real projects? An example would be designing a basic login page – our cupcake. The frosting/enhancement for this project would be adding a radio button to remember the user or having a “Forgot password” link. The sprinkles/embellishment would be adding a Facebook login area. Carissa mentioned that most of the time, the need for “sprinkles” comes from the business owners, marketing dept. or someone other than the user. For the most part, these are wish-list items of the higher-ups who project their perception of what their users need. These embellishments don’t add to user experience or the goal, however.

In an Agile environment, the first iteration would be developing the login. If the budget and time hasn’t run out, there’s an opportunity to add the enhancement feature to either remember the user or have a “Forgot password” link. We now have our first iteration that meets our client’s core needs/goals while staying on budget and time. From experience, some of the projects I work on where “sprinkles” are elevated much higher than what they should be, cause delay, add more work and return little value. Carissa concluded with the mantra, “Embrace the cake, frost with care (to add the user experience), and hold the sprinkles.”

Nielson Norman group (NN/g) Usability Week

The NN/g in Vegas was a bit different from a handful of mini-sessions throughout the day like at most conferences. There, one session went for the entire day. The topics covered by the NN/g’s Usability Week ranged from writing for the Web, application design, Web usability guidelines, information architecture principles, mobile Web, and understanding how the human mind works when using the Web. I was blessed enough to have attended two days out of the seven. My goals coming into the conference were to understand our campus community’s thought processes and behavior and to know what tools to use to harvest data to build better websites. Based on that, the sessions I attended were “Web Design Lessons from Social Psychology” presented by John Boyd and “Research Beyond User Testing” presented by Christian Rohrer. I fully enjoyed both sessions but learning to understand behaviors and finding out how they can be manipulated made the Social Psychology session a personal favorite.

Dr. Boyd’s session was almost like a Social Psychology 101 course that talked about research and lab findings. I was amazed at how these findings are relevant on the Web today. Some really cool research was about learning, decision making and personal expectations.

Lets take “Learned Helplessness” which is when a person  feels powerless due to constant failure and  withdraws effort. When applied to websites, users start believing the effort they put in is useless, especially when trying to navigate a busy site or one that is too difficult to navigate through. The user’s multiple failed attempt to figure out the site will transmit as feelings of powerlessness and they eventually stop trying. This is when we see visitors leave a Web page and possibly never come back. However, if the user does figure out a way to navigate through a busy and difficult site in an unconventional way, the user has or will develop a “superstitious” behavior. This is when the user thinks if she clicks here, then there, then it will eventually work. As Web designers, we don’t want users to develop superstition or the feeling of helplessness. Knowing that these kinds of behaviors are real, website designs should have appropriate signals, architecture and organization in place per site.

Another cool study was on choice. The truth is, there is such a thing as too many choices. Users do not like being in a situation where there’s multiple options and vary minutely or are difficult to distinguish. Most users tend to walk away while some sophisticated choosers are willing to take the time to think about the choices. How does this apply on the Web? Perhaps on a shopping website featuring a slew of products under multiple categories right on the homepage. The sophisticated chooser will more likely check out the multiple categories while most people will leave the site. This behavior is best illustrated in the Jam Test done by Sheena Iyengar and Mark Lepper (see video below).

With so much information, I’m itching to put all of this knowledge to work! I can’t say enough how eternally grateful I am for the opportunities I have to grow professionally.

Some future conferences I have my eye on are:

A little extra:

Here’s a video from HFI that mentions Sheena I & Lepper’s Jam Study.

Flipboard app for iPhone = Social Media Swiss Army knife

FlipboardFirst, I want to say that I’ve have been using the Flipboard app for the iPad for some time now and love it. I was anticipating Flipboard coming to the iPhone and was very excited when it launched in early December of 2011. I have been using it exclusively for a month and must say it meets all my expectations of an “all in one” social media feeder.

Some of the social media apps and online tools it integrates with are: Facebook, Twitter, Flickr, Instagram, Google Reader (RSS), LinkedIn and Tumblr.  It’s very intuitive to use with your thumb, flipping through all my connected accounts, with easy export options to share any article your perusing, to your own social accounts.

The nice thing Flipboard does is bring a visual aspect to your social media channels. For instance on Twitter, it not only brings in the tweet, but the image, webpage or video that it is associated with so you can visually scan what the tweet is about.  I also love that it brings in my google reader feed or any blog exclusively, with a quick search.

What Flipboard isn’t for: This isn’t a business tool for someone that has 10 twitter accounts and wants to do mass sending, scheduling and searching for keywords. Although you can tweet, post to Facebook, Tumblr and LinkedIn from within Flipboard, which is a nice feature for the personal user like me.

If you haven’t downloaded it on your IOS device yet, I highly recommend you do so. It’s a timesaver, beautifully made and its free! Check it out: http://flipboard.com/

Future of Web Design – Responsive Web Design

I just recently went to Future of Web Design (FOWD)  in New York City for an amazing web conference. Besides the amazing speakers, friendly atmosphere and cool city life, the conference had a reoccurring theme: Responsive Web Design.

Now “Responsive Web Design” is by no means a new concept, but it has speedily becoming a web design standard.

Here are the basic premises behind the idea to achieve Responsive Web Design:

  • Design must be flexible to the users behavior and environment
  • Use flexible grids and layouts
  • Use flexible images that will adjust to each view
  • Use smart CSS media queries to adjust to the users resolution size
  • Just one URL, no more, m.mobilesite.com


Food Sense Example

Responsive Web Design - Foodsense

This is a great example of Responsive Web Design – http://foodsense.is/.
To see this in action open the link on a desktop browser and slowly drag the browser window size smaller. You will see the layout elements adjust on the page to the new width.

Other great of examples of Responsive Web Design:
http://thinkvitamin.com/
http://bostonglobe.com
http://earthhour.fr/

As web design and development evolves into the future, with multiple devices such as smaller laptops, tablets and smartphones, Responsive Web Design seems to be the best solution for the moment.  We can no longer just design for a couple of devices, we must accept that the amount of devices and resolutions are going up dramatically. I will leave you with one of my favorite quotes from the conference:

“If its not responsive design, its not web design” – Andy Clarke


Good Resources on this topic:
http://www.abookapart.com/products/responsive-web-design
http://www.alistapart.com/articles/responsive-web-design/

 

Campus tour check-in form design process

Almost every day we have a flood of prospective students visit our Welcome Center ready to explore campus. Some of these students have signed up for a tour on our website, while others just drop in and decide that today is a great day to see campus. We are excited to show off our beautiful campus to anyone who is interested, so we don’t turn anyone away.

Our department is in charge of the Web experience for these prospective students and that has been working great. Campus tour signups have increased quite a bit because of our efforts. The arrival experience on the other hand needed some attention. With the introduction of the Student Service Center in the Welcome Center, it was a great opportunity to optimize that arrival experience.

On campus experience

We were tasked with created a “Campus Tour Check-In” form that would be set up on a computer as students came in. This form would allow the students to accomplish the following things:

  1. Sign up for an upcoming tour that day
  2. Find their name and sign in to tell the Admissions staff they were here for their tour
We went to work sketching out what we thought the initial screen would look like.
This is what we came up with:

For us this made logical sense, one page, two options, the full sign up form ready to take any new submissions and a secondary sign-in form where the student could look up their name.

But something was wrong

After presenting this to some of the tour guides we realized we made some assumptions that were not consistent with how students interact with the tours. The majority of students pre-register for their tour and only a few drop in to take a tour without signing up.

So back to the drawing board. We simplified the page to a single search field, “last name”. This forces the student to check to see if they have already registered (avoiding duplicates), if they find themselves they can click the “Check In” button next to their name and are ready to go. If they don’t see their name in the list they can click the “Sign Up” button on the right and enter the rest of their information to sign up and sign in for a tour that day. More students than we thought ended up coming to take a tour on a different day than they signed up for, so the search results contain past and future tour registrations.

 

Above you will see the sketch of the initial screen (left) and once they type in their last name they are presented with the results (right) so they can decide to check in or sign up for a new tour.

The actual form

Above you will see what the live form looks like, there have been some graphical changes since the launch that are not reflected here but the user interaction is the same.

It is opportunities like this that get us excited to be able to impact and extend the Web experience to mirror how students actually interact with campus. The more natural we can make the experience the more we can get out of the students way and assist with their task. If we can make the experience “invisible”, the student then has time to focus on more important things.