The Problem

What’s going on around me? Many of us turn to social media or local news websites to learn what’s going on in our communities, but wouldn’t it be so much better if they could go to one place to see it all? This responsive website concept aims to make your local life easier to wrap your brain around.

The idea came to me because I was constantly hopping between Twitter, Facebook, my favorite weather app, and my local newspaper’s website to find data. I thought to myself “I wish there was a way to see all this information based on my zip code.”

So I got to work building out the concept.

I began by reaching out to a variety of different locals I know, asking them a few questions in an informal survey. Those questions were:

1. When you start your day, what information to do you look at on your phone or computer before leaving the house?

   • I chose to lead with this question because I wanted an unfiltered response not based on the framework of the concept. No one told me they wanted weather included in Local Hub, for instance, but almost all of them check the weather when they begin their day.

2. Would you be interested in an app or website that collected local information based on your zip code?

3. What sort of information would you like to see aggregated?

Based on the participant’s responses, I chose to focus on the following categories for version 1 of the design:

• Weather

• Local News

• Local Government

• Social Trends

• Job Postings

Down the road I would also like to add:

• Events

• Restaurant Specials and Reviews

• Home Rentals

With my information gathered, I set to work designing the layout of the app. I personally design best when I’m moving shapes and boxes in real time, so I like to make my concepts directly in my prototyping software instead of on paper. I built Local Hub in my preferred prototyping tool, Adobe XD. I also enjoy creating my mockups this way because I can directly make them into interactive prototypes.

I decided to design Local Hub mobile first— with so much information I realized needed to start out by distilling it down to it’s bare essentials and expanding from there as I was able.

Creating the landing page was an interesting challenge because I needed to achieve the following:

• Display a large number of categories

• Show information within each category

• All while keeping the user’s cognitive load at a minimum

The solution I came up with was to create a UI Pattern that consisted of a series of rows which the user could horizontally scroll across. Each row contains a series of cards displaying information & a preview the user can click into further. By having elements that went off the screen, I used the Gestalt Principle of Closure to indicate the user to scroll.

When it came to designing the desktop view, I was very grateful I had taken a mobile first approach because I had already done the hard work of distilling the content down to it’s bare essentials, and now I got to do the fun work of adding it back in as needed. For the desktop view I decided to take a two column approach with the different categories of information placed into containers. With the added space I took the opportunity to resize the tiles I’d used in the mobile design to create move visually interesting display which highlights the most popular content.

When moving into subpages I decided to keep the two column approach to maintain consistency and make the end user’s experience as frictionless as possible. The column on the left contains a feed of related information - articles, job postings, etc. and the column on the right contains the content the user has chosen to view.

Once I was pleased with the design of the wireframes it was time to move into the visual design of the app. With the basic structure in place, I started with the color scheme and font choices. I wanted to find a scheme that was friendly without feeling informal, and so I chose a medium-dark blue and a lighter yellow-orange as the main colors from which to work. On the font side of things, I chose two fonts that have a similar energy. I wanted a look that was lively without feeling informal. I decided to go with san-serif fonts to keep a modern flair.

I initially considered using orange as the primary color in the website, but ultimately decided it felt a bit too gaudy as the main color. Using blue as the main color was the way to go for a modern feel that didn’t try too hard.

When designing the horizontal rows I initially had the cards floating independently with a title nearby. Although the look felt modern, I wanted to make the navigation clearer since there’s such a large amount of information to display. I decided to use the principle of common region, and I put each section into a container. The container was also useful for increasing the responsive nature of the design because it can easily resize, offering a horizontal scroll on mobile devices, or a vertical one on desktops. When finalizing the visual design of the containers I considered the principle of Figure-Ground and used subtle drop shadows to raise the cards, emphasizing their importance.