Eleanor Harding is a product developer and supergeek who has been called the swiss army knife of tech. She is originally from South Africa and has a background in both development and design, helping her win numerous hackathons including the prestigious TechCrunch Disrupt Hackathon and the Skype Codess hack for women in tech.

 

Before arriving in London, she created an indie game which won the Microsoft Imagine Cup and was the design engineer in the winning, all-female team in a competition to design and race scale F1 cars.

 

Eleanor is now the founder of a product development consultancy called Rigby/Rose where she spends her time doing what she loves, helping startups turn their big ideas into elegant products. In her spare time she looks for ways to enable people through technology, listens to a ridiculous number of audiobooks and networks furiously.

 

She’d also quite like to go to the moon.

 

CFG Top 25 under 25

 

 

 

 

 

 

 

nCube Home

1508

nCube-Home-03

nCube is the brain at your home’s heart.

This hub + app is an elegant IoT solution.

nCube enables you to control all your connected devices through one interface – for a truly smart home.

 

nCube-Home-14-2

+ Design Lead
+ Executed a Product Design revamp and rebrand
+ Crafted a natural language interface model for comfortable human-computer interaction
+ Created a design language for the software and hardware, working in collaboration with MAP Project Office

Project Overview

Instructions received:

“Over a 3 month period, take the app from beta to launch. Redesign the brand and make the app better. Improve the user experience.”

At this point, they have a functional skeleton of a product. I would need to create and apply a design language, improving the usability and user experience as I go.

Plan of action:

  1. Create a design language, then translate the language into these parts:
  2. App Design
    1. Evaluate the structure and UX of the app from the ground up. Break it down into all of its parts, simplify, streamline, improve the experience. Create a model, sketch screens, define Information Architecture. 
    2. Create a high-level version of the UI using the new language – a “looks like” prototype
    3. Roll out the new UI to the streamlined version of the app
  3. Website Design + Dev
    1. Design
    2. Development
  4. Physical Product Design
    1. Collaborate with product designers to ensure the language is translated
  5. Collateral Creation
    1. Business Cards, Posters, Banner, etc
  6. Bonus round: Kickstarter campaign

Problems I worked on:

  • Managing combination of tasks and expectations
  • Use the existing task management infrastructure to integrate smoothly with the rest of the team
  • Setting realistic deadlines and ensuring that tasks are completed on time and to a high degree of execution, in line with the overarching project goals

Results achieved:

  • Project completion within the 3 month window including 2 weeks spent on the kickstarter campaign
  • Took the product from beta to launch quality
  • The work I did over the 3 month period played a fundamental role in the success of the kickstarter campaign

Extra tasks to make the CEO’s life as easy as possible

  • Embrace and learn to use their existing task tracking system quickly
  • Do regular design reviews and check ins
  • Work closely with the developers from day one to get buy in to the new version of the product

 

1. Create a design language

Instructions received:

“Make everything look and work better, do a rebrand if you need to.”

Build on top of the existing work – take it to the next level. Introduce new design where appropriate, tie everything together seamlessly with the implementation of a unified language across the product ecosystem.

Existing brand:

logo-1a8305de652cae9c2a4a578b96128fa8f875201ca78b507bc40c2c139c010844

Screenshot 2015-09-08 11.58.17

The actions I took:

  • Deconstruct the brand and product into its form
    • What does it do?
      It controls the individual connected devices in your home to work together
    • How does it work?
      nCube sees each individual device as a module, then allows you to create a relationship between them
    • What does it represent?
      The brand represents a system of modular devices which interact with each other
  • Chose a core overarching concept: Cubes

nCube-Colours

The cubes are individual, modular items. This idea of cubes then evolved into a world in which they interact. This became the basis of the design language – smart, clean, chaotic, modular, individual, colourful.

Twitter-Cover

Screenshot 2015-09-09 14.40.51

IMG_0048

Cube brand exploration

The problems I worked on:

  • Creating a strong brand that can be translated across applications from an app to web to a physical product
  • How much of the original concept should we hold on to? Where is the line between change for good and change for the sake of change? I made these design decisions without emotion or attachment to my work – these decisions need to be made purely for the benefit of the product.

Results achieved:

  • A strong, simple, characteristic brand and accompanying design language

 

2. Translate the design language into the app

Instructions received:

As a subset of the original request, this is an implied instruction. I would need to take the initiative to define and complete the task. 

The actions I took:

  • Studied the current app
    • Printed out every screen of the app, laid them out and thought through the steps of the various user flows
    • IMG_5575
      • Where is the magic in this app? What’s the killer feature?
        The main value in this app is integration between devices. The secondary value is seamless control of many types of devices. 

        • How can the killer feature be improved?
          It should be easier to get devices to work together, the process for setup should be less complicated
        • How can I use design to encourage the use of this?
          Use natural language, fill in blanks – don’t have an empty state, let users customize instead of create
      • How can we reduce the number of clicks?
      • Where are the interactions long winded?
      • What can be streamlined?
      • Which themes can be pulled from looking at the app at this high level?

