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.

Life in Web Communications, then and now

A lot has happened over the last 10 years that I’ve been in the Web Communications department, but looking back it made me realize how much has changed just in the last year.

I thought I would break down some of the basics to put it in perspective:

Then Now
Relied on multiple methods of contact: Basecamp, email, and a shared inbox. Now using a true ticket system, TargetProcess. All support and project related activity is in one place.
Used Campfire for group chat which was limited to just our department. Now we use Slack which allows anyone around campus to join so more people can be on the same page throughout the day.
Almost everyone was working at a desktop computer. Now most work is done on laptops, in shared spaces, and as much as possible, with the client.
Coffee was the drink of choice for the office. Now it seems most people have converted to tea.
Down a few staff members for various reasons and thus not able to take on the amount of work we were used to. Now fully staffed and back up to speed with all projects. Almost each positon has a ‘pair‘.
Our development stack used to be all over the place with MAMP, Ruby and Gem requirements unique to each machine. Now everyone is running the same Vagrant image which can be replicated in just a few steps. Bringing up a new computer now takes minutes instead of hours.
We used to host all our code in SVN which is great for a single project, but multiply that by 600 and it becomes a pain to manage. Now every project has its own GIT repository, branches and pull requests. We use git-flow to standardize code contributions.
Deploying code changes to the server were done by hand and in some instances involved voodoo. Now all code is deployed by script and in a standard way to ensure accuracy, repeatability, and enabled the ability to roll back if anything goes wrong.
We used to wear multiple hats, switching projects and contexts all day long as support requests and quick turn-around items came in. Now we have two teams, the project team works on scheduled client work and the support team handles hundreds of support-related tasks per week. The teams switch up every month and everyone starts each day knowing what to expect and what they are going to work on.
Our office space hasn’t changed, we are still in an open ‘pit’ area but we used to have our large L-type desks configured to take advantage of space optimization. Now we have removed all L’s and have placed the desks in paired rows to allow for people optimization. This allows a pair from each discipline to work closely together all day. We also have one dedicated standing desk that anyone can use.
Everyone used to have a phone and their own phone number. Now we have a one single phone number for the entire department. We still remain without a single printer, and rely on shared resources as much as possible.

But some things never change.

We hire great people and work on great projects for awesome clients around campus. We continue to challenge ourselves to be the best at our craft, contribute to open source and the higher ed community, and raise the stature of the university.

Why we retrospective

The best tool a team can have is the ability to analyze and adapt. The last few weeks I have been talking a lot about Agile agile practices. I intentionally use the lowercase “A” because I am not advocating for any specific methodology but instead to use the Agile Manifesto at its core and use team “agility” to find the best practices for your team.

This process starts with the ‘retrospective‘, which is adopted from the ‘Scrum‘ methodology but is used to look back at a period of time, usually one or two weeks, and introduce a feedback loop for the team to discuss and improve. This is the foundation to critically analyze processes and goals.

This is the basis for a talk I have adapted twice, with more iterations coming in the next few months. Retrospectives are just one topic in the talk but it’s the foundation for the rest. The higher education specific version is below.

Highedweb Michigan presentation

When a team has an existing process, it can be uncomfortable for some people to change, especially if something isn’t going ‘horribly wrong’ and thus is less apparent. But we all have room for improvement as long as we are willing to try.

All team buy-in

Everyone must be willing to try ideas for some time before dismissing them. If the entire team isn’t on board, the reflection and process planning won’t result in the best possible solution. The team shouldn’t dismiss even the most out of the box ideas unless they try them for some time, one or more weeks. If the change totally fails, no one likes it or it doesn’t produce the desired results, that will come out in the next retrospective and everyone will agree to go back or adapt what was tried.

Start with your current process

Don’t change a thing in the beginning, just talk. You may find that a two,three hour argument discussion may take place the first few retro’s. This is good, it may not feel like it’s producing anything productive, but these feelings, ideas and issues need a vehicle to get addressed and out of the way before real improvement can happen. You’ll find that other members of the team may be very passionate about the same things you are, but you may never have noticed. Over time the retrospectives will become shorter and more productive. Hang in there.

Running a retrospective

First rule: No technology during the retrospective, everyone take out their phone and place it in the middle of the table. This may get people squirming at first but giving all team members the equal respect of your attention makes a world of difference.

