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 subscription based website. I met with Tweet Archivist to discuss their goals and reworked the user experience for web, tablet and mobile. After working through several rounds of wireframes, I created a responsive visual design to update their look and improve usability for their subscribers.
I reviewed several emails from subscribers detailing their confusion on how to do things on the site and talked in depth with Tweet Archivist to rework their subscribers experience. After careful consideration and several iterations, I created a new flow that simplified the processes and made the service more intuitive.
I created many wireframes translating the experience I created into a functional interface across desktop, tablet and mobile platforms. I narrowed in on a few details and refined a bit through discussions with the team at Tweet Archivist. The result was a solid framework to support the visual design work to follow.
I explored several options for a new updated look for Tweet Archivist. I felt the design before was too dark and needed to feel more friendly and have some nice colors added to the graphics to liven up the site. I created a balance between the dark colors that were characteristic of the Tweet Archivist brand and a new light feel to brighten it up and make it more inviting. I am really happy with the resulting design.
WHAT THEY THOUGHT
“Top notch designer and awesome to work with. Love his style and process.” – Jim at Tweet Archivist