Web Design Project #9: Urban Grounds


What:  Urban Grounds ‘Your Social City‘ web design

Date:  21 May 2014

Learning Outcome Statement (LOS):


Description:  Unlike the last design which upon my own admission was a tad rushed, I put a little bit more thought in to this design (an hour more). The magic came together when I was reminded of the upcoming Vivid Festival this Friday, I got into some inspired music (more on that below) and I had a great relaxing weekend. Yes, the planets aligned.

So what is this? This is social application based around your city. It is my take on what Facebook, Path, Circle and a slew other ought to do; create a simple app where users can find events and people they know in context (context to the event, location and time of day). Here’s how it works:

Events Page: Self explanatory really. The key here are the colourful yellow, red and blue dots which represent:

  • yellow – morning events
  • red – midday events
  • blue – evening events

In addition to this, the location of the dots is quite important – it denotes the part of the city where ‘the event‘ is. We don’t really have the concept of Down/Mid/Up-town here in Sydney, BUT I did categorise the app as such anyway:

Mobile Help Events


Events Help

Exceptions to the Event Page

One thing I did not do is make some dots bigger than others. In traditional bubble charts / scatter plots, the size of each dot shows the importance of the data point. In this case, if I increased the size of some dots, then it shows the size of the event. This can be done easily (but as mentioned, I didn’t do it in the above).

I also have an alternative screen for ‘The Events’ page which uses ‘date and time’. This screen looks good but it has some workflow issues (date / time) and it excludes my beloved colourful dots…and so it’s been excluded in the final work.

Mobile Events Vivid alt


Events alternative screen

Crowd Page

There are 2 toggles for the Crowd Page: Day and Night. After you select your time of day, you then filter your view by selecting either ‘People’ or ‘Spots’.

Selecting People presents the user with all available people in their address book, around the area, at that time of day.

Selecting Spots on the other hand, presents the user with different locations in the area, with the number of people (from their address book) around the area. Of course if you hit one of those red dots that show the number of people, you will be presented with those people in the area (not displayed here).

And in case you needed help, this should hopefully explain it:

Mobile Help Crowd


Crowd Help

Is there anything that I haven’t covered that requires further explanation?

Ah, and I did think about the desktop experience too:



That’s the Home page anyway.

Listened to this while creating this: Spotify Alternative and Indie stations. I am loving the song selection from

  • Foo Fighters (Everlong) no one really knew how talented Dave was until this
  • Of Monsters and Men (Little Talks) I keep singing ‘HEY’
  • Green Day (When I come around) Oldie but a goodie!
  • Grimes (Genesis) atmospheric and melodic. Simply gorgeous!
  • Mumford & Sons (I will wait for you) they’re getting quite a followinig
  • Vance Joy (Riptide) I should be tired of this song, but I’m still playing it.


As a consequence, I purchased Everlong, Genesis and When I come around (can’t believe I didn’t have it before). That’s right – I believe in paying the artist (and so should everyone).

What did I do immediately before creating this: I relaxed today and therefore was at ease when I put this together. In addition, I had a great weekend – a jam-packed Saturday and a loungy Sunday. I’ll put a post on this shortly.

Credits:  I haven’t really been browsing on any new websites or designs. Credit just goes to being in a relaxed state of mind.

Comment: I don’t have the a marketing list to implement something like Spot so that’s pretty much out of the running for this month’s implementation challenge. So the winner for this month’s challenge must come out of The Minimalist and this design. By far, this design is superior (imo).

BUT what I really want here is to launch this LIVE. I would need a partner though – there’s some heavy lifting to be performed with development.


LOS check:

  1. Ideation – yes, I believe so.
  2. Mobile first. Yes, pretty much. Creating mobile-first actually helps clean my mind and helps me focus on the must-have requirements.
  3. UX. I believe this is simple and intuitive without having the need for numerous Help pages.

Final Note

This is the end of my 3 month challenge. I will come up with something new next month after I assess my free time then against how long it took to create these challenges. I did feel that I improved steadily throughout this series (which really was my main goal).

At the end of June sometime, I am also planning on grabbing a MacBook Pro. My little laptop is running through limitations and I do want to pick up the design process with Adobe Photoshop and Illustrator or something comparable.

And oh, here’s your chance to vote:

Thanks for stopping by – and I’ll see you soon!


PC MMAAbout this project:  Initial blog located here and here’s how implemented last month’s winning design. Basically this is a series of designs – 3x a month, beginning March and ending in May. If I have my maths right, that’s 9 designs between March and May with the 3 best designs to be coded here.

And I’ll be storing my design collections here.

I’ll be back

– Terminator (1984)


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