Business

How I designed a website (this one) in 8 days

Workshops, ugly babies, and throwing grenades: an inside look at the design process of this website

What, why, and how?

Recently, we launched a new publication at Envato: the Envato blog. Since you’re reading this, I’m assuming you’re probably aware of it! I’ve been a UI Designer at Envato for 2 years, and I worked on the creation and design of this  site. For a recap of how we ran this project from a design perspective, read on.

This site was conceived to address a few issues:

  • To consolidate several content platforms into one ‘go-to’ destination, where our community can find inspiration and learn about topics they care about.
  • Making it easier to find content by improving our information architecture.
  • Previous blogs had become dated and didn’t represent our current design styles. We were now afforded an opportunity to more closely align with the recently redesigned Envato Tuts+ and Envato home page.

The team involved in designing this new blog included:

  • UI designer (me!)
  • Product Owner and SEO Specialist
  • Copywriter
  • WordPress Developer

Starting point: Workshops

To kick things off, we held a strategy workshop with a larger group, which gave everyone an opportunity to voice ideas and concerns while understanding the core problem we’re trying to solve. We want to spend our time making the right things for the right reasons, and if this isn’t actually going to solve our problem, we want to know before we make it, not after.

We emerged from the strategy workshop in agreeance that we should build a blog, and with more detail about what it should (and should not be).

Our next step was a smaller design workshop with myself, the product owner and copywriter. In this session, we generated personas, an information architecture, a bubble chart, user flows and several rough wireframes.

workshop-output

How do others do it?

Around this time I also started researching other blogs to understand how they structure their content and sort information to make it as easy as possible to absorb. I looked at Cnet, Mashable, Pitchfork, TheNextWeb and many more.

Don’t reinvent the wheel!

Sketch is our team’s UI design tool of choice, and it’s my daily workhorse. We have some good processes in place to maximise the number of reusable design assets. As a result, I had at my disposal a UI Kit with everything from typography and colours to individual elements, such as buttons, icons and tags.

This modular, repeatable way of working streamlines the visual design process, allowing me to think about the big picture, rather than what colour a button should be. It also acts as quality control, maintaining our branding and UI consistency. This ‘design system’ is a major focus for our design team.

ui-kit

Concurrently, the design team has been working on a responsive 12-column grid system, which we hope will serve as a scaffolding across all of our sites, with the blog becoming a test case and first implementation.

We’ve built it around a rule of 8, so that all typography, padding and margins are divisible by 8. (For more detail on that concept, I highly recommend this great article by Anthony Collurafici).

Head Down. Tail up.

So I’ve done my research, have a UI kit set up in Sketch and have wireframes to refer to, meaning it’s time to start creating higher-fidelity mock-ups. But hang on, there’s been a change of plan! We need to go live in time to coincide with Envato’s 10th birthday, which, when accounting for development time leaves a total of 8 work days to design this! I better get to work.

With time of the essence, and our developer in the U.S., it became important to have a plan for attacking things in order of importance. Some wouldn’t make the cut for version one, but would be put in a version two backlog, to go live in the (not too distant) future.

MVP

Day 1 – House of cards

One of the most prominent elements on this site are the article cards. They are prevalent throughout, and must fit well into the grid system. So naturally, this was one of the first parts of the design that I focused on, making sure to use real data and text so the layout doesn’t break. I always use my own name when one is needed, as it’s so damn long!

By the end of day one, I had implemented the grid system, the cards and the global header and footer. For the site header, I leaned heavily on the work we did for Envato Tuts+, with only small changes to accommodate different navigation and search functionality.

Day 2 – Collaborate through proximity

The other factor allowing me to iterate quickly was working so closely with Kate, the Product Owner. Envato has a great remote work culture, but sometimes, nothing beats sitting next to each other. For 2 weeks, Kate and I sat next to each other, constantly looking over each other’s shoulders and working out solutions on the fly.

Day 3 – Homepage, sweet homepage

Day three was spent referring to our wireframes while refining the home page design. We wanted this site to function as a place of inspiration that people will keep coming back to, so I conceptualised the home page to progress from broad appeal at the top, to more specific topics for exploration further down.

iterate

Day 4 – Ugly babies

Our design team is very conscious of sharing designs early to get valuable feedback. We call these designs our ‘ugly babies’. After feedback, I started getting into some of those details, such as search result sorting, pagination, text blocks and also some of the mobile layout concerns.

Day 5 – The serif is back in town

The article page was one of the last remaining. For this, I had two main concerns: to ensure ease of reading, and to incorporate related articles and marketplace items, without being too shouty.

To maximise legibility, I used a serif font for the body text, as studies have shown serif fonts to be easier to read in long passages. Secondly, I refined the layout of the meta information (title, summary, author and social sharing) as well as the side column of related items.

Day 6 – Getting on breakpoint

With all of the page layouts completed, I spent a day tweaking them to fit the medium breakpoint version of the design. This involved slightly narrowing the width of the grid and rearranging the elements to reflect how it would look on a tablet or small desktop or laptop screen. With the difference between this and the desktop version being minimal, I managed to complete it in under a day.

Day 7 – Going mobile

With the desktop and tablet versions of the design finished, I focused on refining the mobile layout by shifting blocks around to fit into one column.

breakpoints

Day 8 – Throwing grenades

With the design finished, I collated all the assets to hand over to the developer using three tools:

  • Dropbox to share all the images, icons, fonts and other assets.
  • inVision, synced with my Sketch file so that I can share with anyone for quick feedback.
  • Zeplin, which is a great Mac App that also syncs with my Sketch file. Zeplin will generate a URL allowing the developer to inspect the designs in the browser. Every part of the design is clickable, giving them the CSS styles, making development hand-over much easier!

What’s next?

Upon reflection, I think the tight deadline on this project helped, as it forced us to focus on the important stuff and have a clear plan. Accordingly, I think it was successful, but by no means is it finished. We have a backlog of features and functionality to implement (newsletter subscription, search functionality and tags), as well as focusing on the quality of the content we’re publishing on the site.

The most glaring aspect that didn’t work is the images. The modular nature of the design means they are large and get scaled for context. This slows the site down considerably and will be addressed soon.

Lastly, the high number of articles already published would suggest that our readers are getting value from the site. And if you’ve made it this far, hopefully you are, too. I look forward to following the performance of the site and I hope you keep an eye out for the coming design improvements, and exciting new articles from our design community!


About the Author Roscoe Tsalacopoulos

Roscoe is a Web/UI Designer at Envato.