Interior design news feed

Game plan

The website model for this news feed idea is very simple. It’s basically a list of user-submitted links that can be upvoted and commented on. The result is a community curated list of the most loved interior design links on the internet each day.

To monetise the website, we’d introduce sponsored listings, product reviews and potentially sell affiliate products once the community was large enough. A blog would be created to help drive traffic to the website. We’d start creating content ourselves and then gradually attract guest contributors who wanted to market their own blogs and products. To build some buzz, we’d also create social marketing channels including Instagram, Facebook and Pinterest. The initial idea was captured in the rough sketch above.

Branding

It’s always tough coming up with a name for a website, luckily there aren’t many domain names left so you’ve just got to take what you can get. We used a great little tool called Lean Domain Search to come up with a suitable name with an available domain. The name needed to be short, easy to say and spell, and also needed to convey what the actual website was for. After throwing a bunch of ideas around, we combined the words “decor” and “feed” to come up with “Decofeed”.

Now comes the fun part, designing the logo. We wanted the logo to be a minimalist black and white design. I had a pretty good idea of the aesthetic we were after, so I started sketching out some ideas. I like to use a morphological matrix (seen in the above sketch) to generate ideas. It basically helps you mix and match different symbols more effectively. Then it’s just a matter of doodling around until you create something that makes sense. We really liked the idea of combining a floor plan with a love heart. Nothing says interior design like a floor plan, and the main premise of the website is liking or upvoting links so the heart symbol fits in well. The final logo design can be seen above, along with the floor plan symbol.

Sketching the interface

After doing a quick round of guerilla research, a.k.a. talking to friends and family, we confirmed that most of our users would be viewing our responsive website on their mobile phones during their down time. For this reason, I opted for a mobile-first design to ensure that the experience was optimised for mobile users. I often like to start with a mobile design as I find that the space constraints force you to keep things focussed and simple.

Speaking of simple, this website is basically a news feed with comments. Before putting pen to paper, I actually did quite a lot of research on UI patterns for news feeds and ordered lists. The feed needed to be quick and easy to scan and had to include an image thumbnail, a title, and links to upvote and comment. It also needed to be clear that the links in the feed were ordered based on the number of upvotes they received. Finally, users needed to be able to easily sort the feed to see the day’s most popular links, the latest links, and the all-time most popular links. The layout that felt most intuitive to me was to have a square thumbnail image on the left, the link title and details in the middle, and the upvote and comment links on the right. I quickly mocked up a few rough layout variations and tested them on friends before arriving at a suitable layout. Some of my initial sketches of the feed layout and comments screen can be seen above.

Pushing pixels

With such a design focussed user base, it was especially important for me to sweat the details on the visual design. After playing around in Sketch for a while, I started to build up a simple style guide to work from. The colour palette (seen above) is comprised of shades of grey only, allowing the image content to shine through. I tend to steer clear of using pure black as it can look a bit harsh. I created some simple rules to govern the use of the colours to keep things consistent and tidy.

The typography (seen above) needed to be easy to read while also looking beautiful, so I paired two of my favourite Google fonts together. I chose “Lora”, a serif, for the main content and paired it with “Open Sans”, a sans-serif, to help separate the content from the interface. Armed with my simple style guide and an eight pixel grid, I began to transform my sketches into pixels on the screen.

The website is actually really simple and is made up of two main screens, the news feed and the comments section, both seen above. The news feed sits on the home screen under a small header that introduces the website and allows new users to sign up. Clicking on a comment icon takes you to the comments screen where you can have your say and read other’s comments.

The blog was lots of fun to design as I love working with a minimalist aesthetic. Using the same design guidelines mentioned above, I created a few simple UI components that would make up the blog. The typography is the hero of this design, so I had to get the balance of readability and beauty just right. The blog designs for mobile can be seen above, and the desktop designs are showcased below.

Coding it up

I coded up the website while my friend focussed on growing our social following. I built the HTML/CSS components in isolation first, then integrated them with a news feed framework to speed up the process. We managed to build most of the website and gain some momentum on social media before the project eventually fizzled out due to other commitments. Even though this one ended up in the project graveyard, like many side projects do, it was great fun to work on and we learnt a lot in the process.