Next, there needs to be a facilitator, this can be someone on the team or someone external. Their role is to keep everyone on track and to record the discussion points.

Then, go around the room and have each person answer the following questions:

  • What went well?
  • What didn’t go so well?
  • What have I learned?
  • What still puzzles me?

Our team also adds the question, “How stressed were you on a scale of 1-10?” We make it a point to focus the changes for the next iteration on reducing the number for the most stressed person.

Discussion

After everyone goes around and the team has heard how the last week or two went, only then can an effective discussion happen about what should stay the same and can be improved. As a group, although it shouldn’t be limited to an unanimous vote, everyone should agree (or be willing to try) what to change over the next week or two (depending on how often retrospectives are done).

The facilitator has the job of moving the discussion along and ensuring comments are moving in a productive direction. Discussions that get out of hand for a few minutes are fine, but make sure it doesn’t diverge into complaining about a person or process that the team doesn’t have the ability to improve.

Change just one thing

Like any iterative process, it is important to change just one thing at a time, or at least one thing per area. Depending on the size of the team and who/what they interact with, more than one change can happen, just make sure it isn’t too much to keep track of. But document the changes and determine when it should be revisited.

Iterate, rinse, and repeat

At the end of the day being happy working on meaningful work that makes an impact is the ultimate goal. If you’re not moving in the direction, bring it up in your next retrospective.

Reducing physical distractions in an open workspace

I often post about website redesigns and how their new structure and layout make for an improved user experience. Today I’m going to give some insights in to a redesign of the physical Web department workspace and how it makes for a more productive staff experience.

Old Web Communications “pit”

The Web Communications area is located in an open space in the middle of the Marketing Department. The location has its advantages as we are a short walking distance to anyone in marketing. But that also means anyone else in the office is walking past us every time they visit someone else. There are also four entrances/exists that create traffic right through the middle of our space. The space is pictured above, shame on me for not taking more “before” shots of the office.

A lot of articles the last few years have praised the “open office space” as the holy grail for collaboration and serendipitous interactions. In theory it may be that it allows for that interaction, but if you’ve ever worked in one you know differently. We are huge fans of 37 Signals, a software development firm out of Chicago, for various reasons. We work under a lot of the same constraints, digital environment, write our own products, have clients (they use to), do customer support, training, simple approach to solutions, and everyone has their specialty. The open office space sounded like it was the perfect environment, but we have found we have the same issues as 37 Signals: distractions are the devil to productivity.

If you have been to our space before you know we typically work in the dark (you might not actually recognize it with the lights on, below) and everyone has headphones on. That does a lot to help focus but there is one thing that is out of our control, the constant flow of traffic past desks and occasional comments that break up the work day.

The two desks right in the middle and corner of the “T” that our space creates were being distracted the most. We set out to reduce the number of distractions while still living in the constraints of our space. We don’t have the luxury of moving to a new space like 37 Signals but were able to make some tweaks.

New office setup

 

What we did and the impact

A few weeks ago I moved my office and now sit in a space separate with Rommel, our project manager. This allows us to talk in isolation without distracting everyone else in the pit. It also forces Rommel to use digital communications to get quick answers to things instead of  walking over to someones desk and distracting them. When someone really needs to concentrate these digital communications are the easier to turn off.

My old office was turned in to a Web conference room but we quickly realize it didn’t get used much as we thought, marketing already has a conference room with a projector that we have access to. We decided to move Jenn, owner of one of the high traffic corner desks, in to a single office since she needs to be able to isolate herself to write and talk to clients on the phone. So far that has worked great, she has been able to concentrate and it has reduced the noise from phone calls in the open Web area a lot.

Chris, was also at a corner desk with a lot of traffic. He needs to be able to get in to flow and solve complex problems and this wasn’t the best spot for him. We ended up moving him back toward the other developers and shifting his desk so his peripheral vision wasn’t a distraction.

Lastly, because there is a hall way in the middle of our space we have separated the office in half, designers/content editors on one side and developers on the other. This allows the developers to collaborate easily without leaving their chairs, and we wanted do the same for the designers. We moved the designers so they are right next to each other and can talk and see each others screens without having to get up.

But isn’t the conference table in the middle distracting? Yes, yes it is. But we have no where else to put it at the moment and the staff isn’t shy about telling people they are too loud and to move to the marketing conference room down the hall.

