Folyo case studies examine the design process behind collaborations between startups and Folyo designers, and are a great way to learn from real-world examples.
Can you briefly introduce the site and what it does?
Imagine an app where all the recommendations your network has ever made (or ever will make) are stored. That’s what Awessome is.
We all make recommendations all the time. We do this over email, text, twitter, fb etc. All this valuable information is lost to cyberspace. Awessome was built to save all this valuable information in one place. This way, the next time you want a recommendation all you would do is check the app. No more spending time searching on Google and sifting through a ton of sites or reaching out to your network.
The Color Palette
The first thing you notice with the site is the color scheme: it combines a very striking orangered with very muted greys. How did you come up with these colors? Did you try other variations as well?
Yes. I knew that there was going to be a ton of information that needed to be organized with color, so the grey & white backdrop with an accent color to highlight important areas was the focus.
I originally tried more of a muted teal color to bring some life into the app but what we settled on was a much cleaner color scheme which I think works well.
For color inspiration I will use other sites, posters, ads, paintings and other graphic design materials to come up with different color schemes, these are usually coming through on my moodboards.
I wanted the content (recommendations) to be the focus of the app and nothing else, hence the muted greys and pale background.
But since our product is completely dependent on user contribution, I wanted to pick a color that would be good for calls to actions. I left the choice of this accent color to Chris… and the orange he suggested looked great, so I went with it. We didn’t try other variations.
As a side-note, we’re in the process of launching a mobile app and actually focusing on that as our main platform. The orange didn’t really translate well to mobile, we tried a bunch of different variations on there and we finally settled on a bluish-sea-green and will be updating the web version you currently see to that color as well.
Chris, looking at your Dribbble profile, it seems like you like using this kind of orange in your work. Any specific reason? Is it “your” color?
Haha – ya I guess I’ve really been using alot of oranges in my web applications now that I look at my Dribbble profile. Like I said above I really like that you can use such a strong color like orange to draw the eye to important areas on a website or screen.
My favorite color really is cerulean blue, but as you know alot of the blues have been exploited in design by real large corporations – not that’s a bad thing, it’s just really overdone. I do like that orange works well with a whole myriad of warm and cool greys & browns.
The “Flat” Trend
Web design trend come and go, and are usually in opposition with one another. So after the artificial and candy-coated colors of Web 2.0, we got the hyper-realistic wave of iOS-inspired skeuomorphic design, which is itself giving way to the superclean, minimalist aesthetic championed by Microsoft’s new user interfaces.
Awessome seemed to be riding this wave of flatter, simpler design, so I asked them for their thoughts on the matter.
The design uses a very “flat” style, recently popularized by Google and the Metro UI. Did you have other inspirations? Do you think this is just a trend, or something that’s here to stay?
Early on in my design career (and still today) I was heavily influence by Swiss graphic design. I worked for a Swedish company that sourced their logos from Paul Rand and the art directors really stressed the “clean” aspect of design – lots of whitespace, great typography and grids to help lay it out.
It always stuck with me and I hope people see it in my work. Using color, good typography and some texture to bring across a clean user experience is what I strive to do. The first design we created for Awessome was much bolder in typography (League Gothic) and iconography but still had the flatness you mentioned, working with color and shape to guide the user.
At the time we started the second version Akshay had sent over an article in which a designer had redesigned the microsoft OS and did an amazing job with typography, icons and subtle color – I can’t think of the site at the moment but it was really well done.
Both Akshay and I agreed that this was something that we wanted to bring to Awessome and that what we had was a little too bold and clean enough.
I think the “flat” style is here to stay and it will hopefully gain more popularity. 3D and gradients have their place in web applications but if it doesn’t help the user experience than I think it is overdone. I’m not totally convinced that making a design look 3D on a flat screen really helps the user do a task or creates a better user expereince than flat color.
We actually didn’t really look at Google / Metro for our inspiration (we did play with the Metro layout for the mobile app which we ended up ditching).
So the way we did our designs was, I provided Chris with a document with what elements need to be on a page and ranked them by importance (an approach I picked up from Amir Khella whom you may be familiar with). I didn’t providing him with any wire-frames so I didn’t poison the well, so to speak. Chris provided some iterations based on these guidelines and this was the one that best fit our product so that’s how we chose it.
I think the Metro UI is here to stay… in different variations of course. It’s a great UI for particular design needs (ironically, I don’t think it’s good for the Windows 8 desktop).
Tiles and Layouts
Ever since Pinterest popularized David DeSandro’s Masonry layout, it seems designers everywhere have realized that you’re not constrained to displaying things in a list or grid.
But just because you can use a fancy technique doesn’t always mean you should. So I wanted to know more about the process behind Awessome’s layout.
The homepage evokes the famous Pinterest layout, except based around rows instead of columns. Did you choose a horizontal layout on purpose to mark your difference, or were there other reasons?
Pinterest has done a really great job in laying out the rows of photos within a boxed grid and then displaying content within that box, I don’t think anyone would disagree with that. We looked at that concept and tried to come up with a better way to show the recommendation that the user is making which is the gist of the app.
We also wanted the site to be responsive so there’s really only a few different ways of accomplishing that. Now one thing that I wanted to do to break away from this “Pinterest-style” layout was to break up the box size but still keep it in the grid. I think it gives the page a little more life and it also serves the purpose of showing some new content in a larger fashion at the top of the page.
As you scroll down the page, you get a little variety so that it doesn’t all look like the same size polaroid looking image. I also think it helps on the responsive side of things, if Pinterest was responsive than you would have these huge long scrolling boxes for just one piece of content.
Our product isn’t about pictures but about personal recommendations, and this is most importantly conveyed by the “text” that you see on the images on the recommendations.
So since the text (i.e. the recommendation) was the most important piece of our product we designed the grid layout around that.
On Pinterest the images are the product so the vertical works. For us the images only exist to support a recommendation.
There’s a lot of talk about “mobile first” these days (i.e. starting the design process with the mobile version of the site). Is that something you considered? Or are you focusing more on a native mobile app instead?
I’m a big fan of mobile first approach. Mainly because of it makes you focus only on what is absolutely crucial. Also it makes total sense in our case, since for an app like ours where local recommendations are a big part of our content, a mobile app is crucial.
So we strongly discussed going with mobile-first approach and would have ended up doing that but things didn’t work out with our mobile developer. We didn’t want to be in the situation of not have a developer ready to go once the app was designed so we decided to forgo that strategy and just build the web version first and do a native app later on.
We’re actually launching our native mobile app next month with a new design and so we’ll actually be updating the web app to reflect this. As such, in a month or so you’ll see an updated site as well!
Thoughts on Folyo
Lastly, can you share your thoughts on the experience of using Folyo?
Had a very good experience with Folyo. It was super easy to use. The biggest value proposition for me is the fact that it is a curated list of designers.
Dribbble or Behance or any of the other tons of great design sites can get overwhelming if you’re looking for a designer. The fact that Folyo is a “short-list” of good designers (so to speak) makes it immensely easy to find a good designer!
Thanks to both Akshay and Chris for taking part in this case study. I think Awessome is a very promising company, and I’m personally very curious to try out the mobile app as soon as it comes out!