Develop Online

This project represents the online deliverables I created for Develop, a product I branded for the Minnesota Department of Human Services. Develop is a web-based service, offering training and quality improvement tools to support early learning and care professionals. After leading an internal team, as the only creative member, of government specialists through the branding and identity design process, I created the online look and feel for Develop. When branding Develop, I choose many neutral brand colors, specifically designed for use in web and screen. I created all the wireframes (some pictured here) for this project using MockFlow’s free WireFramePro tool. Then, I took each wireframe into Illustrator (which I prefer to Photoshop for its pixel preview and grid) to skin the designs. A Request for Proposal was created and the Registry, Inc. was hired on a “software as a service” baiss for Develop’s web-based app. I worked directly with web developers at New World Now (a subcontractor of the Registry, Inc) to skin Develop’s web app and program the landing page. We morphed the landing page concept into a fully-fledged website, using the DotNetNuke (DNN) content management system (CMS). This system utilizes “containers” for content, so I specifically designed on-brand graphics for this purpose (level, toolbox, banners, and lumber). My goal was to extend Develop’s unique, robust brand personality into the world-wide-web, further building audience trust and stakeholder buy-in. Develop enjoys over 2,000 unique hits every day, with consistently high usage on weekdays (especially during business hours but also in the evenings). You may visit Develop at http://developtoolmn.org. As you can see, that’s a long URL, and it’s the one area of this project that I would do definitely differently. In state government, we are often at the whim of choices made by those who are appointed by the sitting governor. My team made the recommendation to buy develop.org, but the powers that be wanted “tool” and “MN” incorporated into the URL as well. This, however, is an easy problem to live with! My long term dream for Develop online is to continue to serve as an example of government not only embracing branding, but also extending the brand into areas of popular use. That said, I would like to see Develop grow into social media marketing, especially on Facebook, Twitter, and Pinterest, which is where many of our target audience spends their free time. We are currently in the design phase of a mobile app for Develop. One of the features of Develop’s web-based app is professional development, in the form of accessing training (for providers (e.g.–students)) or promoting available training (for trainers), and then documenting the training one has completed. Based upon feedback from trainers wishing to complete roll-call more efficiently, we developed the concept of a mobile app to check participants into events by scanning their identification cards. We are almost complete with this work and I will post that project as soon as it is public! In 2014, Develop was nominated for the Governor’s Continuous Quality Improvement Awards.

The homepage of Develop – See the end result, live online at http://developtoolmn.org
The wireframe for the homepage of Develop. Designed to be a standalone webpage (due to lack of funds) this was a hit with the clients, who asked me to further develop the page into a robust landing site for the brand. The site was built on a responsive layout using the content management system (CMS) DotNetNuke (DNN). 
Mock-up for the homepage of Develop
Mock-up for an interior page on the Develop website
Mock-up for an interior page on the Develop website
Mock-up for an interior page on the Develop website
Mock-up for an interior accordion-style container and FAQ page on the Develop website
 
Evolution of the Develop web app
Screen shot of the old app design. – Develop visitors first see the homepage, as shown above. After logging in, the user accesses the Develop app, which is based on software by The Registry, Inc. The same software is used by multiple states for Professional Development Registry purposes. The only control I had in design of the web app for Develop was the background pattern, colors, logo, and footer design.
 
Wireframe of the old app design - I decided to start by examining the existing page layout, which I documented in wireframe format as a tool to assit in conveying changes.
 
This is a raw wireframe documenting a totally reimagined Develop web app. Due to the fact that the app software is used by many states, including Minnesota, a separate app would need to be developed in order to achieve these results. This redesign, however, is something Minnesota may consider in the future.
 
A wireframe documenting the re-skinning of the app - This wireframe also shows the use of a grid in the design, which was out of scope for the development phase of this project. Implementing a grid system in the design, however, is a change Minnesota may consider in future updates to the app.
 
Develop web app mock-up, based on the above wireframe. – This image further explains the notion of a design following a grid, as can be seen along the vertical light blue lines. This document was also used to convey changes needed for the re-skinning of the app.
 
The Develop web app. – See the end result, live online at http://developtoolmn.org/app
Develop officially launched on Thursday, May 15 2014!
- Check out the live CMS homepage here: http://developtoolmn.org 
- Check out the live web app here: http://developtoolmn.org/app
Back to Top