Over the past month, I've been doing a course on design through DesignLab to sharpen up my skills. I've blogged before about some of the work I've done for this:

For the capstone project, I've been working on creating a new design for this website. This is something that I've been wanting to do for a while, and was one of my main goals in taking the course. The objectives of the work were twofold:

  • Creating unique branding for marissaww.com
  • Developing a layout for the landing page

Step 1: Wireframing

There were two user journeys that I wanted to highlight on the landing page:

  1. Learn about me - as this is my personal website, I wanted to use the page partly as a portfolio/CV for myself. The landing page should tell visitors a little about me and invite them to learn more.
  2. Read my blog - so far, my blog forms the main source of content for my website, and is probably the thing most people come to read. This should be prominently featured on the page.

Using these journeys, I built a very simple, grey box wireframe of the landing page based on the design I had created already for my blog post layout. The post layout used a small banner logo in the top left corner with my initials on it ("MWW"). For the landing page, I reimagined this as a higher-impact horizontal banner which enters in from the right side of the page and shows my full name.

Grey box wireframe

To check how successful I had been in conveying the two user journeys I identified, I set up a 5 Second Test on UsabilityHub and asked friends and family to give feedback. The test shows the wireframe to participants for 5 seconds, and then asks them some questions about it. Here is what I got from the feedback:

  • Most participants said the design was very clean and angular
  • Most participants noticed the blog, and said that the blog would be the first thing they would click on.

I was happy about the first point - yay! Clean and angular was the aesthetic that I wanted. However, the second point showed a problem in my design.

Most people noticed the blog and said they would click on this first, but I've placed it lower down the page. This creates a conflict between the user goals and the visual hierarchy. Based on the feedback, I decided to make the blog the primary feature of the page, with "learn about me" as a sub-journey.

Step 2: Branding

For the next step, I started to build up a palette and style to create my personal brand. Here are the initial adjectives for my brand that I wrote down when creating my blog post layout:

  • whimsical
  • fun
  • informative
  • interesting
  • useful
  • creative
  • tech
  • friendly
  • conversational

Building a palette

To get some inspiration, I started searching for images which I felt conveyed the adjectives I chose. I ended up hitting on the genre of retro futurism. To me, this perfectly embodies the mixture of creativity, tech, and whimsicality which I think makes up my blog. I was attracted to two types of images:

I created six palettes from different images that I liked. After playing around with them on some test designs, I further narrowed this down to two "Visions of the Future" palettes based on the posters for Mars and Enceladus. The Soviet propaganda images use a slightly duller palette which didn't translate as well to the look that I wanted. Mars uses a very bright, high-chroma palette of primary colours. Enceladus has a more moody palette of dark purples, greens, and blues.

I started by picking palettes off of the two images, and then selected complementary colours to create a wider set to choose from. After that I iterated through different palettes, trying them out on a very simplified design to see what worked together. The final palettes for each version are shown at the bottom.

Mars and Enceladus palettes

  • The Mars palette uses a high-contrast background of white and almost-black for the main body and text. For the logo, I've selected tints of the three primary colours featured on the poster. A higher-chroma version of the pink colour acts as the accent. This palette makes me think of a spaceship design, a bit worn after much travel.
  • The Enceladus palette is more moody and lower-contrast. It uses an off-white for the background with a very deep purple for the body text. Different shades of aqua green are used for the logo, with a bright purple for the accent. To me, this palette evokes the colours of space.

Creating style tiles

Once I had my two palettes, I created style tiles based on each. For my Enceladus palette, I used the banner logo and typefaces from my earlier blog post design (tile shown below left).

For Mars, I wanted to create something quite different. I started sketching out some ideas, using the geometric style of the Mars poster. I really liked some of the zig-zag forms, and that led to the idea of writing out MWW in triangles (tile shown below right).

Mars and Enceladus style tiles

Mars uses Comfortaa for the headings and Open Sans Light for the body text. (Sidenote - as part of this process, I discovered that I also really dislike Open Sans Regular, but am totally fine with all the other weights. Am I the only person that feels this way?)

I really liked both of these ideas, but in the end I decided to go with the Mars style. The colours are a bit brighter and more cheerful, which fits better with my aesthetic. Also, the Enceladus design is decidedly "spacey", whereas Mars feels more neutral. This seemed like it might lend itself better to different types of content.

Step 3: Wireframing (again)

With my style decided, I went back to update my original wireframe. I wasn't very happy with the layout (it felt quite boring), so I looked around at a lot of other sites for inspiration and sketched out ideas. I wasn't sure whether I wanted the MWW logo to be vertical or horizontal, so I created different layouts for each.

Eventually, I decided on a vertical stacked logo and created a hi-fi wireframe for the landing page using this.

First version of my landing page

I was reasonably happy with this, but there were still quite a few issues I needed to resolve:

  • There isn't enough whitespace, so it ends up feeling a little claustrophobic
  • The visual hierarchy is uncertain - the eye is drawn between the logo, the feature box on the left, and the blog title
  • The typefaces don't feel right. Comfortaa doesn't have significantly more visual weight than Open Sans, and the all-caps headlines aren't easy to read.

At this point, I started iterating through different improvements. Below is a screenshot of my workspace in Sketch - this only includes the wireframes for the Mars design alone. I made many more prototype ideas during this process!

Wireframing process

After a lot of hard work, here is what I have ended up with:

Final version of my landing page

Hooray, much better! So, what's changed?

  • More whitespace allows the design to breathe
  • Making the logo smaller and centring it allows it to shine without overshadowing the other elements
  • Headings have been switched to League Spartan. This is easier to read and makes the visual hierarchy clearer.

What's next?

I'm pretty happy with what I came up with, but I plan to continue working on it and making it even better. The next step is to start to build a theme using the design I created.

Throughout this process, I got a lot of great feedback and support from my course mentor Andrew Wilshere and my IRL design pal Emma Ahlqvist. A special thanks to both of you! I couldn't have made anything so nice without your help.

© 2018 by Marissa Warner-Wu. All rights reserved.

Proudly published with Ghost