As part of the Moz Content alpha, I worked on the experience and art direction for the landing page of our product. Below, I outline the process and collaboration working on that project, the solution we implemented, the results of user testing and ultimately decisions we made for the future of the product.
SKETCHES | WIREFRAMES | MOOD BOARD | DESIGN COMPS | MOTION
The early product was built based on some interesting data we could get from the proprietary indexes Moz had as well as some other data streams the team had built. There were also some assumptions that were made about who our potential market was. Moz wanted to tap into its current SEO market to provide another valuable tool for their customers. Our user studies down the road would uncover some interesting facts that would change our approach and influence our product features.
Starting with a prototype
This is where we started with a working search bar in a staging environment. We knew we needed to bring some personality to the product as well as create a nice transition from the search to the results of the users query.
From this page which we called the "Omnibar", the user could run either a site audit or a content search (our two main features) depending on their entry of a url or keyword. In the alpha of the product, this page was the "launching point" for the user to take action within the product.
First I put together sketches showing the concept for desk elements animating out once the search action was prompted and put together a mood board to help communicate the concept to the creative team.
Using the mood board, I collaborated closely with our visual design team, providing direction on what our team wanted for this page. I also worked with our motion designer to animate the transition from input to results. It turned out pretty cool and became a delightful moment within the product.
The artwork designed by our creative team really captured the feel of the Moz brand and helped establish a personality for Moz Content. The design provided an interesting landing page for the user to try out the product during its alpha stage and we got a lot of good response to the page.
You can see the resulting animation by Josh Mortenson by clicking on the button below. It will take you to a codepen prototype where you can click on the search bar and click the analyze button for the animation to occur. The page would then transition to your results after the animation.
After we launched the alpha for the product, we did a series of user studies to help us learn more about our customer and how they were using what we had built. We received good feedback on the usability and design for the most part, but there were two really important learnings that affected our decisions going forward.
What we thought was a good approach creating one place for users to take action using one input ended up being detrimental to feature discovery. Some users didn't realize there was a second main feature. From this learning, we decided to move away from the "omnibar" we had created and separate the two features within the navigation. This helped with discovery and aligned with the separate workflows users had.
What to do with the data
While many users found the product useful, we found there were many who were overwhelmed by the resulting data and were asking what they should do next. Through deeper workflow studies down the road we would come to define three personas that helped validate this need and define a clear direction for the product.
What I Learned
I believe the product would have benefited from a lot more user studies up front. Product and research resources weren't engaged until the prototype was already well underway, but we could have skipped some missteps had more initial research been done. In the beginning, I saw the "omnibar" as a great approach, but as I did the user studies and saw how it didn't provide enough visibility to our two main features I realized the limitations that it had. I worked on some intermediate solutions providing more information about the features paired with the omnibar, but ultimately saw it as a better overall structure to move away from the design.
A redesign created for a high end audio equipment company. After listening to their goals for the site, I created a new experience focusing on a balance between shopping and learning for their customers. A few rounds of wireframes later, I crafted a new design to match the quality of their products.
After several in-depth discussions with the PS Audio team, I was able to narrow in on an experience specific to their demographic. They were transitioning to an e-commerce website and wanted a simple shopping experience that offered a comprehensive look at the products and educated the user about them.
I created several sets of wireframes detailing different experiences for the user. Over the course of several meetings we narrowed in on one set that met their goals for functionality and usability. One challenge was creating an easy interface for the user to build their own system. I created a step by step process for them to follow as well as graphics representing how a good system goes together.
I explored a few designs helping to update their look and create a matching environment for their high end audio equipment. After several rounds, they determined some new functionality and visuals they wanted and after a brief revisit to the scope of work, I was able to create a design that elevated their brand and presented their products well. I also worked with their team to provide art direction on product photography and did the photo retouching for the products shown on the site. Unfortunately, the project was put on hold before the site launch due to budget constraints. I hope to see the design implemented in the near future.
WHAT THEY THOUGHT
“David’s work as a graphic designer is exemplary of the very best there is. He’s easy to work with, extremely good at his craft and I would be happy working with David again, and again at any time.” – Paul McGowan, CEO – PS Audio