One Month is an online school for entrepreneurs. One of their upcoming courses was going to teach students how to build a Yelp-style web app with Python and I was asked to help design the actual project. I worked with the course team to develop a "business" I'd been dying to put out in the world for awhile: a web app that lets freelancers know which coffee shops have the best working conditions. "Coffeed" was the quick name the instructor came up with for the course project and I ran with it.
Within one week I designed iterative pages for 4 phases of the project that students would go through: a splash page, landing page, blog, and a blog-style rating site. The time crunch proved fruitful, the designs and concept came to life and soon students were building their own mini-startup version of my project.
Art Direction, Photo Curation, Branding, & Web Design
Please do not replicate or steal any of this work. These belong to this client who paid good money for the time, energy, and strategy behind these designs. Not only is this a douchey thing to do, but you will be infringing on their copyrights, which is illegal.
The main audience for the actual product I designed would be freelancers looking for the best place near them to work. There are too many times you set up shop somewhere only to have your battery on the verge of death or tears streaming down your face from needing to pee so bad. Criteria includes ample seating, outlets, and bathrooms — just to name a few.
Sourcing and editing photos that evoked the feeling I wanted the site to have. Warm, dark, deep, rich colors — a more masculine look. The overall mood is dark and masculine, but with a focus on women as the main subjects.
We began compiling a short list of our favorite coffee shops to work from. I then scoured the web to find the best images of each location and curated them to all work together to provide a cohesive look. This is obviously difficult, since you're relying on other people's photos, but was necessary for the initial launch to help strengthen the look and feel of the brand.
Since people are coming to the site to find the best places to work from, I thought it was important to show images of the spaces so they could get a feel for the ambiance.
Since this was a project students were developing, I wanted to keep the type choices standard and free of cost. I chose to go with Verdana for headlines and Georgia for body copy. Georgia has that feminine touch that looks great on web and just happens to be one of my favorite typefaces.
Keeping things simple and using the photography as a guide, I chose to bring in a pop of deep gold as an accent color. This color is readable against white, and really pops against the darker colors of the photography.
The goal for the course was to take students through the motions of establishing and validating their business ideas with iterations and steps for each process. Below are the concepts I designed for each step.
Students begin their project by developing a splash page for their "business" that can capture emails. I designed this page using an impactful image and clear language — pretty proud of my copy writing on this one.
Students then move into developing a landing page for their "business." This gives our audience a bit more detail on the concept and why they should be pumped. I curated images to give the site a cohesive feel, and modified a purchased icon set to help save time — again, these were all designed within 5 days, so I needed to be smart about my time.
The third step requires students to build an MVP of their business. Since Yelp — when broken down to its most basic elements — is a blog, I designed a blog-style MVP that would transition nicely into the web app. This design is simple, yet elegant. You have the ability to search and learn a bit about each location.
In the final step, students take their blog and give it a boost by adding Google Maps, ratings, and stripping text down to criteria. They also add customer reviews for each shop. I designed the UI for this to be similar to that of Airbnb where you can see the map on the right with scrolling list on the left.