Happy Sonder Launch Day: Peep Our Website Redesign

Happy Sonder Launch Day: Peep Our Website Redesign

Hey and welcome to our brand new website — are you excited? We are! There’s a heap that goes into a website redesign and we thought it’d be cool to let you in on what goes into the process. We’ve gone through our process, step by step… sharing our favourite bits and pieces along the way, as well as the challenges.

Website Redesign Concept

The first website redesign meeting started with Tom, James, and Alex. The idea was that Tom and James could work out what they wanted by sitting down with Alex. It didn’t quite workout — turns out, it’s pretty different taking a turn on the other side of the table. So, Hayley, Alex, and Kia took charge. They locked Tom and James out of the meeting room for an afternoon so that they couldn’t cramp that sweet design process.

Our sales process always starts with a demo — where we mock up a homepage based on your brand, so you can get an idea of what we’d create for you. The designers decided that was the best approach. They created a demonstration of what the new Sonder website could look like.

Then, they presented the demo to Tom and James, got their feedback, and cracked on with the rest of the design.

Design Assets

Part of our website redesign process was redefining our design assets. Our logo hasn’t changed, but the rest of our design assets have. Kia took charge on the redesigning of our design assets. To get it done, she reckons the first thing she did was deconstruct the Sonder logo, she did this by drawing out familiar shapes from within the logo (so artsy). From there, she decided circles were an important part of our brand image. Where they fit well, Kia turned the remaining shapes from the logo into our icons and then made it so that each icon is backed by a circle — to keep it all consistent.

From the beginning of the process, we knew we wanted to animate the icons for the final product. Kia says this was a big thing she had to keep in mind. She says she had to think ahead about how we’d keep the movement consistent — if you scroll through the website, you’ll see with each icon, the red ball is the part to move. She also had to make sure the lines on each icon were consistent thicknesses.

First Draft

When we first started talking about rejigging Sonder’s brand messaging, Tom and James showed me some examples of copy they really liked. All the examples were really conversational and tongue-in-cheek. It seemed like a super fun idea (spoiler: it was) but I was kind of worried about the fine line between being written well and just being dumb.

Because design is our agency’s main focus, I wrote the Design & Prototyping page first, as my own kind of demo for Tom and James. They approved it and then I went on with the rest of the service pages.

First Design

After the designers had had their demo approved, Hayley started designing the rest of the website. Being a B2B agency, we get a decent chunk of traffic from desktop browsing. So, she completed the desktop prototype first. Because we chose a content-heavy style, Hayley needed to design the website around the copy — so we weren’t just shoving massive amounts of text in.

She kicked off with the pages that would carry the same style. Obviously the entire site should carry on in the same style… But where each service page will have the same structure as the last, the ‘About’ page is different from the ‘Our Work’ page and that page is different from our ‘Payment Plans’ page. So, it was useful to lay down those pages with similar structures, so she could define a style and a pattern.

You’ll notice the key design elements across our website are:

• Circles — in the background as well as the icons
• Drop shadows to give the elements more depth
• Overlaying images
• Fading colours in the section breaks

Icon Animations

Alex was our animation MVP. He animated every. single. icon. We can’t really be bothered counting but we reckon there’s around 100 icons. I don’t know if I totally get it, but Alex had a red hot crack at explaining to me how tedious this process was.

Basically, we have the three different colours: the REDNOS™, the black, and the white. These colours are across the section backgrounds and the content on top: circles, icons, or copy will change colour to contrast with this properly. So, if the background is white the copy is REDNOS™, if the background is REDNOS™, the copy is white, etc.

So, Alex had to animate each icon in the two different colour options, so we’d definitely have the correct icon where we need it.

Then, we needed to make sure the icons animated in response to each other and at the right times. This meant that he had to animate the icons as they’d be laid out on a phone, then again for tablet, and then again for desktop.

Revised Design & Copy

With the first draft of the copy and the basic design laid down, we went through the website in full again. We redefined some of the elements: like which colours were next to each other, how we’d lay out testimonials, and we went through some of the wording choices we didn’t like.

In our first design phase, the headings were pretty bland. A lot of the time, when users scroll through a website, they’ll just skim copy by taking in the headings and (if you’re lucky) the first sentence. So, we went back and made these bolder and a little more engaging.

From here, Hayley built out the rest of the pages and then moved on to making the design responsive. We had to make some changes to the design on mobile:

• The headings were way too big. If we left them as they were, they’d take up the entirety of the page. We changed these only on mobile for a better experience.
• A lot of the header copy was too heavy as well, so we edited this copy down a little bit.
• We decided to change the homepage design on mobile entirely, providing a better UX.

Finishing Touches

For the finishing touches, we added in all of Alex’s animations. Then we put in all of our fresh content from our mates over at ShareStory. We were lucky enough to have them shoot our header video, along with the images for the website.

Development

Our developers, Bart and Fadi were up next. Because I have no idea what developers do, I asked Bart to tell me a bit about the build. I expected him to tell me about how hard it was to code the menu so that it would gravitate to the user’s mouse or how complicated animating the icons to a scroll position was.

“It’s like music,” he said. “a symphony of elements coming together in all the right ways to produce something that combines good design and good web practices.

“It’s the composition of all these elements working together and keeping the performance of the page balanced and at the highest quality possible.”

What are we most chuffed with in our website redesign?

Hayley was the MVP in the website redesign process. She absolutely loved getting to mix and match the Sonder design assets that we’d set out with the past projects we’ve done for our ‘Our Work’ page.

Kia created our design assets, like our icons and circles. Her favourite part of the website is the animations as you scroll down the page: the icon animations and the bloating circles. She loves how fun it is to scroll through without taking away from the content on the page.

Alex helped out with conceptualising the site and animated all of the icons. His favourite part is the circles and how they expand as you scroll down the page.

My favourite page of copy is definitely the Design page. It was the first page I wrote and it flowed out super quickly — it was a lot of fun to write. My favourite thing about the design is how naturally we’ve included these examples of our work throughout every page.

Bart lead the development process. What he loves most about the new site is the animated icons and the colour breaks.

Fadi developed the side menu and some of the content pages — he loved that he got to use custom coding on the photo reel.

James’ favourite elements are the side menu and the colour breaks between sections. He loves that the colour breaks go against web design conventions but work so well.

Tom’s favourite part of the Sonder website is the payment plans page — classic salesman.

Originally published at https://sonder.com.au on September 30, 2019.