cloudcloudcloud
Startup Metro Detroit
A Place to Discover Detroit’s Startups, VC Firms, and Accelerators
Personal Project
Website

Let’s set the record straight. While Detroit takes it fair share of blows from the media, it’s making great strides in economic development, specifically, the startup scene. This project is a labor of love, aimed squarely at highlighting the kick-ass startups making a name for themselves, right here in Metro Detroit. It’s a work in progress, but here’s a little taste of what to expect.

My Role:
Website UX/UI
Joining Forces
Two heads really are better than one
This project is a joint venture between Chris Samuels, a lifelong Detroiter and fellow product designer, and myself. We decided to collaborate on this project as we share an affinity for the city of Detroit. For my part I’m focusing on UX/UI (more on that below) while Chris expertly tends to the development portion. As with any true collaboration there are times when duties overlap, but we both welcome it, as it will ultimately make the project stronger.

So take a look around, then head over to Chris’ site to get his perspective and to learn more about how he’s developing it!
Getting Started
Fundamentally, we set out to create a site that is engaging which highlights the most meaningful startups in Detroit. We use a Google Doc where we keep lists of each company we plan on including. It contains basic details of each enterprise such as the year a company was founded, category, and brief company description written from our point of view—it’s important for this to be our own unique contribution to the revival of the city, even if in only a small way.
UX
The overall flow
The original idea for the site started with highlighting only startups in the Metro Detroit area but as we began peeling back the layers of the project and identifying use-cases, we thought it made more sense to open things up to include other facets of the industry, like accelerators and VC firms.

When navigating the site I wanted it to be easy to quickly view a variety of startups at the same time but also provide a way for users to effortlessly navigate from one company to the next as the site will grow and become a repository of all the wonderful businesses in the startup scene. I think of it as a running list, executed in a unique way. Below, check out a high-level over view of how the site lays outs:
UI
Approaching the look and feel
Based on the subject matter I opted to go with an isometric cityscape design as it suits the nature of the project best. The buildings and map on the home page are purposefully nondescript so that the site does a greater job representing not just Detroit, but other surrounding cities where many of the companies outlined on the site are headquartered.
product design
Constructing a compelling design
When a user clicks the right panel to browse through startups, VC firms, or accelerators, the buildings are set against a white background so they really stand out from the page. Each column is scrollable so the user can just browse one type of enterprise if desired. When the user hovers over a company, a nice animation happens showing a few additional details.

I kept the design on the darker side to create a stark contrast between other areas such as the white background behind the buildings on the menu drawer.

I used cooler tones and crisp icons and typography to ensure the design leans toward the contemporary side, which is of course synonymous with technology. Pink and teal were used to call attention to certain areas of interest or calls to action.
product design
The company details page
The left half of the page is used to list the company details while the right half of the page is used to show a map of where a company is located. Arrows at the top and bottom of the page allow the viewer to effortlessly navigate from page to page.

And while illustration and iconography are definitely skills I use when creating products design for client projects, in this case I decided to grab some existing isometric illustrations and customize them using a healthy dose of creative interpretation. Admittedly, this project is less of an exercise in illustration, and more about Detroit’s story.

Using isometric buildings/illustrations for each company also helps make everything look like a family of related content within the design. I considered using company logos, building photos, and other ideas but ultimately landed on an illustrative style.
product design
Crunchbase-style metrics on the left. The right shows a general interpretation of the building.
product design
product design
A page for us
The structure of the site is extremely simple by design. Along with giving viewers an easy way to progress from company to company, I wanted to make sure people knew the impetus for the site, and who created it.

The two tabs that reside on the left edge of the screen are omnipresent. They guide the user to the core function of the site (viewing startups, VC firms, or accelerators,) as well as cleanly display our interest in creating the site, and provide some basic contact details in case anyone wants to get in touch with either of us.
product design
Responsive designs
I implemented a few little changes here and there to help the responsive version match the desktop version. For example, the buildingscape on the front page is important in setting the tone of the design, but had to be treated in a slightly different way—partially obscured to assure ample room is dedicated to the logo and descriptive text.
View Prototype
Wrap-up
Combing through all the startups, VC firms, and accelerators in Detroit is no small task, as such, our work isn’t quite finished yet. But you can still get a glimpse of how it’s progressing by checking out the prototype above. We’re chipping away at things in between client projects and will be sure to update things as time permits!
01.
Head over to Chris' site for more
Head over to my friend Chris Samuels' site to check out what he has to offer.
Freelance Product Designer