Effective marketing is a combination of clear visual design and succinct copywriting.
I redesigned it be more presentable while adding new content to tell a better story.
Zohno acquired more customers after launching the redesign!
How might we improve the site to help the company be more successful?
Unless you're creating web apps, website design these days is largely a marketing exercise. Because Zohno is not a web app, the website is there mainly as a promotional tool to attract and convert prospective customers.
The original site (which I also made and won’t show how bad it was) was very basic, something that provided Zohno with an initial web presence and not much more. I designed and built a simple 2-column template that let the founder create whatever pages he needed. Later I redesigned the original version because, quite frankly, the original site was terrible! The redesign helped improve the branding and positioning of the product which attracted more customers, so I was asked again to update the look and feel of the website.
Zohno makes software to make life easier for IT teams and system administrators. These individuals help manage a lot of the operations that help companies function. Without them, many critical systems and services would have to be handled directly by other teams. The founder of Zohno is also a sys admin and in the absence of other user research, we discussed the role in detail to help me understand more about these individuals and what they do.
What are their goals?
User provisioning deals with the internal processes that take place when an employee joins and leaves a company. IT teams and system administrators deal with a lot of different issues and get pulled in a lot of different directions. One moment, they might be diagnosing network issues, and the next, they have to figure out why someone's passwords aren't working. Getting everything done in a quick and efficient manner is their chief concern!
What are their pain points?
In a lot of companies, user provisioning is handled manually. Often times, system administrators will have to go in and directly edit the employee databases to create or decommission employee accounts. As you might expect, this is not ideal, especially when you consider that different services used by the company (like Exchange, Active Directory, Office, etc.) might need different things. Or rather, they might use the same information, but might need it in different ways. As you can see, manually editing database records is perhaps how things were done in the past, but it's not the way of the future!
Visual trends of the day were splashy intros with pages organized into various sections. I suppose it has always been that way, but the basic idea was to just follow along with that trend of clearly delineated panels.
As usual, I start by sketching and writing. This time, it was more about developing and refining the brand, and I wanted to give it a more modern presentation. When designing marketing and presentation sites it is important to approach it like 'storytelling'. How do you tell the story of a product?
As I worked my way through these sketches I was largely trying to define the purpose of each section. My thinking was that each section should add something meaningful to the explanation about why one might need Zohno. And by having meaningful content, the prospective customer can get a better sense of what the product is and why they need it, which goes much further than just knowing what it does.
A note about sketching:
I made these sketches on an iPad Pro with the Notes app. It's a simple way to draw and write ideas at the same time, and using iCloud sync, I can easily go from sketching to more focused work on the computer. I enjoy these kinds of flexible workflows and I'm always looking for new tools to enable me to practice creative work in interesting ways.
After noodling around with various ideas, I created a higher fidelity sketch (above) to try and define more of what it would need to convey. Each section should have a clearly defined purpose that is easy to understand. Otherwise, it should not be on the homepage. I established the following sections on the homepage:
The products — Z-Hire and Z-Term
Testimonials and proof
How it works
During this time, I also started looking into redesigning the company logo. I created the original logo a while back and I thought it would be good if the branding were included with the website redesign. I sketched out a bunch of different ideas. Not all of them are great, but that's the point of sketching, right? :)
I discussed different ideas with Zohno about the logo, but in the end, I decided that it was a bad idea to expand the scope of the website project by tossing in logo design as well. It was fun to dream about it, but I didn't want to delay the new site launch. Interestingly, the exploration into logo design helped me realize a nice visual concept that I could use on the website.
In the first redesign, I used the angles from the "Z" logo as a visual motif. It was kind of nice, and the subtle, suggestive nature of the graphic design to the brand felt like a good direction to go in, but I also wanted to change it up this time around. Borrowing ideas from the logo exploration, I realized that user provisioning is about interconnections. I mean, yes, the task for sys admins is creating or deleting accounts and things, but the nature of the work is very interconnected. The same data goes into all kinds of different accounts, in different databases, and it all has to be unified. This was the core concept for the new design.
Once I got agreement on the main idea, I sketched how the same visual style could be applied to the rest of the supporting pages. I also needed to create icons for these pages, so I sketched concepts for those as well.
With the underlying graphic design concept established, it was time to execute.
There were a series of different screens that needed to be made. The homepage was the main feature, but there were product pages, customer service and FAQs, an about page, and some more. So I started mocking things up!
I built the site using Webflow, and filled in many of the details once I started building things. This gave me the flexibility to move quickly through the design process and get a whole site done in shorter time than if I had "completed" mockups before building.
The homepage was designed to promote the product by starting with a simple statement of how Zohno makes "user provisioning easy." In the next section, people can click on the icons for more detailed information about each product, followed by qualifiers like who else is using it.
The "polygonal" lead graphic was meant to metaphorically refer to the interconnectedness of the user account data. When I drew it, I sketched out the network of lines first, and then used a vector tool to trace it. Then just assigned different color values based on a general color theme.
All Products and Services
This page highlights all products available from Zohno. The assumption is that people want more detailed information about the specific products and services available from Zohno and this is where we can add more of The Why to help people understand the value of these products.
If these mocks look incomplete, it's because they are! I left some of the details out of these mockups intentionally because I knew I would be building it and I could just fill in the details as I iterated over building the pages!
Z-Hire Product Page
This page is designed to promote Z-Hire, one of Zohno's software products. The main area has a custom form for purchasing the product, and scrolling down has all the information (and screenshots!) that explain what the product does. I considered moving the screenshots below the features and integrations, but I felt the top of the page was mostly text and working in some images might actually be helpful before reading details. Testimonials also are incredibly important to add here as qualifiers.
Z-Term Product Page
The same concept applies to this page as what I created for Z-Hire.
I developed a couple simple graphics for Z-Hire and Z-Term, the smaller square entering or leaving the larger square, meant to represent what these products do.
After doing the rough framing visually, I built everything using Webflow (it's a great tool if you've not used it). I was not only doing the design work, but Webflow also helps with the front-end development. In addition to being a better WYSIWYG editor, Webflow helps QA different viewports and test responsive layouts to help iterate and ship effective site designs. Despite all the different challenges with filling multiple roles, all the hard work paid off!
Since launching the new website, we’ve seen traffic grow and sales increase! We've added some big name companies as customers and things have looked quite good. Having an improved web presence has been a useful evangelism tool, especially for a product like this. General ad banners or Google ad campaigns don’t really work that well (we tried) since people don’t generally search for tools like this. So it is more important to develop a good presence where people can find you first. We have been slowly growing customers (enterprise buying cycles take time) but we are poised for continued growth and things are looking healthy!
From this project I learned that without a pretty significant budget, as a niche product, it's difficult for Zohno to find effective avenues for advertising. So leveraging the website as much as possible is the best way to get it started. As a result, improving Zohno’s web presence has indirectly improved our ability to market and promote the service.
Wholesale graphical changes like this are more indirectly responsible for growth because it is difficult to directly measure broad changes. Perhaps it would have been better to take a more iterative approach to launching a redesign, but as a small startup we didn't have time to launch small. After launching the new site and without changing our existing marketing strategy, we’ve landed more customers, including some big companies!
Going forward, I hope to be able to use tools like Webflow more often on different projects, maybe even try using it as a general design and page layout tool. I would still need other tools like Sketch or Illustrator to make icons and other graphics, but "designing with code" is a great way for designers to have ownership of a lot of front-end development!