Project 03: Get Local

– objective –
Design a website for a local business.

– research –

get_local_research

(And maybe this is becoming a trend, but) I ended up choosing to make a website for:

Morris Township’s Department of Public Works
To explain my decision, here’s my project brief:

For Project 03 – entitled “Get Local” – I chose to design a website for Morris Township’s Department of Public Works. Currently, a website exists for the Township of Morris, however, the pages for Dept. of Public Works is buried within all of the other pages, as the site map for the Township of Morris website is very extensive. Creating an independent website for Public Works will help the township’s residents easily find the information they need about sanitation and recycling, as well as contact information and directions to the center.

I was inspired by the cyclical process of recycling, and decided to use circles as a motif, in the style of a clean, minimal look. I wanted to present the information as straightforwardly as possible yet with a grace that is reminiscent of how our environment looks and feels when we take care of our towns and nature in general.

 

– brainstorming –

From these ideas, I started putting together two different mood boards/design directions, but ultimately, they ended up looking pretty similar because I was thinking too linearly:

1)

research_and_mood_boards2

2)

research_and_mood_boards3

I made a third mood board and really tried to go beyond the nature and water pictures:

3)

research_and_mood_boards4

**Also, to back-track a little bit, before I decided on the Department of Public Works, I was almost considering representing the entire Morris County Municipal Utilities Authority, but making a website for an entire county would’ve consisted of multiple disposal and recycling centers, and therefore, it loses it’s “local” quality.

Ok, let’s continue.



 

>FIRST DRAFTS

– site map –

As for the site map, here’s the first version I laid out:

li_get_local_site_map

– wireframe sketches –

013 001

– screens –

Then I designed two different sets of screens. For the 1st set, I drew inspiration from modern websites, and the 2nd set follows more of a traditional look.

set 1

This slideshow requires JavaScript.

set 2

This slideshow requires JavaScript.



 

> REVISED

– site map –

After some discussion, I decided to go with set 1 but there were problems with the site map. So after some revision, here’s the new site map:

final_project_web_sitemap_re

– screens –

With a new nav in mind, I revised the first set of designs, and here is the final version:



 

> PROTOTYPE

li_public_works_desktop_800w

Also, as a side project, to learn about responsive design (what happens when the screen gets smaller [or bigger]) we made apps to go with our websites. For the Public Works app, the mobile version loses, unfortunately, a lot of the pictures that the desktop version has and is almost strictly informational, but I really wanted to highlight the calling and emailing features because, well, cellphones are good for that.

Here’s a short demo:

li_public_works_app

Reflection — I really enjoyed this project, but it made me really wish I had more time to learn how to use the program, Principle. Overall, I just really wanted to design an appealing, user-friendly website that allows the township’s residents to quickly and easily access the information they need because the current existing website is cluttered and confusing at times. I understand that not many people would visit these governmental websites on a daily basis, but just in case they ever do, I want it to be a good experience!

 

_
Jessica Li. Get Local. 2017.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s