Travel website - Destination

Destination – A travel website

Hello, it’s me….

I’ve been working through this course on Springboard and it got me all fired up to design something again. I had this image in my head of a travel website (probably because I’ve been on holiday recently so these sites were fresh in my mind) and immediately sketched my idea.

Initial sketch for Destination

Admittedly it was all a bit hasty as I just wanted to get something out there so headed over to PowerPoint and got straight to it.

I knew I wanted to use a vertical navigation as earlier in the week I had been researching different navigations, and this layout had left an impression on me.

After researching elements and contributing to a style guide I knew I wanted to use the new field design where the labels are inside the box.

Here is what I came up with – it is by no means perfect, but I thought it would be good to share what I achieved in a couple of hours.

Home page - Destination

Home page - Flight Home page - Flight and Hotel
Home page - Hotel
Log in screen
Sign up Screen

Let me know what you think ūüôā I’d love to hear your¬†thoughts on how I can improve.

til next time
Hemi

Advertisements
Hemi Trenholm Banner

Tinkering with Photoshop

Hi again ūüôā

Bit of background – I have never really used Photoshop. In fact, the only thing I know how to do is re-colour things using the colour overlay option for blending layers. However, I do want to learn how to use the Adobe Suite as it seems to be one of those things the industry expects user experience personnel to be proficient in. Today I got tinkering with Photoshop and thought I’d share what I did.

I never intended to end up in Photoshop. Earlier in the week Moo sent an amazing sample of their new tailored business cards where I work and on a lazy Sunday afternoon I found myself browsing their site. I ended up downloading their Photoshop template and set about trying to design a card (which later I ditched in favour of a blog banner).

I started by colouring the background using the paint bucket tool and then created a new layer for some text. I love beautiful typography and get inspiration from Pintrest on a weekly basis, so it was only natural that I was going to grab a font from my board. I wanted an accent font that followed the brush script trend and eventually settled for Beacon. Then I tweaked with the rotation and spacing of the words until I was happy.

Work in progress

Background and accent font

Next I added another layer for my supporting text (another excuse for more typography hunting), and selected the simple Raleway. This is where I then had a ditsy moment, I couldn’t work out why I couldn’t see my text.

I had selected a light grey, which was¬†a different colour than what I had used for the background and positioned it so that it was the¬†top layer, but still I¬†couldn’t see it. I¬†ended up having to¬†ask my partner and he took a look and discovered that it was a simple problem caused by¬†lack of contrast. The grey I had selected was too similar to the background! After pumping up the contrast it was a simple job of aligning once again.

Work in progress

Adding the main font for header and body

That was all relatively simple but I was getting stuck in now so decided to try something else. I really love the gold foil effect at the moment (I blame Pintrest again for that) and hunted around on the net for a tutorial on how to make gold foil typography in Photoshop.

Work in progress - gold foil

Tweaking the gold foil effect

I stumbled across this gem from Dustin Lee and quickly began following his easy steps. However, I hit a stumbling block when my Filter Gallery was greyed out. After a quick Google I changed my colour mode from CMYK to RGB and I was away again.

After using the clipping mask, arranging my layers and final layout tweaks I ended up with this which I turned into a banner for one of my previous posts. I’m still not 100% sure about the placement of the secondary text and will probably tweak it a thousand times more but here it is for now…

Style Guide Banner

Style Guide Part One

I had great fun doing this and it’s definitely made me a lot less apprehensive to tinker around on Photoshop again. As you can see from the featured image I later went on to make a silver foil and am going to use my new skills to design my best friend’s bridal shower invites.

If you have any idea on how to use the Filter Gallery in CMYK mode or any other tips, leave me a comment below!

til next time
Hemi

Style Guide Banner

Consistency – decision to build a style guide

When I first started my post graduation role I stumbled around internal documents searching for a style guide. The closest I came to was a 2 year old PDF that contained typography ideals and a colour palette for the marketing site.

The problem

As I familiarised myself with the software I¬†would stumble across an array of button styling and inconsistent wording. For example ‘Download PDF’, ‘Download as PDF’, Download to PDF’ and ‘PDF’. It became very clear that there were no standards and each developer had built their own version every time.

Research part one

To confirm my suspicions, I went through the software and took screenshots of all the different components and documented them in a presentation. Below are a few of these to illustrate some findings.

The software had primary buttons of different sizes and all had different css/html.

Different primary buttons

So many blue primary buttons

The secondary buttons again suffered from an array of sizes and ambiguous wording. The image below also shows ‘save’ as a secondary button – was this not meant to be the key thing the user needed to do?

Different secondary buttons

50 shades of grey in all sizes for secondary buttons

Then there were destructive buttons that quite frankly looked like they were primary buttons. Their similar appearance and emphasis made the negative actions stand out too much.

Destructive buttons

Destructive buttons that look all too tempting

There were also some strange buttons that colour wise, didn’t fit with anything else. And the strange case of ‘available’ looking like a button but in actual fact was not clickable!

Traffic light buttons

Traffic light buttons and one that isn’t a button

Drop down selectors again showed further inconsistency…

Drop down selectors

Monochrome mess of selectors

And checkboxes and radio buttons also suffered the same fate, including my pet hate of a single row of radio buttons which makes it hard to distinguish rich radio is for which label.

checkbox and radio discrepancies

To the right, to the left

Research part 2

I was concerned that this was having a detrimental impact on our customers. Not only was wording and styling inconsistent, but so was the layout. On some pages buttons were left aligned, others right aligned. I conducted user testing and it soon became clear that every participant missed the buttons that were right aligned.

In user testing I also discovered that users took between 1 and 5 minutes to hover over icons, trying to decipher what they represented and which would carry out the action they wanted.

Different delete icons

Some of these aren’t even for delete…

Our users were left confused and nervous and I knew things needed to change.

Presenting findings

I presented my findings to the design team and they were shocked at the screen capture videos which showed users fumbling around. Especially since these users had accounting knowledge and had all used the software for 2 years plus. If our established users had this difficulty you can only image what it must be like for a new user.

Now the team¬†had acknowledged the problem and were on the same page it was time to brainstorm a solution.¬†After attending¬†Epic¬†and hearing Ben Scott‘s talk on life after style guides at the BBC the¬†design team was inspired to start their¬†own.

Style guide

We looked at numerous style guides and¬†saw Kiran Matthew‘s¬†as a starting point. Then we brainstormed what things we wanted to include in the guide.

  • Guide to Gridset
  • Typography overview
  • Colour palette
  • Icon usage
  • Components
Style guide components

Components for the style guide

Next we presented our idea to the product team and gathered requirements form them. It was then decided that we would create a working style guide inside the application with code snippets so that developers could copy and paste when needed, saving them time and giving them confidence that what they were building would not be detrimental to the user.

I aim to write a few posts on the style guide as I start to define rules for each of the components listed above, so that you can gain an insight into the decisions I made.
Let me know if you have any advice for building style guides in the comments!

til next time
Hemi

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