These themes emerged:

  1. Devices
  2. Device Automations
  3. Collections of devices

This emergence informed the decision making for the app structure. Instead of hiding these important sections behind walls, I chose to have them visible outright.

  • Sketch out a simplified, improved top level perspective of the IA
    • Work through the lower level details and user flows – how do they fit into the reshuffled IA
  • Create a few variations of the “Looks like” for some screens – how could this styling translate to a product in your hand?

nCube-Login-Mobile-2 login-1 device-controls-bulb Cubes-UI

  • Choose a direction based on insight around the “looks like” protoypes, then  apply this design thinking to all screens, states and modules in the model

The problems I worked on:

  • How can we balance the work that I’m proposing with what has already been done?
  • Where is the optimal level of efficiency in terms of achieving a great experience and having to re-write code unnecessarily
  • How much of an IA shift can be achieved in a 3 month period?
  • How can I improve the usability of the killer feature?
    • Create a natural language interaction model

Results achieved:

  • Simplified and redefined the IA in a way that worked with the current code architecture
  • Applied the new brand story to the components of the interface – usually each of these smart devices has an app of their own, and an interaction model of their own. The work done here was to create a unifying language across devices to form one intuitive interface. 

Devices in action GIF

  • Programming IoT devices to work together can get complicated quickly. I was faced with the problem of simplifying this interaction. How can you get a new user to understand how to get their devices to work together? I broke down the problem into a simple, understandable concept: “When something happens, tell my device(s) to do something smart”. With this idea, I created a natural language interaction model. It’s easy to use, since it’s written in English – it makes sense. It’s easy to learn, since the template is there from the beginning. Instead of creating content, the user is editing content and learning very quickly that they can extend this simple model to do much, much more.

cube-creation3

3. Translate the design language into the Website

Instructions received:

As a subset of the original request, this is an implied instruction. I would need to take the initiative to define and complete the task.

The actions I took:

  • Define and consider what the core CTA is? How will this change over time as we transition from pre-launch to kickstarter and beyond?
  • Sketch out the content of the site
  • Wireframe the site
  • Design the site v1
  • Design review + further design
  • Development

The problem I worked on:

  • How do I design and write the code for different versions of the site, even after I leave – pre-launch, kickstarter and launch?
  • How can I design and develop the site in the scope of the three month project where the app takes a priority seat – what is most efficient use of my time?

Results achieved:

  • Website designed and developed quickly, within my own strict time constraints

ncube-web-UI-4

4. Translate the design language into the physical product

Instructions received:

“Work with the physical product design team at MAP – make sure the product stays in line with the new product thinking”

The actions I took:

  • Attended the meetings
  • Weighed in on the design decisions
  • Advocated for the brand language

packaging

product

The problem I worked on:

  • Translating the core principles of the product into the physical design and packaging
  • Finding the balance between leading and following the design direction. While MAP was the lead on the physical product design (an excellent group of designers), it was it was my responsibility to ensure that there was cohesion in the nCube ecosystem. It was a great experience to work with them – not only for the physical product, but the overall design benefitted from the interactions with them.

Results achieved:

  • Worked well with MAP to create a physical product and packaging design that is inline with the brand story and design language

MAP_nCube_0010

MAP_nCube_001

5. Translate the design language into the collateral

 

Instructions received:

Ongoing small tasks – Create a set of business cards, Create a set of postcards, Create a banner

The actions I took:

  • Created an asset library of images and vector elements which could be arranged according to the design language and applied quickly into the specified size and format

The problem I worked on:

  • Lead time on these small tasks was usually incredibly short. Speed, accuracy and scalability were very important here

Results achieved:

  • A collection of collateral files which can be used again or replicated easily by someone else
  • Printed materials which tie into the product ecosystem

5. Bonus round: help out with the kickstarter campaign

Instructions received:

“Help out with the Kickstarter campaign however you can”

The actions I took:

  • Product Photography
  • Graphic Creation for the Campaign
  • Copywriting
  • Content Structure
  • Illustration and animation for the kickstarter video

rewards

The problem I worked on:

  • Time management, since this was in the last two weeks of my contract. It was a juggle of priorities to see how much I could get done

Results achieved:

  • A set of professional product photography shots

f66fbf6d1136f07bb108c3d47be24b3d_original

  • A delightful video with quirky animations to take it to the next level
  • A successful kickstarter campaign
  • Presentation of the product at London City Hall

0105313a2180612165bd80361ab110769b54e2c160

Leave a Comment

Your email address will not be published. Required fields are marked with *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>