Mobelisk, an up-and-comer in the enterprise mobility technology industry, needed to create an online presence that matched their sleek, new devices and helped to build a open-source developer community to allow early adopters to get their hands on these devices. The project's budget also allowed our team additional time to delve into user reasearch, creating a more holistic vision for the project.

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 final web build. 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.

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. I imagined a 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.