Did it work?

So far so good. In the past few weeks the Web staff have reported that their ability to concentrate has gone up. Because those two corner desks have been replaced by open space the foot traffic has not had a reason to stop and comment on their way through our space.

Productivity is a moving target, everyone has their own methods and motivations to get in to flow. Tailoring our space to encourage this helps everyone, our staff, our clients and the university.

Continue reading “Reducing physical distractions in an open workspace”

Coffee Wars – The results are in!

Coffee WarsHave you ever had interoffice debates to what coffee tastes the best?  Well, we do and we finally decided to hold an office blind coffee taste testing and find out, which coffee is the best!

We wanted to get a blend of both popular “home brews” and retail chain coffees to see which actually tasted better.  We had everything from Starbucks coffee all the way to the basic canned coffee like Maxwell House.

Here were the specifics of the tasting:
We decided to taste-test it black, to keep a consistency across all the coffees.  Each taste cup was 1 oz and there was a total of 11 coffees being represented. We rated each coffee on a 1-10 rating scale and left a quick description of each coffee’s flavor. After it was all said and done, we were very surprised with the results. For you Dunkin Donuts fans, you might want to hide your eyes.

Results:
Rank 1 – Kirkland – Overall 87 – Average 6.21
Rank 2 – Panera – Overall 77 – Average 5.50
Rank 3 – Biggby – Overall 70 – Average 5
Rank 4 – Gevalia – Overall 68 – Average 4.86
Rank 5 – Folgers – Overall 65 – Average 4.64
Rank 6 – Caribou – Overall 63 – Average 4.50
Rank 7 – Starbucks – Overall 60 – Average 4.29
Rank 8 – Guatemala – Overall 53 – Average 3.79
Rank 9 – Einstein – Overall 52 – Average 3.71
Rank 10 – Maxwell – Overall 49 – Average 3.50
Rank 11 – Dunkin – Overall 40 – Average 2.86

Costco’s Kirkland ground coffee came in as the commanding champ, with Panera and Biggby following close behind. Next time your at the market you might think twice about buying that expensive, popular coffee!! Let us know your favorite coffee in the comments below and maybe there will be a second tasting in the near future.

Communication overload at work

As a web developer I’m constantly pushing new communications out to people around the world. These communications come in many different forms. Just the other day I added one such new form of communication to every event at events.wayne.edu, the Facebook like button.

I really had my doubts that this like button would be useful on our events calendar. Those doubts didn’t last long. While implementing the like button I was testing it by liking random events. After getting a dozen or so questions from friends (and family) asking why I liked a Church of Scientology event (web developers don’t read content) I quickly realized that I was communicating with a whole bunch of people without even realizing it. This proved to me that the like button really does spark conversations.

Now, being that I set up tools to push communications out to thousands (or more?) people I find myself wondering where the threshold is for communication overload. At work, we monitor various external communication sources. Now this is obviously not the primary focus of my job, but being that I work within the marketing department and communication plays such a key role in what we do, I find things like twitter messages and Facebook wall posts creeping into my field of view. Some of them are mission critical, some are semi important, but it seems most are little more than a distraction.

For internal communication our team uses a combination of E-mail, Instant message (both Google Talk and an internal Jabber server), a 1 hour, *cough* 3 hour, standing weekly status meeting, and random conversations throughout the week. We were also using a Jabber conference bot that broadcast messages team wide, but we’ve recently replaced that with campfire. My work e-mail account also receives a few dozen campus wide communications each week, of which maybe 15% pertain to me. I also use my e-mail to communicate directly with clients. I’d say that most days I spend 33-50% of my time in the office communicating.

Today our department lead was tinkering around with the campfire and twitter APIs so he could get tweets to show up in our campfire group chat. I have the chat set up to alert me audibly and via growl when new messages pop up. This is a primary source of communication for our group, so to stay in the loop I need to know when people are saying stuff. With the addition of tweets to this feed, I think I’ll pass the 50% mark and the majority of my time will now be spent on communication. The number of potential distractions is so great, that getting work (coding) done at this point is becoming ever more challenging.

As developers, should we be bombarded by communications constantly? Should the work related distractions be so numerous that we find it difficult to focus on a project for more than 5 minutes at a time? Is reading social streams now a requirement for good programming?

