How Did I Go About the Latest Redesign of Our Website?

Do you ever finish a project, feel proud for a moment, then quickly see room for improvement? Most of us probably need to let that project live for a moment, focus on other projects and then come back to it when the timing feels right. Working endlessly like a perfectionistic hamster in a wheel isn’t going to benefit us in the long run. Those beats give us time to measure success and process what works and what else is needed.

Research

What was my main takeaway from all the talks I attended on the subject of UX (user experience) and UI (user interface)? Testing and research is the takeaway. Testing and research is at the heart of UX and UI work. It’s how you do it. Find users and find out how they feel and understand what you are working on. After first building elements of content and navigation that made sense to me, I’d hand my iPhone to anyone who would look at it and gather data. My testers are most often fellow parents at the park or at my kid’s school. They are mostly lawyers, doctors, business owners and others in the tech industry here in Austin. They fit in the category of objective intelligent professional. Exactly who I want to listen to.

Problem

I learned something when I showed it to my test group in an early phase. “The graphics were pleasing, but what does People Pattern do? I like the graphics, but why are some of them there?” Do all the visual elements help, or do some of them distract?

In a later phase I tested a new navigation. “I like the clean, modern look, but the menu is hard to read.”

While visitors were loving the visuals of our website, I was hearing that something was missing. Websites need to inform visitors what a company does and who they are clearly and easily. An increasing number of people getting back to me were saying that it was taking them a while to understand what we do. Our format had 39 pages (not including our demo, trial, blog, white papers, case studies, etc., pages). It was taking visitors 39 clicks to see all of the content of our site. I needed to make it easier. The side scrolling parallax presentation of the site was cool, and the mysterious build up of learning and exploring the site was probably working for our potential client base during that stage of our company’s growth. But wanted to remove any mystery and convey everything our visitors should know very quickly. 

Side Scroll Map

Side Scroll Website

Solution

Regarding the navigation: Simply changing the font to a slightly thicker font made it easier to read. I was resistant at first, and afraid it wouldn’t fit our feel. It turned out to be the right fix.

Reducing the number of clicks needed by visitors to absorb our story was my goal. Also a simpler layout would improve our SEO. The side scrolling design achieved nice aesthetics and was unique, but functionality needs to come first. I laid out a post-it for every page of our website on my desk and assessed the structure plan. It was a sea of post-its with just enough room for my keyboard.

I first took the original structure of 7 sections, and flipped them to a vertical scroll layout. This would greatly reduce the amount of clicks and expose visitors to our story better. This new structure would be key in working well with the updated responsive version of Muse I was going to use to publish it.

Now could I streamline it even more? How could I further reduce the number of pages in a way that might make the most sense? I tried a version that included all the main messaging play in a slide show at the top, with an “about us” video, executive team biographies, client slide show, and forms for careers and contact below that. It might seem like a lot, and it probably is. I tested it out in staging. It looked good, but had a big problem. The page loading speed was horrible. It made browsers choke on all the information. So this attempt went counter to my goal of improved functionality. There are many things to consider on the functionality side. You can optimize your visual content (reduce the image file sizes to the point before you compromise quality), but there are still limits and targets you need to hit.

Test Condensed Map

So back to the original structure in vertical format I went. As I worked it intuitively fell into place, felt balanced and had the improved flow I envisioned. 

Vertical Map

Vertical Website

Responsive

I began the redesign process February 15, 2016, the day the new responsive version of Muse went live. Once I established the structure and layout, I needed to redesign an average of 5 different versions of each web page to fit every device screen size anticipated. Then I needed to manage the responsive attributes of every existing element. Not only did each element need reformatting, but also needed direction in the setting of how each element behaves when a browser window size changes. And each design needed to be tested in each of the different device browser sizes, which prompted me back to the drawing board over and over until I got it right. As this was part of a brand new feature, I imagine I was not the only one pouring through Adobe’s tutorials and experimenting like a mad man that 3rd week in February. 

Various Responsive Designs

Takeaway

Your intuition can take you far. Put everything you have into thinking out how to make things better. Then get validation. Let your ego go, and get input. Back in art school (especially at the San Francisco Art Institute) peer critiques could leave me whimpering in a fetal position. Feedback is powerful and one of the best tools we have, no matter your profession. Don’t get me wrong: when I hear something that I fundamentally disagree with I’ll challenge it. Keep it logical, and emotion out of it. Filter it through multiple channels to validate it. This will cement confidence in the path of your work.