900dpi

900dpi responsive website

Summary

900dpi is a tool that makes it easy for designers and developers of all skill levels to implement a content managment system (CMS) using just HTML and CSS. 900dpi uses Dropbox syncing to allow users sync their HTML, CSS, and JS files from Dropbox directly to the 900dpi servers. It also allows them to mark certain HTML elements as "editable" so their clients can manage content easily. This project went through several iterations after it was launched in September, 2013. For this project I worked with developers Aaron Larner, Adam Perkins, and Josh Thomas.

Technologies

Challenges

The biggest challenge for this project was creating an interface that was easy to use for both technical users (designers and developers) and non-technical users (clients of the designers and developers).

Research

Our initial research for this project included determining whether the idea was viable for the market. We conducted interviews, surveys, and competitive market analyses. We found that there was very little competition in the space of cloud-based hosting/ CMS products, and that many designers and developers wanted a stripped down version of the traditional CMS's (Wordpress, Drupal, Joomla!) for simple, static websites that they were building.

Design Planning

From the research I determined that the best solution for the designers and developers who were implementing the CMS would be a traditional dashboard design where they could manage both the website design and the editors (clients) that would be changing content on the site.

For the clients, I found it would be best to remove the dashboard all together. Based on our research, one of the struggles non-technical users had with traditional CMS's is that the dashboard was too complicated and often times when they went to edit content, they ended up changing something completely different than what they had expected. Therefore, I decided to implement a "what you see is what you get" (WIZYWIG) editor. This would allow the clients to click on the content they wanted to edit directly from the website itself.

Visually, we wanted to the platform to be fun and inviting so users would be excited to use the platform, not stressed. I created a style tile to convey the feeling of the website. I used bright colors and created a mascot, Webster to add a sense of delight.

900dpi Style Tile

Mascot

900dpi Webster Mascot

Main Mascot, "Webster"

900dpi Webster Party Image 900dpi Webster Cavern Image

Variations of Webster for marketing purposes

Wireframes

900dpi Dashboard Wireframe

The dashboard page includes a list of all of a user's projects.

900dpi Edit Mode Wireframe

The edit page allows a user or client to edit content on the website. Blue outlines indicate that an element is editable.

Mockups

900dpi Dashboard Mockup

Version 1 of the Dashboard Design

900dpi Edit Mode Mockup

Version 1 of the Toolbox

900dpi Edit Mode Mockup

Version 1 of the Homepage Page

Testing

After the initial design and development for this project was implemented, we conducted several user testing sessions because we noticed there was a dropoff from a technical user signing up to adding their own content to Dropbox. The results from the test showed that our initial design of the dashboard made it unclear what the steps were to create a website, and our design of the WISYWIG interface was also difficult for users to understand.

As a result, we redesigned the dashboard to call out the most important actions that a technical and non-technical user could take and also added a walk through when a user created a new website. We also moved all of the global actions (such as account settings) to the top navigation of the dashboard because they were account-specific not project-specific and we moved all of the project-specific settings to inside the new toolbar.

Finally, we redesigned the navigation on the WIZYWIG editor so that it was more visible and easier to understand.

New Dashboard Design

900dpi Second Version: Dashboard Mockup

New dashboard page design.

900dpi Second Version: Edit Mode Mockup

New toolbar design.

900dpi Second Version: Edit Mode Mockup

New toolbar design with edit mode turned on.

900dpi Second Version: Settings Mockup

The new toolbar allows users to change settings specific to that project by clicking on "website settings."

900dpi Second Version: Homepage Mockup

New Homepage Design