Near the end of the summer in 2013, I and a group of other web developers and marketing personnel started to look forward to the West Virginia School of Public Health’s 2014 website redesign. The School of Public Health’s last website design launched on July 1, 2012 and we weren’t just redesigning for design’s sake – which incidentally makes me think of a great article by Jessica Meher titled 10 Terrible Reasons to Redesign Your Website – but instead we were redesigning because both West Virginia University and the School of Public Health would be undergoing reaccreditation in the spring of 2014.
I have previously wrote about my creative process before, but to reiterate, I think that the most important step is research. Ta-da… that’s it, and that’s the key; don’t forget to do your research! Design research is what really helped our team define our target audience, geographic scope, design strategy, and our communication goals. Design thinking is of course very important too, and really involves your clients, but don’t skip the important research part of any design process.
If we knew what it was we were doing, it would not be called research, would it?
One of my favorite quotes from Albert Einstein is “if we knew what it was we were doing, it would not be called research, would it?” So by ‘design research’ I mean not just ‘looking’ at other websites, but more so really performing both qualitative and quantitative research for your client, apart from just visual research. If a designer only looked at a website or even multiple peer websites when redesigning a website, they really are just doing what most designers refer to as a ‘facelift’.
Doing a facelift when redesigning a website cheats the client, ultimately cheats the designer by doing what is easiest, and the result is a lack of understanding for the client’s needs. This is also what ultimately perpetrates the notion in a lot of clients that designers just make things ‘look pretty’. So, don’t be surprised when one day you encounter a client that thinks they can make things look pretty too, and that they ‘know what’s best’ or that they ‘don’t trust a designer to crop a photo’ (see How A Web Design Goes Straight To Hell for more on that, and I actually have had all of these things said to me before by clients).
All kids out of the pool… time for Design Research!
When the School of Public Health web developers and marketing personnel set out on the path of gathering both qualitative, quantitative, and visual research. We analyzed traffic patterns, visitor demographics, and social media metrics; we formed multiple survey groups of current faculty, staff, and students to find out if their needs were being met, and to gather their thoughts on the current website; and we looked at the following external research data groups as general sources of information, as well as sources of higher education information (starting first with the school’s accrediting body): ASPPH, CEPH, eduStyle, HEPC, Higheredexperts, Noel-Levitz, Redant, StackOverflow, WC3, and the WVHEPC.
One might ask why so much research is even important. The answer is Mike Monteiro, an author and design director for Mule Design Studio, who states it best as being “when we create without thinking, we become deaf… most clients want to do the right thing, and they don’t know they are doing the wrong thing unless you tell them…. you owe it to them to tell them; they hired you to tell them.”
So, with the help of individuals, as well as many long hours surfing the web, using Microsoft Excel, and compiling survey results, the following is the process book just of School of Public Health redesign research brief (which totaled about two to three months of research):
Design + Develop much?
The research brief really helped inform all of the next steps in the redesign process, but what does one do next? We were faced with jumping into an Adobe product, or just designing in the browser to focus on progressive enhancement with HTML, SASS, and JavaScript.
Aaron Lumsden wrote a tuts+ article called Tips for Designing in the Browser that really speaks to the pros and cons of designing in the browser versus a software application. Lumsden states that designing in Photoshop is designing at a fixed width, that user experience can’t be demonstrated, work gets repeated with copying and conversion, it’s time consuming, and the design is not an exact representation of how the final design will look.
However, Lumsden also states that there can be a negative side effect to designing in the browser, and as we looked for ways to speed up our web design workflow, we “can become so caught up in the functionality, making sure that it works at every resolution that we can sometimes forget to give the design the love and attention that it deserves.” So what does this mean?
As a web guru in today’s society it’s essential to be both a designer and a developer, one needs peer feedback and constructive criticism, and one truly has to focus on both the design and the development aspect of one’s work. With the School of Public Health design we did exactly this. We used style tiles, colors, font-choices, and layout sketches to communicate with the clients and determine the aesthetics, but the design also had to naturally change over the process of development. However, when content was factored into the design, everything changed.
Website content doesn’t equal cooties!
First, let me say that website content doesn’t equal cooties. Rather, content is the output of an organization’s web presence. The ultimate goal is to have productive and sustainable content. I would highly suggest that every web designer read Sara Wachter-Boettcher’s book Strategy and Structure for Future-Ready Content. Sara’s book presents content development and strategy as a parallel process to the web design and development process.
When a web designer sees content as only ‘input’, it is a huge mistake. Web designers need to facilitate the content development and content strategy processes, and they simply can’t be end-point driven with a GSD (get shit done) attitude. For the School of Public Health web redesign we formed three task forces just for content: an academic content workgroup; a departmental content workgroup; and an overall branding and marketing workgroup for the school-level. This made the process of content strategy much more digestible, allowed people to function as subject matter experts (SME) to audit content, and ultimately developed content strategy for the website redesign.
Creating a boilerplate for SMEs to populate content is a first step in the right direction for some, but content auditing, development, and strategy should be a parallel process between SMEs and web developers. Web designers just need to give up, give in, and no longer think about getting to the next release by just copying content into the new template; this is an antiquated mentality concerning website redesign, and alienates all concepts of marketing, recruitment, and content strategy from the redesign process. Roll up your sleeves, get into the trenches, and show the SMEs how to audit content.
Why are you using that hamburger?
When I think of the sheer number of web designers in the world that state they are Senior User Interface Consultants, Associate GUI Evangelist, Head Mobile UI/UX Sorcerer, or whatever ridiculous and trendy title they want to name themselves to feel cool, I have to admit that I have doubts if any of these people truly know what the concepts of phenomenology and heuristics are, and what it requires to design successful user interface design.
A couple of interesting user interface design articles we found while working on the redesign were Mobile Menu AB Tested: Hamburger Not the Best Choice by Exis, and 9 Small User Experience Details Most Websites Miss by UXMovement. These two articles point to definite data that determine why user interface choices should be implemented in a web design; in contrast, designers should exercise caution when implementing any popular or trending user interface design choices. An example of this can be seen in the StackExchange debate Should users be able to zoom in a responsive webdesign that has been going on since April of 2013, over which the web design and developer community is still very much divided (as one can see in the thread).
Furthermore, a good article to read is Why I’m Not A UX Designer (and Neither Are You) by Aaron Weyenberg. In this article Weyenberg discusses the coinage of the word by Don Norman, and discusses the Peter Merholz’ interview of Don Norman a decade later, where Norman states “people use them often without having any idea why, what the word means, its origin, history, or what it’s about.” He further quotes from Norman, stating that “we can design in the affordances of experiences, but in the end it is up to the people who use our products to have the experiences.
What we did with the School of Public Health website to develop successful user interface design is test, test, and test. We tested multiple devices, tested on multiple platforms, tested different browsers (including IE8). In addition to testing, we had people use the website before the launch, which was a must! How else were we to know if the website navigation made sense? How else were we to know if the website experience only made sense to us?
I can’t wait for the sequel!
Web designers are expected to produce faster and faster template-based work to meet deadlines. That is just the nature of the industry, and everything is always on the fast-track; however, designers need to remember to set flexible deadlines that can change, really do their research, and actually work with their clients. If a designer takes anything from this reading, please take away the following when redesigning a website:
- Design research is the most important part of the process, so use different research methods;
- Don’t jump immediately into designing in the browser or a software application – research informs the process first and foremost;
- Designers can help themselves by helping their clients facilitate a content strategy process, and letting their design grow with the process;
- Find data that supports user interface design choices, rather than implementing what is currently trending.