Storyboard Re-design

Transforming Icons

Nearly ending my time at University and thought I would share with you a little something from my final year project, HexaPlauqe, that I completed with Alex Hussey.

One of our deliverable’s was to create a poster that showcased our idea. We decided to create a storyboard to represent the user’s story with icons. This is how we went about it:

  1. I decided to keep it simple with ready-made icons from The Noun Project where you can download icons for free with Public Domain and Creative Commons licences.

    Icon Attribution's

    Icons used in this project sourced from The Noun Project

  2. Then we edited the images using Photoshop, adding a Color Overlay to them.
  3. The first icon was ‘new city’, which needed to convey wandering around a city and discovering places. Alex suggested a map based approach as seen below.

    Original New City

    Original New City Icon

  4. The next one to be created was ‘share your story’. Alex chose to overlay text on a building.

    Original Story

    Original Story Icon

  5. Then a ‘connect and explore’ icon which represented the user being able to read other people’s stories about the place which they had just written their story for.
    Original Explore

    Original Explore Icon

    Learning how to make curved lines in Photoshop turned out to be very challenging. In the end we settled for creating curves in Keynote and placing them as images in Photoshop.

  6. Next up was a ‘favorites’ icon where users can choose 6 places they have previously connected to, to re-populate their home page.

    Original Favourites

    Original Favorites Icon

  7. A ‘see your connections’ icon which demonstrates the home page functionality of the app.

    Original Connections

    Original Connections Icon

  8. Finally there was a ‘discover places’ icon. At this point I spoke up and voiced my design ideas and came up with this:
    Original Discover Places

    Original Discover Places Icon

    This icon was very different to the other 5. Having looked at them I thought the background blue hexagon was acting as a frame, rather than being part of the icon. I didn’t think this looked right, the little hexagons inside looked lost, so for the last icon, I scaled up the white hexagons and had them bleed.

  9. This then prompted Alex to ask for my help re-designing all the other icons so they matched this new style, including adding captions.
  10. For the ‘new city’ icon I decided to mimic a street view, depicting perspective with positioning and re-sizing of the white hexagons into an arrow.
    Original New City

    Original New City Icon

    In a New City

    After: In a New City Icon

  11. For the ‘share your story’ icon, Alex opted for a quick fix of just adding the caption, however, I still don’t like this one. It doesn’t ‘fit’ with the others because the inner hexagon is too uniform. By that I mean it makes the outer blue hexagon look like a border, rather than being part of the icon. Also, the text of the story doesn’t have an equivalent in any of the others, so again, looks odd.
    Original Story

    Original Story Icon

    Share Your Story

    After: Share Your Story Icon

    If I was to re-do this one I think it would look something like this:

    Share Your Story

    Future: Share Your Story Final Icon

    Here the inner hexagons bleed, filling the outer hexagon making it look all part of the same icon. Then I’ve opted for 3 images – the user, the building and a story being written. Hopefully this conveys the message and fits with the other designs. What do you think? How would you redesign it?

  12. This one reminds me of a football, but hey, I think it works a lot better! By re-sizing and re-positioning, the content now fills the outer hexagon rather than being dwarfed by it.
    Original Explore

    Original Explore Icon

    Connect and Explore

    After: Connect and Explore Icon

  13. This ‘favorites’ one just needed to be bigger to fill the space and have its overlay and caption added. The 50% blue overlay really helps to tone down the white, and once again make the content feel like it belongs to the outer blue hexagon. Also tweaked the rotation to stop it from becoming too uniform (hexagon inside hexagon), so now the content benefits from irregular spacing around the outer edge.
    Original Favourites

    Original Favorites Icon

    Choose Your Favourites

    After: Choose Your Favourites Icon

  14. This one I decided to re-arrange the positions of the hexagons to give a more organic feel which is more representative of the app’s home page.
    Original Connections

    Original Connections Icon

    See Your Connections

    After: See Your Connections Icon

  15. Since we added captions to the others we changed the action ‘buzz’ to ‘discover places’ so it fitted with the collection.
    Original Discover Places

    Original Discover Places Icon

    Discover a Place

    After: Discover a Place Icon

Here are the collections in full so you can see the transformations!

The Original 6

The Original 6

The Final 6 Filled

The Final 6

These were then used on our first draft poster which was changed many times so unfortunately these icons don’t appear on the end storyboard. However, I hope this post showed you how a little re-sizing and re-positioning can transform your designs in a matter of minutes! Let me know what you would have done differently 🙂

til next time
Hemi

Advertisements
Reading Short Stay Re-Design Revisited

