Welcome Jenny Ingles – Our new full-time front-end developer

Our team has changed shape a bit in the last year, especially in the role of front-end development. The primary role of a front-end developer is to “create the best possible user experience for features on desktop and mobile Web.” For us, that means translating the information architecture, design and content to HTML, CSS and Javascript to bring it to life. Because there is no medium like the Web this is a pretty unique task and always a moving target.

In previous years we had three full stack developers who were responsible for the entire programming of a site from the database data binding to the performance and accessibility of the user experience. It became pretty clear last year that doing everything was spreading them thin and we weren’t able to accomplish the fine grain optimization we were used to. So we decided to split the developers into front-end and full stack roles. The full stack developers still had knowledge of the front-end but their primary focus was university tools and optimizing the data in and out of our API. The front-end roles can spend their time optimizing every pixel that the end user interacts with.

Welcome Jenny Ingles

After months of searching we have found Jenny Ingles, our new front-end developer. Jenny comes to us from St. Louis and has extensive background working with HTML, SASS, Javascript, and Illustration. She has brought a fresh eye to how we structure our code, approach problems, and testing. Since she has started to get involved with projects our code has not been more semantic, page weight has decreased, and the user experience is the quickest yet.

It has taken me a few months to make this announcement on our blog and in the meantime you have probably been browsing her work and not even realizing it. Recently she worked on the front-end of the following projects:

Pivotal Moments

pivotalmoments

For her first project, a website that was already architected and designed, she was thrown in with a pretty PSD and told to make it work. Not only did she break it down technically but also worked very closely with the client at every step to educate on expectations, opportunities that the Web as a medium brings, and responsive implications. What came out of all that was an implementation that was not only within budget but also looks and performs beautifully. Browse around the Pivotal Moments website and see for yourself.

College of Fine, Performing and Communications Arts

cfpca

Jenny got her feet wet with our workflow, process, and structure using our Yeoman Foundation 5 site generator (not public yet). With this she was able to add some new features to the site. The homepage of the College of Fine, Performing and Communications Arts features some uniquely positioned areas with semantic HTML, parallax scrolling and CSS 3. 

The Baroudeur

baroudeur

In the same line with the CFPCA website, Jenny built upon her knowledge to not only include parallax scrolling but also responsive background video. Although the background video didn’t make it into the first launch of the website, we hope to find a video in the future that meets everyone’s needs.

Student Service Center wait times

studentservice

In addition to full scale website builds, Jenny also has been working on the little big details that make the user experience a little more enjoyable. For the Student Service Center she added visual elements to highlight the important information at a glance. In addition, the tabbed view for hours brings the relevant information into initial view and secondary information a click away without scrolling or a refresh. Below that, the frequently asked questions are now within an accordion so they are easy to scan and quick to jump between. An improvement that didn’t revolutionize the page, but made a useful page more of a joy to use.

Art & Art History (upcoming)

art

Although it isn’t live yet (hopefully soon and I will update this post when it does launch): the Art & Art History department website. Another soup to nuts website that Jenny was involved with that really shows off the attention to detail. This site was build on our Yeoman site generator (which means it is a standard starting point for all future sites) and lazy loads hidden images/content, changes design naturally at different breakpoints, and utilizes icon fonts as much as possible. It also features something I have yet to talk about, progressive enhanced page loading with YouTube’s SPF JS. This is something we have been playing around with for a bit and this site shows off how we have nicely adapted it to our Web experience. We can’t wait to show you the final website, which should be available shortly at http://art.wayne.edu/.

Just a few short weeks

This is just a snapshot of what we’ve done in the last few weeks. We don’t believe we’d be where we’re at without Jenny. Let’s give her a warm welcome! We can’t wait to see what she’s able to accomplish in the next few months.

Quote: Purpose of design

“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.”

Paul Rand

Giving the 404 some personality

Nobody likes seeing a 404 page, it’s like hitting a brick wall. With hundreds of thousands of pages on wayne.edu, it’s bound to happen and our goal is to make it as unlikely as possible.

