Proposed marketing website navigation

Marketing Site Navigation

Task

One of the first tasks I was given post graduation was to make an events page more discoverable on a marketing website. I was given complete and utter free reign of the website and let loose. Honestly, I had never done something like this before so I did what any other sane person would do and Googled.

How I went about it

I read a lot of articles on my commutes and came to the conclusion that a competitor analysis, analytic’s and card sorting would do the trick. So off I set about learning how to use Google Analytics. Thankfully they have an extensive support area and many a people have written lovely blogs on how to retrieve the information I needed. Now I had some data to make some informed decisions.

What I found out during research

Analytic’s revealed that the events page attracted around 700 page visits per week.

I also discovered that there were lots of pages that were only linked to within paragraph copy and suffered poor page views. Bounce rates were high and the user flows weren’t what we expected at all.

I started to track the analytic’s weekly for 10 key pages in a spreadsheet and plotted them on graphs which became my dashboard. Then I set about tweaking the navigation and watched the effect it had on the numbers.

What I did next

Using Microsoft Visio I mapped out the current navigational flow and reviewed the ease of getting to pages.

Then I conducted a card sorting exercise with various team members and displayed this on the wall so it would become a conversational piece for the company.

Current navigation

Current navigation

Proposed navigation

Proposed navigation

Now we had a solution for the navigation which made the events page more accessible as it was included in the global navigation and improved access to other pages. However, tweaking the navigation alone wouldn’t solve all the event page issues so I took another look at the customers journey on that page.

The events page itself did not make it clear which audience each event was aimed at. There was several child pages all with completely different branding and the copy across them all varied wildly.

I created some wire frames using Balsamiq and shared these with the team. I asked marketing to review the copy, front end to remove unnecessary pages and design to give the page a fresh look.

The result

Original navigation and events page

Navigation and events page May 2015

 

Improved navigation and events page

Navigation and events page August 2015

Proof is in the pudding – the event page climbed to 980 page views per week and we saw a dramatic increase in other key pages such as small businesses and customer happiness.

What I learnt

Analytics’s is key. Don’t start making decisions without consulting the numbers, but also remember that they are not gospel. Take a look at other influencing factors for example, the blog attracted around 1500 extra page views when the CEO posted.

My tip would be, know your numbers inside out and when there is a dip or increase, investigate. Find out why, what caused it, should we do more or less of this?

til next time
Hemi

Advertisements
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

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