David P. O'Hara

DCI Investments

DCI Investments

 

Overview

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.

 

DELIVERABLES

SKETCHES  |  WIREFRAMES  |  MOOD BOARD  |  DESIGN COMPS  |  MOTION

 

The Problem

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.

omnibar_before.png

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.

 

Context

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. 

 

PROCESS

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 Solution

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.

 

Outcome

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.

 

FEATURE DISCOVERY

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.

OVERVIEW

A redesign for DCI’s website focusing on factual information and their investor users. The challenge with this project was meeting the strict regulations and creating an experience for the investors that didn’t leave other users in the dark. I also had the privilege to work on their tablet software which is updated daily with investor information for their clients. I am unable to show any of the work due to the proprietary nature, but the end result had great feedback from their clients and really improved the service they were able to offer.

 

USER EXPERIENCE

I worked closely with the team at DCI to have a total understanding of their users and the goals of the site. I flew out to their office in Boulder, CO. to meet with the team one on one to ensure a good understanding. I mapped out the different users and created an experience that met DCI’s goals.

 

USER INTERFACE

I created several wireframes translating the experience I created into a functional interface detailing the investor login portal and the pages to access different types of data. The result was a comprehensive interface that met the goals of DCI and provided a much improved experience for their investors.

DESIGN

The team at DCI wanted a site that would elevate their brand and present a modern feel, while complying with strict regulations. We worked together to create a design that compliments the information presented, while not overpowering it and meeting within the requirements. The resulting redesign has a nice clean feel and presents the brand in a professional manner.