Behind the Scenes: Mosaic Security

Mindy Wagner, Former Design Director

Article Category: #Design & Content

Posted on

Viget loves working with start-ups, and we have a lot of experience helping navigate the unique challenges they face. When it comes to designing for start-ups, the challenges are often two-fold. First, there's typically no branding of any kind to draw inspiration from. Second, tight deadlines and lean budgets require that the design phase be fast and extremely efficient. The main goal is to get a quality product out the door. Design is important, but spending months developing an identity and style guide for a product without any users base or momentum just doesn't make sense.

Mosaic was one such case. They asked Viget to build an online tool to help simplify the process for comparing information security software packages. The first thing we did was hold a strategy session with Mosaic's CEO, an IT professional with a clear vision of the product he wanted to build and the audience he was creating it for. That's always a great start. From there the design, dev and UX teams collaborated with the Mosaic team to bring it from idea to live site.

It was a new product, so there wasn't any branding in place. Because it was primarily a development effort, there also wasn't much budget set aside for exploration so as part of the mood board phase we decided to include type treatments that could serve as the site's main identity. We played around with a number of fonts, finally settling on two that fit the mood board directions well and had the weight and character needed to serve as a stand-alone branding element.

Logo text treatment options

Mood boards are extremely helpful for this type of "start from scratch" project. They help us get design ideas out quickly without wasting time perfecting the details. The Mosaic mood boards explored two stylistic directions that came out of our early conversations with the client. The first was based on adjectives such as professional, trustworthy, and established.

Mood board

The second was more minimalist and conveyed the idea of no-frills utility while still being pleasant to look at.

Mood board

While the design team worked on mood boards, the UX team was busy fleshing out wireframes for key pages. When these wireframes were ready and we had the design feedback we needed from the mood boards, it was time to jump in to the final design. Because the Mosaic site was utilitarian in nature, we were able to keep the number of design comps down. We produced a total of three comps and used these designs as design guides for the rest of the buildout.

The most important page to get right was the comparison table, so this is where we started. The UX for the table was innovative and exciting. It required some careful thinking about how design could make the experience even more intuitive. Subtle details made a big difference in what at first glance looks like a very simple page.

Mosaic product page

Comparison table

Once that design was established, the other elements fell into place. Our focus was always on simplicity; the design had to support the content and user experience, making sure to highlight key actions without distracting the user from their goals.

Single Product Page

We're very happy with the end result. The project went smoothly, we had great collaboration from start to finish, and the Mosaic team was a pleasure to work with. You can read more about this engagement from the Project Manager's perspective here and see the live site at http://mosaicsecurity.com.

 

Related Articles