While writing this blog post (it took 10 minutes) I read 2 dozen tweets, was messaged 2 times on Google Talk, had 2 new e-mails come in, and was messaged twice in our campfire room. While writing that sentence, I was messages 2 more times, and 5 more tweets showed up.

Will 75% of my time be spent communicating next month? 90% the month after? When is it too much?

Office Experiment: Mold Test

Since we work in a “pit” environment when one person gets sick we try to separate them from the rest of the group. Recently though a few people have been getting sick more often than normal. We decided to investigate by having the Office of Environmental Health and Safety come out to test the air. They came out but were only going to test the dust in the air. We were looking for mold.

So Tom purchased a do-it-yourself mold test kit. The test was simple: put a petri dish by a vent for 15 minutes and then wait 48 hours. It was Friday so it could sit all weekend but we were sad we couldn’t watch its progress. Luckily, Jenn had a webcam and we hooked it up to take a picture every minute. The webcam was kinda crappy so the the video/images came out pretty blurry. Also we had a light on it that caused some condensation.

Time lapse video of mold sample

What happens next

Now that we have this sample we are sending it in for analysis. As you can see from the picture below the mold has begun to grow legs. We are very interested to learn what we are breathing in. As soon as we get the results we will be sure to update everyone.

[Shenanigan] Quarantine

Last week Bob Vrabel was out sick. The work on his desk piled up and as we started chipping away at it we wanted to make sure we too didn’t get sick. So the only solution was to quarantine his entire desk to be safe.

Here is his desk in quarantine:

Creating a culture of community

My position at the university allows me to meet with just about anyone and everyone on campus. It also allows me and the Web Communications team to get a bird’s eye view of how everyone on campus works internally and externally.

I was thinking about our team culture this morning as I looked around the office. I do my best work early in the morning so I tend to get in before everyone else. The Web and print areas are slightly different than the rest of the marketing office. The first thing you’ll notice is we work in large open areas instead of individual offices. The more I thought about it the more I realized how much we really do as a group and how all our decisions are based on benefiting the most amount of people.

Group Culture

Some things you’ll notice while walking through the Web area is the lack of walls and the abundance of whiteboards. All content, programming, and design brainstorming happens for all to see and comment on. Just because we are making a decision about how to write a headline it doesn’t mean a designer or developer wouldn’t have some insight and add to the discussion.

Beyond that it’s the little things you probably won’t notice at first glance. Between ten of us we share four phones. I have one, Jenn, our Web content administrator has one, the designers share one and the developers share one. We used to have less but added one for the designers in the past year as they started to become primary contacts for our clients around campus.

You’ll also notice we don’t have a printer on everyone’s desk. We actually don’t have a printer at all, we got rid of it a few months ago. The decision to remove it was two fold, we didn’t see the need to have a printer running and purchase toner for it when there is already one in the center for the marketing office. On the web we don’t print very much and when we do it gives us an excuse to get away from our desk for a few minutes.

Lastly between us ten we only have three trash cans. This may sound unnecessary to think about but it comes down to needs. There’s no need for all of us to have a trash can with just one or two items in it each day. The custodians come by twice a day and picking up ten trash cans would add an extra 2-3 minutes just in our department. We can walk a few extra steps to throw our stuff away which in the end keeps the cleaning crew happy and us from being lazy.

Use only what you need

History should not be a motivation for doing something. Question what is actually required to accomplish a task. If it makes sense for everyone to work in separate offices or have their own phone that’s okay. But if you can get by with a smaller space or less office “things” it’s less you have to worry about on a day-to-day basis. In the end you will find more time to focus on actual work that makes a difference.

Final note, the pic above shows the office with the lights on, this is typically not the case if you come visit us.

Web office makeover

Before

Unfortunately I couldn’t find a good photo of how the design side looked before the construction. The two above don’t do it justice. I know I have one and will update the post when I find it. In the above photo we removed the wall that separated the web area from the rest of marketing. The goal with the project was to give the Web area more breathing room. We also have a conference table and book shelf which would not fit in our old area.

After

Above you can see how taking down the wall has opened up our area and allowed for an additional desk plus the conference table. If you have been in the Web area before you know we work with the lights off so seeing everything lit up might look odd even if we didn’t expand.  The new space will allow us to have a true brainstorming area with whiteboard, conference table and projector. Something we need far too often when analyzing project needs and designs.