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.
An unofficial knowledge guide for U.S. Marines to help them pass their board exams. I developed this with a colleague for our company Fuzzy Logic Studio. We designed it to scale for multiple sizes on iOS, Android, and Kindle.
I reviewed the existing design and evaluated the navigation and user flow of the app. I sketched out several flow concepts and created an intuitive, yet interesting navigation experience. The result was a more user centered design that made it easy to access the info they wanted without confusion.
I created a couple sets of wireframes to detail a few interface options. Over the course of several meetings we narrowed in on one set that met our goals for functionality and usability. One challenge was creating an interface that was simple enough to execute on our own without a developer. As we worked to settle on a concept, this was a big factor in our decision for our interface.
With the new design of the app I wanted to update the look to feel more modern day military to establish it as a credible authority for a knowledge guide. I worked to create something that would appeal to the military target market, but most importantly something that would be enjoyable and intriguing for them to use. I created the navigation interface to be reminiscent of a digital crosshairs and we worked in some fun animation as the user interacts. The lingo section required a lot of custom icon graphics for an ever growing library of terms.