Fitbit’s Dashboard Preview

The other weekend I got to travel to York to meet up with some of my girlfriends for a catch up and one of them had a Fitbit. Prior to this weekend I had not understood the desire to own one (my sister and Dad already one one each) but something changed….

During our 2 day trip Stacey would continuously update us on our number of steps achieved (we were walking a lot) and once we got to 10,000 we wanted to fight harder. Soon we were striving for 20,000. We felt a great sense of achievement with every milestone we met. It was uplifting, encouraging and felt damn good.

Since then I couldn’t stop thinking about how this little device had made me feel – I liked knowing I had achieved something and was gently contributing to improving my health. I asked Stacey about how she used it day to day and soon I discovered she was in competition with her other half and that was her key motivator.

Then it clicked – I could have this tiny little unobtrusive device that would encourage me to get up from my desk job and walk around AND most importantly I could beat Stacey, my sister and my Dad (plus several other friends that have now acquired one to join the competition).

So fast forward an Amazon Prime period and my Fitbit Alta arrives looking ever so stylish. I download the app, sync the Fitbit and land on the dashboard. And that is what I really want to talk about, you see, I was excited about the way they presented and encouraged me to try out their new feature.


At the top of the Dashboard I am presented with a bright eye catching pink banner – subtle enough not to get in the way, but present enough that I am intrigued.

Current Dashboard

Current Fitbit Dashboard 2016

So I click because I’m curious as to how they have ‘improved’ the dashboard (being UX and all) and wondering how they are going to persuade me to make the switch.

I am presented with a short tour which I can swipe through. It outlines all the benefits of this new dashboard.

Tutorial - dashboard preview

Tutorial – Introducing the new dashboard

Tutorial - daily stats

Tutorial – Daily stats are now represented in a circular format

I am not immediately sure why circles are an improvement on bars, but I guess I can see more on my screen without scrolling and it’s kind of just a design thing. It takes me a few seconds to figure out what the different colours for the circles are but overall I like it.

Tutorial - tiles

Tutorial – Useful stats each have their own tile

Ooooo tiles, bit like Windows Phone, I’m on board with this. The supporting copy states each one has a unique look so I’m guessing things will be easier to distinguish now and the added information seems relevant.

Tutorial - personalise dashboard

Tutorial – Make the dashboard personal

Ah great, I can edit. Perfect. Now I’ll be able to make the new dashboard fit me, so perhaps this will ease the change. At this point I’m feeling 80% positive about giving the new dashboard a go and then I swipe to the final screen…

Tutorial - how to stop previewing

Tutorial – How to stop previewing

… 100% I am changing. It’s SO easy to turn it off if I don’t like it, clear & simple instructions provided. So I take the plunge and hit ‘Check it out’.

New dashboard

The new Fitbit dashboard

Bosh, there is the new dashboard with it’s little tiles all ready and waiting for me. I have a flick through and decide that actually, I don’t even need to edit the ordering since the things I care most about I can see without scrolling. I love the little icons (although the calorie and minutes ones still baffle me) and the colours, subtle rounding etc. it feels friendly, approachable, like with each of my steps I’m feeding this little pet.

And I am hooked.


I loved this experience of trying a new feature – often its just a link at the bottom of the page or sometimes changes are forced upon you, but this Fitbit, I commend you. I really enjoyed the whole flow, improvements where clearly stated, I could see previews of what it would look like and I was given clear instructions on how to abort.

If only others followed Fitbit’s lead.

What do you think of the flow? Have you got any better ideas? Let me know in the comments below.

til next time
Hemi

p.s. see you the other side of 10,000 steps

Advertisements
Building a user experience experience
Video

Creative meet up – they let me talk

Back in October 2015 the lovely guys at Creative meet invited me down to Chichester to talk about experiences – my experience, your experience, your mum’s experience, the customers experience. Because what’s the point in making all these cool things if we aren’t making things easier?

You can watch my talk here – unfortunately the quality isn’t fantastic so here are the slides.

I had a great time sharing my experience and answering everyone’s questions. Looking forward to doing more talks in the future!

til next time
Hemi

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

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

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

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

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