I was recently inspired by Renny Gleeson’s TED talk, “404, the story of a page not found”. It made me dive deeper in to our 404 experience.

Too much useless information

I realized our 404 page had way too much copy on it. It was actually written around 2002 (almost 12 years ago) when we had far less pages and the visitor may have actually not known what to do next.

Old 404 page

How do people actually use the 404 page?

We have to admit, we have never really done user testing on our 404 page. In the past we have tried to hide the fact that the page even existed. All we have to rely on is our passive analytics to get insights.

Our Real-time Dashboard

We combat most 404 errors with a real-time dashboard. The dashboard tracks more that just 404’s and allows us to react to the pulse of  what is happening as it is happening so we can fix or promote anything while it’s hot.

Google Analytics

The amount of copy on the 404 page was about the same as a typical page on our site. But if you take a look at the comparison below of all visits (to our top level pages) and only 404’s for the past 30 days you’ll see a striking difference.

Visitors are spending far less time on the 404 page, 69% less time. The bounce and exit rates are also 90% less than a typical page. What does this mean? They are hitting the page and doing one of two things, either hitting the “back” button or using the embedded search.

Unfortunately the way the 404 page was set up we weren’t able to track what people were searching for and it goes off to an old Google Syndicated Search page which we don’t control.

Simplify and add personality

We decided to cut the text on the page to the bare minimum. This would give the visitor clear direction on what to do next.

We wanted to give the “brick wall” a little personality and express to the visitor that we felt their pain. Although it isn’t anything revolutionary the simple fact seeing a sad person re-enforces that we are just as upset as they are.

We also changed the email address from “webmaster” to our main “web” account. When picturing a “webmaster” most people think of an IT geek sitting alone in a dark basement making sure all the servers are up and running. We wanted to lower the barrier of action, and although we do get emails to the webmaster account, we hope changing it to “Web” encourages more people to email us.

Lastly, we searched for other good examples and thumbing through the Flickr 404 Pool we found some real gems.

A global roll out

Right now this new error page is only on the top level pages of wayne.edu but we’ll soon be rolling it out to all the sites on campus. As we move to a more centralized Web experience we are creating more unified experiences across all our silo-ed websites.

View the live 404 page at: http://wayne.edu/404/

 

[Friday Links] The changes edition

Fridays are always busy for us, we try to focus exclusively on internal projects, which means I often don’t have time to post my Friday Links list. So why not just rename it you ask? I don’t have a good answer for that. 🙂

Anyways, these links were too good to keep myself, enjoy!

[Friday Links] The Molly Holzschlag Edition

Yesterday Detroit welcomed Molly Holzschlag as the inaugural of Rise + Design Detroit in the morning and to give a full talk at Refresh Detroit in the evening. Molly is considered one of the godfathers godmother of the Web. Her talks centered around “From Documents to Apps: Evolving an Open Web”. As an advocate for open standards, she outlined how the open web allows for the empowerment of all individuals via global access. The archive should be up soon on the Refresh Detroit website.

She started her talk with a quote from Hillman Curtis that I am very fond of and wanted to share:

“Be prepared to reinvent yourself. Be prepared to go out on a limb occasionally, and be prepared to do the things that you feel strongly about”
Hillman Curtis

[Friday Links] The back on the horse edition

After a few weeks off I was finally able to catch up with my RSS feeds and put together the sites I have found useful and impacting from this past week.

[Friday Links] The Dropbox Edition

Dropbox (referral link) is the swiss army knife of file storage, it allows you to get your documents when and where ever you are. This week Dropbox had two pretty big announcements, the first is a new service tailored to business teams. The second was the introduction of auto uploading photos and videos from your mobile phone. Dropbox is just another example of the declining reliance on hardware devices and increase in services.

[Friday Links] The Bootstrap Edition

This week went by quicker than expected but a lot got done. Ad you can see from the links below some great stuff has been produced and announced this week. Take a second to glance at the list, I’m sure you will find something that strikes your interest.

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.