Graduation

Catch Up

I haven’t posted in a while so before I start bombarding this blog with content I wanted to explain where I’d been, so…

I graduated in June 2015 from the University of Kent with a 1st class honours degree in Computer Science with a Year in Industry. Since then I took a role at a cloud accounting software company as their sole UX designer.

Graduation

My family and I at graduation

Things got a little hectic being the only UX person at work and then I took on another role as Product Owner so things got twice as busy. It wasn’t all work and no play though. Admittedly I’ve been having fun creating houses in Minecraft, building the dream.

Then 2016 knocked on the door and I realised I had neglected this blog which was rather silly of me since I’ve learnt so much since taking up my first role since graduation.

So what I would love to do in my upcoming posts is share some of the things I’ve learnt in the last few months and hopefully it will give you an insight into my user experience journey.

til next time
Hemi

Advertisements

HexaPlaque

My final year project at university has been the subject of previous posts and today I wanted to share with you where we got to.

Background

I worked with Alex Hussey to provide an app based solution for the RSA Student Design Awards brief entitled ‘Heritage by Design.’ Our aim for the project was to create an attractive design for an app or system that would help people and communities better connect with and celebrate heritage. We conducted various interviews and research sessions with potential users in order to accurately identify what would be necessary to implement a system of this scope. The final design, HexaPlaque, allows users to share their stories with the world, and to see how they are connected to the world around them.

Fruits of our labour

HexaPlaque Storyboard

HexaPlaque Storyboard

Learn about HexaPlaque in 250 words.

View our poster we created for the university project fair which gives a high level view of our research and simplified storyboard of the final solution.

Then watch the story of HexaPlaque in PowerPoint to see our complete journey.

See the Design Evolution of a HexaPlaque – our alternative to the traditional blue plaque.

We got an award

Alex and I received the Kent Innovation and Enterprise Prize for Computing 2015 for HexaPlaque.

The award recognises the Final Year Undergraduate Student Project that is both innovative, and impactful to the range of external clients that the Kent Innovation and Enterprise Centre engage with.

The future

There was some initial interest from Canterbury council but at the moment Alex and I are concentrating on other adventures. However, we’d love to hear from you if you’re interested in our project HexaPlaque and it’s future.

til next time
Hemi

Card Sorting Participant J

Getting Down with Card Sorting

Thought I would share some exploratory research from my final year project, HexaPlauqe, that I completed with Alex Hussey.

Our brief from the RSA Student Design Awards was “Design a way for people and communities to better connect to and celebrate heritage”. As it was so broad we had a lot of options but were not sure what heritage meant to people.

We got talking about heritage vs. vintage and retro and decided to survey people to discover their viewpoints. Whilst designing the survey we thought about having a question where we presented the participant with a few photos of objects such as a war medal and ask them to categorise it as either heritage, vintage or retro. As we were deciding on objects I thought, why don’t we expand this? The idea for changing our research to Card Sorting was then born.

We began by selecting objects we associated with the different categories (Roman coin, war medal, space hopper), and those we thought were more subject to opinion due to authenticity issues (baking bowls, town bike, fashion) and created cards with an image of the object and a label.

We then divided a whiteboard into quadrants – one for each of the categories, heritage, vintage, retro and other – and asked a few test subjects to place the cards into what they deemed to be the most appropriate category.

However, after completing a couple of tests we reviewed our process and decided to remove the words from the cards so that people could make their own interpretation. We also adjusted some of the images to make them clearer for example fashion went from a general blogger’s picture of their outfit to one of Twiggy in the 60’s accompanied by an image of current designer Orla Kiely’s 60’s inspired outfits.

Blogger's Fashion

Before: Fashion Picture

Comparative Fashion

After: Fashion Picture

We also added objects for literature, film and historic architecture. The last change was to switch the ‘other’ category on the quadrants to ‘classic’ and allow participants to place objects that didn’t fit one of the four categories outside.

Card Sorting Objects

The Final Collection of Card Sorting Objects

Here are a few of photos of participants responses. I scribed everything participants said when placing objects and circled (in red) the object they most identified with and why.

Participant - Adele

Participant A – Masculine vs. Feminine

Participant - Chrystal

Participant C – Strict Vintage Criteria

Participant - Hannah

Participant H – Authenticity

This exercise was great as it gave us both quantitative and qualitative data. We were able to observe participants dilemmas and thought process which lead to insights such as masculine and femininity and the importance of authenticity. In addition, we could also analyse the frequency that each object appeared in a category.

For example, the town bike ended up in all four quadrants as many couldn’t decide if it was heritage, as it was first designed a long time ago, classic, as it has withstood the test of time, vintage, as it is now fashionable to own one, or simply retro.

Items like the floral fabric very much depended on people’s personal connections and experiences. Many placed this item in retro although questions of its authenticity were raised – some identified it as a modern Cath Kidston print, whereas others thought it may be original 70’s wallpaper.

Results

A Selection of Results

Through doing this Card Sorting exercise we learnt that many of the interpretations people have of these words are subjective, and there is not a definitive definition for any of them. People interpreted the categories based on the connection they had with the items and their feelings based on this. Many of those interviewed had their own specific ideas as to what constituted each category, but still had difficulty in placing all of the items.

I’m really glad we chose Card Sorting as it was incredibly insightful and inspired our final design to focus on personal connections with heritage. I think this is a really great research method when you’re presented with a broad term that needs defining, and was my favourite piece of research we carried out for the project. I urge you to give it a go, let me know how it turns out 🙂

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

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

If the user can't use it, it doesn't work

Hello World

Hello Hey Greetings Hi Howdy ‘Sup
Why hello there, it’s Hemi here, a girl from just north of London who once stumbled across a thing called user experience design and got hooked.

When I was younger I was always mystified why household items had a concoction of baffling symbols slapped over them leaving adults struggling to use them. Why on earth did we just accept it? We all have daily encounters with bad design which often leave us frustrated with a whole host of other negative feelings.

Growing up (to my 20’s so far) and exploring what is user experience design has left me aspiring to be a designer, someone who champions the user’s experience and always leaves them with a host of positive feelings. Now in my final year of university I wanted a place to showcase my projects whilst continuing to improve my skills. Brainstorming this evening left my desk looking like this and the creation of this site:

Brainstorm

Ideas for how to showcase my skills

I aim to post projects that fall into these categories to show my varied skill set and interests:

  • Re-designs
  • Briefs
  • Non-visual designs
  • Tech up’s
  • Concepts

Looking forward to sharing my ideas (working on a re-design at the moment) and hearing all your thoughts so please do leave comments or share your own re-designs. Now to leave you with one of my favorite staple UX quotes:

If the user can't use it, it doesn't work

If the user can’t use it, it doesn’t work and if they can’t find it, it doesn’t exist.

til next time
Hemi