— PROJECT NAME
HIVE Onboarding
— ROLE
Art Direction
UX UI Design
— DATE
2019
The purpose of onboarding screens is to introduce the products and the app.
Given that these are often the first set of screens with which users interact, they also set the users expectations of the app and hopefully give the user the ability to reimagine their home.
My goal was to present all features, products and benefits of Hive in an attractive and easily decodable way with a short, helpful and readable description.
DISCOVERY
What we do now: I started my research by taking a look at the initial designs that where created by Hive. I found the designs to be minimal and clean, however they felt out-dated and no longer relevant for Hive users and products.The description copy below the illustrations was short and easy to read however it failed to guide the user on how to use the app and did not promote Hive's new products.
Research best practices: The need for effective UX Onboarding is essential for your company’s/product reputation and growth. It was important to find valuable advice from companies that have tried and tested different approaches to achieve the best onboarding UX.
Competition Research: I researched what other products where doing (my research included IOT industry and whatever I considered as leading product on on boarding users eg. Dropbox, Evernote, IFTTT and more).
Competition Testing: 2 weeks of competition user testing of on boarding screens followed to understand user needs and find out what works and what not.
Defining User Flow: It was important to understand and document how and when the users will see these screens
Initial on boarding screens
DEFINE
Competition Testing: 2 weeks of competition user testing of on boarding screens followed to understand user needs and find out what works and what not. and to align with business needs.
Defining User Flow: It was important to understand and document how and when the users will see these screens and get the buy in from the PO and Business.
/background(fff)/1920x1118.jpeg?auto=webp)
First time user flow and installation journeys Flow
IDEATION
Mood boarding: Usually I would follow with a mood board to agree on the style and look and feel of the illustrations/style used for the on boarding. In this case I did not create any mood boards since the branding team had already given me a UI direction that I needed to follow according to Hives branding. But I would suggest to anyone doing something similar to use mood boards so that you can bring everyone expectations and views to the table and agree with what style to move fwd or to start testing different ones.
Sketching and Art boards: After gathering all the requirements that I needed from the stakeholders, I moved to the ideation stage, creating the first drafts in hand drawn sketches and then moving onto wireframes and then art boards.
Concept: The idea was based around inviting the user into his new smart home. With illustrations to display a different room around the house and highlight in each screen a new Hive product.
Hand drawn sketches initial ideas – mood boarding
PROTOTYPE AND TEST
Mood boarding: Usually I would follow with a mood board to agree on the style and look and feel of the illustrations/style used for the on boarding. In this case I did not create any mood boards since the branding team had already given me a UI direction that I needed to follow according to Hives branding. But I would suggest to anyone doing something similar to use mood boards so that you can bring everyone expectations and views to the table and agree with what style to move fwd or to start testing different ones.
Sketching, wireframing and copy: After gathering all the requirements that I needed from the stakeholders, I moved to the ideation stage, creating the first drafts in hand drawn sketches and then moving onto wireframes and then art boards. I find that this helps to present all features, products and benefits of Hive in an attractive and easily decodable way with a short, helpful and readable description. Once the first round of wireframe was tested we realised that copy needed to be improved for each market. Working closely with copy writers and doing farther test lead us to better copy that the customer could understand.
UI Designs: Using HIVES branding I designed illustrations that display a different room around the house and highlight in each screen a new Hive product. The contrast between the dark lines and the orange colour guided the user in discovering new products and features.
Animation: While designing the story I made sure my designs could follow a Parallax animation logic as I wanted to be able to tell stories and communicate emotions and ideas in a unique, easy-to-perceive way that both small children and adults can understand. Communicated my ideas to the stakeholders and developers through a detailed animated prototype.
INVITING THE USER INTO HIS NEW SMART HOME
The idea was based around inviting the user into his new smart home. The illustrations display a different room around the house and highlight in each screen a new Hive product. The contrast between the dark lines and the orange colour guided the user in discovering new products and features.
Animated prototype
LEARNINGS AND ITERATIONS
The next step was to user test the flow and the illustrations with a rapid prototype using InVision and gather all the necessary feedback and information for the UK market and for the US market. The results of the usability testing showed that the illustrations and screens worked well in both markets.
One of my findings during the usability testing was, that in the US, most properties are heated using a centralised ‘forced air’ system where heated air is blown by a fan up from a basement furnace through floor ducts. Or, for homes without a basement, it is blown through wall ducts and out through warm air vents in walls.
In the UK, however, homes tend to be heated by boilers. The boiler heats the water which then passes through pipework into the radiators.
So the feature "Hot water" does not exist, therefore we needed to change/adjust the copy and the illustrations to something that worked for both markets.
