InMotion Hosting has matured significantly since it began 19 years ago. The age of our website was starting to show, and we needed to find a way to stay competitive to cater to our evolving customer base.
Stakeholders did not always relate fully to the standard design process. It was hard for them to visualize with wire frames, especially early on. To solve this, we tried a more unconventional approach and often ended up working backwards. We would present flushed out homepage mocks first and then revise with mood boards and samples once they saw a polished vision.
Deep into the timeline of the project, one of the stakeholders changed their minds about a color. It had been part of an approved pallet a few months prior and was already established in the design system.
This change meant we would need to consider how we would need to adjust the other colors to relate to the new color. Also ensuring that the chosen colors all remained WCAG compliant. We both took a detour into this color study to collaborate and come up with a solution the stakeholders could all agree on.
For context, our current IMH logo is red and it’s design is almost 20 years old.
One of two of the original founders is not a fan of the color red. It was a challenge to experiment with the new color pallet to find the right percent of the brand red for the design. Especially since it needed to be enough to compliment the logo. Although the designers encouraged it, a brand update would be out of the question for the time being. So we found ourselves balancing accommodation and compromise to ensure everyone was happy with the chosen design.
A unique challenge for me, when the lead designer and I pitched our concepts to the team. Her idea got picked and from there I took on the full supporting UX/UI designer role. After the lead designer set the look and feel, I create custom assets for the design system, and internal interactive web block components in another designer’s style.
Even though the design system, and pages were created by two different people, the site as a whole needs to look seamless and cohesive. This took good communication and dedicated teamwork.
Launched design of the IMH home page
Website design before the redesign. Sections and page additions seemed increasingly more unfamiliar to the original home page. We were also not as user accessible as we needed to be. This means there was a huge chunk of the population that could not enjoy the full experience of our site. They did not have full access to our products, because of our unawareness to accommodate them. All these were reasons highlighted by a modern ever-evolving customer base.
It was clear to the User Experience team, something had to be done and InMotion Hosting needed a website revamp. The small team worked for months auditing the now legacy site top to bottom. They collected the data and identified the major areas of concern the redesign could fix. They presented their findings to the CEO’s who agreed we needed a change to the website. Ultimately the stakeholders wanted to see more than one design concept.
That’s where I came in. I was promoted to the User Experience team as a UX/UI designer soon after making a collaborative pitch of an alternative home page layout I created with my web design manager and mentor, Steven Llano. That initial pitch wasn’t chosen for the final design, but allowed me the opportunity to collaborate with the lead designer of the chosen design. I enjoyed the challenge of creating interchangeable blocks and assets to create internal pages, and building up a design system, in the lead designer’s art style direction.
To create a homepage mock that would revamp the current design in a modern way. We not only wanted to improve upon the look and feel, but also to pitch it as a basis for the beginning of a winning design system that would be used as a guide for the new site. I also wanted to base the flow of the home page off of AIDA consumer guidelines, and ensure it was accessible.
Our user researcher found that 40% of share of voice of our customer persona base would be small business owners by 2021. We also wanted to understand what our CEO finds value in how we represent ourselves. It was important to encapsulate what that is while we have the opportunity to revamp the company website. The quote below is taken from an interview transcript where he was asked these questions. Based off this research, I knew the direction I wanted my design direction to be people centered. In the interview, Todd sounded like he appreciated the roots. His humble beginnings working back to back with his co founder. Building this 19 year business together in a garage, and evolving it into this cross country company that it is today. Also that he would like our company to service and cater to the growth of other small businesses.
“So, if you’re a small company, you often face challenges that, you know, a big company has solved with the department, and they only needed three or four people to do it for 1,000 strong firm where you still need a person for a 10 person company, which is not very efficient, and often not very good results. So, that's always been something that we've had in our mind is that to help the small businesses compete at a higher level.”
Deciding on a design style was not a simple feat.
I saw the opportunity to revamp the layout of the spec tables as we were redesigning the original site. The old way is cluttered with and excess of line items giving repeat information. I knew there was a better way to layout this information. So I restructured the spec tables in a wire frame that later got approved into the final design with a few tweaks to work with the evolving design system.
The old version of the spec table was very long and cumbersome to wade through. It felt chaotic, with badges loudly calling for your attention, and a wall of check icons. This layout did not make it easy to compare features, especially when more products would be added.
This wire frame is what initially proposed to the team as a new way of laying out the spec table information. Features included in all plans organized together at the bottom and grouped by category. This approach saves us a lot more website real estate.
As the design style guide evolved, a few changes to the overall look came about like the way we would represent tool tips with a dotted underline of the key word, rather than a clickable icon next to the feature.Some of the products we offer could have up to six packages to choose from, such a reseller hosting. This becomes an issue when we think about mobile design. Initial the solution was to allow a scrolling feature for the products on mobile. This deemed not to be ideal because it would tax the user with an large amount of cognitional load to remember all the specs while scrolling. It would also not be as easy to navigate on a screen reader. Due to this I came up with an alternative no scrolling mobile layout. This layout proved to be more accessible and mobile friendly.
If you think we could work well together, have questions, or would like to see more work, please let me know!
I’d love to hear from you.
