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.
I was contacted by an app development company based in France called Binimo to help them create a better online presence and visually represent the apps they created on their site. They wanted to keep it simple and condense their information to 1 page.
I designed both a “light” and a “dark” option for them to choose from since they weren’t sure of the direction they wanted. I recommended the lighter version because it had a friendlier, more approachable feel. They also asked me to create imagery to help them visualize the apps they design with a more techy feel. I created a flow that leads the viewer down through the page presenting an overview of their company and ending with a call to action.