Ever wanted to get inside the brain of a Web designer? This is your chance! Carnegie’s Tyler Glaude shares his creative process in designing Web pages, including our new company website.
If you hadn’t noticed already, things have changed quite drastically with Carnegie’s website’s homepage and content layout. The design process along the way was an epic journey, and that’s what I’m going to share with you today. Before we dive into this post, let’s get everyone on the same page with some important acronyms:
- UI = User Interface, or what website visitors see and interact with when they’re on your site
- UX = User Experience, or how website visitors navigate and conduct business on your site
UI/UX development is about the user and how easy it is for them to interact and use the site. Many people are familiar with these two concepts and focus on making their product clear, concise, easy to use, and of course fun! That’s exactly how Web pages should be, though it’s often easier said than done.
Now that you’ve had a crash course in Web designer speak, we can move on to the real stuff, starting with the website you’re on right now. All the above concepts helped mold the final website you see before you now.
So what goes into a Web page? Almost all have a header, navigation, content, supporting content, contact form, and footer. The main issue is that they’re just not that fun. I’m not saying you should sacrifice a clear, concise UI/UX in favor of animations and quizzes and other “fun” things, but keeping the user interested and engaged should be in the back of your mind as you develop your website.
This is where my personal motto comes into play: dream it, design it, develop it. Don’t be afraid to dream, to allow yourself to imagine! That brings us to the design process—creating a design that does exactly what you dreamed it would do that is also accessible across all screens and has a great user experience.
After all the hair pulling, headaches, brainstorming, countless hours rearranging Photoshop documents, prototype building, and wiping tears away, a first—but certainly not final—design emerges. You dreamed it up and you designed it, but now it’s time for a reality check. Do the UI and UX still make sense? Are users going to know what to do and access what they want? Is it engaging and fun?
Lots of neat ideas come out during the dreaming and designing phase. Sometimes they don’t work out the way originally intended, but they can be repurposed. For example, during Carnegie’s redesign we went through a multitude of various design layouts for the homepage. We wanted to showcase integrated marketing; the question was how do you capture a concept like that? One of the initial versions of our home page had a node system linking the different facets of integrated marketing. It animated when you landed on the page.
It was visually appealing, but it didn’t really do much other than its initial animated movement. We wanted to keep the integrated node concept but make it convey more meaning while being fun and interactive. A new idea started to take shape: 
What if we could program a globe of nodes that a user could interact with by spinning it around with a mouse or their finger? That would be fun and different. And so the development process began . . .
Here is where Web design gets difficult and a little frustrating. In my personal experience, dreaming and designing are the easiest parts; actually producing the HTML that creates the Web page can be a real hair puller. Lots of expletives were muttered as I tried to get the globe just right, as it spun out of control, zoomed in and out rapidly, didn’t have touch controls, etc. The final globe you see to the right (and here, where you can manipulate it) was my dream, but all the issues in the process were more like nightmares.
Other ideas you may have noticed on the site that were born from previous dream and design phases:
- The animated background you see directly under the navigation (fun)
- Auto ticking facts on content pages (fun, UX)
- A “You may be interested in” section in services (UX, UI)
- Request for more info form on every page (UX, UI)
Here are all the designs that Carnegie’s homepage has had for the last three years.
2012:
2013:
2014:
Today (2015):
Information hierarchy is something that I want to touch on briefly before closing out. In the past versions of Carnegie’s homepage, content was everywhere. In the latest homepage we cut back and wanted to give users a clear idea of what Carnegie is all about. In the last screenshot you only see a big title with four links at the bottom. Each of those links jumps the page down to that specific area. Now it’s a lot easier for someone who had no idea who or what Carnegie was to know that we excel in integrated marketing for higher education enrollment. They can then learn more about what we do, why we’re the right solution, our latest blog posts, and our featured conference. It takes away the information overload and gives users a better overall UX.
I hope you all enjoy the Carnegie site and enjoyed reading about how it came into being. Any questions or comments? Let me know in the comments below!