Redesigning Brandsonvine
A quick summary
In November 2013 an old friend of mine, Michael Litman, had an interesting proposition. He wanted me to redesign his site in my spare time by the end of December.
Back then he had a very simple one page site with branded vine content but he wanted a larger site with a new look and feel, added pay gate functionality and a blog.
He was also starting to move his site into short-form video production, having collaborated with a few agencies, so wanted a more professional look for his growing business.
So it begins
At the time I was busy working on a four month contract so we started off emailing some ideas around and created a google doc with links to sites that we liked the look of and ones that were functionally similar. I added in links to sites that I thought were interesting, innovative or just plain beautiful. Between the two of us we worked out what we liked and what we didn’t.
Mike also wanted a new identity for Brandsonvine. He initially wanted something which incorporated the initials BOV but I was leaning towards something a little more iconic, something that could become easily recognisable on its own while still allowing his company’s name to be displayed in full.
After lots of sketching I eventually came up with a very simple concept.
Essentially most brands can be distilled into basic geometric shapes. A circle for Starbucks or an oval for Ford. Vine’s format is square so when taken as their base shapes you end up with, at a very literal level, shapes/brands that fit within squares/vines.
My initial concept for the logo was to have a series of six geometric shapes rotating once every second for six seconds, the same length as a vine, before stopping on the final logo — a triangle which matched the previously seen geometric shapes and which also represented a playhead on its side. The idea was for this to be used on the homepage as a looping gif or wherever else the logo was used online.
The animation was never fully realised in the final design due to costs and development time, it’s just a static logo at the moment, but hopefully we can go back to this and bring it to life one day.
Version one
Once the logo and colour palette were settled on we set to work on the site. Unsurprisingly a lot of the elements we liked fell into the very clear category of “on trend” with a large clear header area, clean minimal design, few colours and strong bold typography.
The initial idea was to have a short home page which would explain what Brandsonvine was in short slices of content when scrolling down. So for example we would mention the press that we’ve received at the top of the page (which led users onto the press page) who we were (leading to the about page) then finally our branded/featured showcase (leading to the showcase page where users could filter and collect vines).
From there we sketched out a basic home page and I went home and started on the design which would establish the look and feel for the site. After a weekend I had a solid design to show Mike, it was perhaps my second or third variant but the strongest of my designs.
I’m a firm believer in showing clients one design option after extensive research and discussions. Multiple designs, especially when on tight timeframes, dilute the feedback process. By having one well thought out, solid design, you can discuss it in detail with a client and go from there.
I always like to present my work in an annotated pdf as well, to allow a client to understand the reasons behind the design and to see links to other sites (where applicable) to get an idea of how the site will work. Design isn’t just about flat files, I like to send over interaction and movement examples whenever I can.
Thankfully Mike loved the initial look and feel. From there we continued to meet up when we could sketching out the other pages and working on them now and then for about a month or so.
When working in evenings and weekends it’s good to have fun, Mike and I are old friends so I liked to keep him amused with occasional photos of progress in evenings (likewise I like Halo, so for want of a better image I used a placeholder from Halo 4).
Once we were happy with the designs I decided to create a prototype of the site in Invision (which can still be accessed here). This was hugely beneficial in allowing us to get a sense of how the site flowed before we started any development work.
The prototype was also shown to potential developers and investors to allow them to get a better sense of what we were after within a limited budget which was a lot easier to get across then a series of flat psds.
All in the details
Around this time Mike started to look for a developer. He considered single developers to full on development companies, from London to Russia, weighing up the pros and cons of all of them. In the end he decided to outsource the build to Primal Skill based in Romania to keep costs down while his concept was being validated…little did he know that with the savings in cost he would require a much more hands on project management role, but that’s something for Mike to cover when he writes his own article.
All of my files were synced with Dropbox so the developers were always up to date with my latest files. I created redline docs to make their lives as easy as possible as well as some mobile examples so they could get a sense of how the grid readjusted on smaller devices. Time constraints didn’t allow me to design all the mobile pages but thankfully the developers understood the logic and reshuffling of elements and interpreted the remaining pages for me.
After the site was built our developers set up a staging link for a private beta for us to check and then came the usual, lengthily, process of feeding back on the smallest of design elements.
I’m a strong believer in pixel perfect (or for those who are pedantic and will talk about responsive design, design perfect). Different browsers and devices will interpret the site differently than others but if I set the vertical spacing of an element to 30px, there’s a reason it’s 30px.
38px is not 30px. 31px is not 30px.
There was a great article about this over at Google Ventures which I strongly agree with.
Again google docs were invaluable in allowing us to list items and track their status. As with most small budgets it was a constant battle on both sides to get everything working and looking correctly within our time frame.
Our developers had a lot to do in a short amount of time so I occasionally sent back tiny CSS edits to make the site align more to the original designs. Changing a horizontal spacing from 0.5em to a 0.3em, or a font weight from 600 to 400. I’m not a coder by any means but I tried to help out when I could while they worked on larger development issues.
Some things we thought worked at a prototype stage also didn’t translate to build very well. The sticky nav for example became quite chunky when logged in on smaller screens. With shortening development time we discussed having a back to top button in the footer, but on the showcase page we had an infinite scroll of vines so users never saw the footer (which is why we originally had the sticky nav). However to fix this we ended up adding a back to top anchor into the sticky share which was always on the right side of the page. This solved the problem and was quick to implement as we already had the sticky share coded.
In the end
I would be lying if I said everything ended up perfectly, the reality is time is money and we ran out of both.
Some things we thought worked at a prototype stage just didn’t translate to build. We didn’t have enough time to implement new functional changes.
There were a few nice design features we wanted to implement that had to be dropped due to the way vines were being pulled into the site. We didn’t have money to pay for the additional development time needed to find a workaround.
A lot of time and money was also spent aligning the initial build to the designs, the site worked but didn’t match the designs in a lot of areas with broken spacings and inconsistent font sizes etc.
In a lot of ways the project showed me much how you can get done with a friend who shares a similar passion and vision. Mike doesn’t know about design, but then I don’t know about vines/business, so we made a good team by listening and trusting each other.
In some ways I wish we had a close developer friend who was willing to help out on the site, to put the time and effort into it on nights and weekends like we did. Primal Skill did a good job on the build to match my designs, I can’t fault them there even if they thought I was “the most anal designer they’ve worked with in seven years”, but at the same time it’s a project to them. It’s chargeable. At some point the tweaks have to end. To me and Mike we’re already thinking of phase two, how we can continue to refine and develop the site as time goes on.
For a more detailed look at some of the design elements of Brandsonvine head over to www.gandalondon.com/brandsonvine.
Text and images are based on the final design from February 2014. You can see how it looks now at http://www.brandsonvine.com