Re-design: Reading Short Stay Revisited

Hiya,

So I posted my first re-design the other day and showed some fellow UX enthusiasts at uni in search of feedback. This post details their suggestions and my amendments I then made to the design.


Feedback

  • Remove the circles as bottom navigation is surplus to requirements
  • Change the blue text to gray-scale so it’s easier to read
  • Use Arial font for the main body text as it works better on web
  • Try changing the circular badges on images to triangles or banners
  • Make the logo smaller – it takes up a lot of space!
  • Un-format the text boxes in the form as that sort of stuff doesn’t work in all the browsers (never knew this! #LessonLearnt)
  • Add home page link to navigation bar
  • Consolidate the apartment pages into one page

A lot of this made perfect sense once someone had pointed it out to me and I also learnt some knew things about browser incompatibilities.


Finished product

Armed with feedback I tweaked the designs and this is how it now stands.

Home Page

Reading Short Stay Re-design Revisited: Home Page

Apartments page

Reading Short Stay Re-design Revisited: Apartments page

Testimonials page

Reading Short Stay Re-design Revisited: Testimonials page

Rates page

Reading Short Stay Re-design Revisited: Rates page

Contact us page

Reading Short Stay Re-design Revisited: Contact us page


It’s been great fun doing this re-design and I am definitely learning lots in the process! Follow me to keep up-to-date with my future work.

til next time
Hemi

Polaroid Designs

Re-design: Reading Short Stay

For my first punch at a re-design my friend chose the Reading Short Stay website. After I’d gotten over the initial shock of how basic this site looked I sat down to take a more objective look at it.


Basic analysis of current website

The biggest problem here is a lack of branding: logo, colour palette, background and use of typography. As I am no branding expert and it isn’t my main aim of this task I just quickly threw together a basic logo after trying out withoomph.com, took their existing blue to use as an accent colour since it connotes clear, fresh, airy, quiet, soothing and resting qualities all of which you’d expect from a home and selected a simple font: Edmondsans Regular. I then took inspiration for the diagonal lines to break up the clean white background from another website I stumbled across some time ago as simple patterns always work better than stock imagery.

Reading Short Stay Re-designed logo

My basic logo design for Reading Short Stay.

The next issues that needed addressing were mainly layout and alignment related. I personally am not a fan of the two column layout of images and then text – it’s very basic, outdated and doesn’t give a nice flow. In addition the proximity of the images isn’t utilized as they aren’t placed adjacent to the corresponding copy text (the picture of the garden is on the rates page rather than the garden apartment page).

Two Column Layout

The existing two column layout.

Alignment Issues

Alignment left to its own devices in the footer.

I also found it quite difficult to find the information I wanted, navigation wasn’t an issue it was more that things weren’t organised or grouped with similar things that i was anticipating as a user. With this in mind I re-jigged some text, created a testimonials page and did some light re-writing to use correct English.

So with those observations let’s look at how I started to transform the website.


Re-design in progress

I started with looking at some competitor websites and noticed that the majority rely on stunning interior shots to be the main focus, as I didn’t have that luxury as I was simply re-using their existing imagery I needed to come up with a cunning plan. I sketched some rough layouts in my notebook and then started taking chunks of information from the home page and placing it until I liked where it sat.

Initial layout sketches

Initial layout sketches for the re-design.

I always design in gray-scale first and focus on adding contrast by giving emphasis to top priority information. I quite liked the idea of Polaroid style for snapshots of key selling points and balanced it out with circles for things that needed to grab attention. Once the home page was to this basic stage I replicated the design for the other pages.

Here are some images of the in progress:

Home page in progress

Home page in progress

Testimonials page in progress

Testimonials page in progress

The next stage was to introduce the colour palette to bring more contrast and make things pop. Designing the Polaroids saw several possibilities with variations in outline thickness and shadows which can be seen below. Do you think I picked the best one? What would you have done?

Polaroid Designs

Polaroid Designs


The finished re-design

Ta-dah! Here are all the pages in the re-design, to see ‘before’ images visit the Reading Short Stay website.

Home Page

Reading Short Stay Re-design: Home Page

Garden Apartments Page

Reading Short Stay Re-design: Garden Apartments Page

Top floor apartments page

Reading Short Stay Re-design: Top floor apartments page

Testimonials page

Reading Short Stay Re-design: Testimonials page

Rates page

Reading Short Stay Re-design: Rates page

Contact us page

Reading Short Stay Re-design: Contact us page


So that was my first stab at a re-design and I’d love to hear what you think 🙂 Any suggestions, improvements, things you would have done differently – just comment below!

til next time
Hemi