Mobelisk

DISCOVERY
USER ANALYSIS
INTERFACE DESIGN

The Problem:
How does a technology company quickly show value to an industry that has relied heavily on paper records and has a "if it ain't broke, don't fix it" mentality? That was the question Mobelisk, an up-and-comer in the enterprise mobility technology industry approached the team with. They needed new marketing website to help showcase the product features and highlights of their new MoGo device and to help establish and nurture a developer community. That website needed to be coupled with a demo application to help showcase their device's data collecting features, its utility on the job site and its ease of use for the blue-collar workforces that are still heavily managed on pen and paper.

Defining the Project

Once the intial market and user research was finished and was discussed with Mobelisk, our team began work defining the scope of the website build and application concepts. This involved working closely with Mobelisk to develop a sitemap that would drive their users through the sales funnel that was created based on our research or build an online community of open-source application developers to drive application development and grassroots excitement. We also worked to define the functionality and heirarchy of content for the final site by working through wireframes. These are done to help visualize how individual pages will be laid-out and how users will be told a cohesive story throughout their time on the site. Creating wireframes also shows how specific content will contextually work within the whole of the site and ensures that users aren't blocked from completing their tasks.

The demo application brainstorming was a bit more involved, trying to create an abstract use case where the devices various features could be employed simply to allow users an instant understanding of how the device could benefit their companies workforce. After some initial meetings and brainstorming sessions, the concept for a simple fleet tracking software that could showcase climate conditions, route timing, gps information and task management was determined to be the demo application that would be created.

Click above to see an example of a high-level website user journey and a more complex series of red routes through a demo (fleet management) application.

Mapping the User Experience

Initially, the creation of high level workflows were made to showcase the different personas path to the website, finally ending with the request to demo a Mobelisk Device, but what would the device have on it in order to showcase power of the hardware? Mobelisk needed a simple example of how the device can be paired with their dashboard to create a unified experience. The simple device route management app that would allow the "fleet manager" testing out the device to create routes for the device (using the hardware's onboard GPS) to track the device's location while on the route, as well as collecting the variety of data that the hardware's sensors allowed. The application, though hardly revolutionary, was able to showcase the hardware's functionality and how it could benefit the variety of blue-collar workforces that still rely heavily on physical (paper) records.

Click above to see they style guide I developed for Mobelisk (left) and some examples of pattern library elements in relation to their marketing site (right)

Developing a Design System

Once the page layouts had been established using wireframing, our team shifted focus to building a solid design system that would allow the Mobelisk brand to have an extensible digital prescence. Basically, we wanted to make sure that their digital touchpoints could grow and evolve to constantly suit the changing needs of their technology startup. To that end, I was responsible for creating a simple style guide with elements that could be used to build their digital experience. Once the style guide had been established we took various elements of the wireframes and applied styling, building out pieces of layouts that could be used interchangably. These examples were contained within the simple pattern library, showcasing how different ideas could be conveyed in a variety of means.

Due to the robust nature of the final website product that was going to be provided, our team deemed it prudent to create a simple microsite that would provide users a way to sign-up for their email list, allow something to be showcased at technology tradeshows and to help Mobelisk look legitimate to potential corporate technology partners. I was responsible for the microsite's layout and design.