Tictail

Welcome to my solution to your design challenge. To make things easy, I made this page summarizing my thought process (here's a link to all my notes aka brain dump). Enjoy.

I was tasked with creating a universal remote app that controls all the tech in your home and an accompanying press release, being judged mainly on:

  • Define the problem
  • User's experience
  • Visual design
  • Ability to communicate benefits to user
 
tictail-logo.png
 

Bird's Eye View

I couldn't just create an app. I needed something behind it to inform decisions I'd ultimately make about the mission, the users and the problem I was solving. So I ended up creating a brand named simply, Connect. Connect is a company who offers a full suite of smart home products (with an app of course) that seamlessly connects your home. Here's a look at the process I followed:

  1. Define the core, human problem
  2. Define whose problem it is (user research)
  3. Word association
  4. Wireframing
  5. Visual design
 

Process

1. Defining the problem

I didn't want to just solve the problem on the surface, "People want their tech to be more seamlessly integrated", I wanted to get to the root of that. Why do they want it to be more integrated? Because they're spending too much time and energy trying to figure out how it works, time and energy they could be spending with friends, family or other hobbies. 

I spent a lot of time here and asked multiple people what they thought. Once I figure that out, I knew what the main benefit was and how to proceed. 


2. Defining the User

So whose problem is this? What frustrations do they have? Why would they want this product? I came up with 3 different users from 3 different user groups (Primary, Secondary, Tertiary). Since Connect is a company with a full suite of products for every stage of life, getting people (the Tertiary group) in the pipeline early would be crucial for our business to thrive down the line. So about those users...

I outlined who they are, what stage of life they're in and a scenario when they'd use the app. As these stories and situations unfolded, the ways they would interact with and flow through the app started becoming more clear.


3. Word Association

Words are central to who I am and how I work. I derive unique thoughts and ideas from words. In this case, it helped me solidify what kind of brand I was building, which would inform how I communicate the benefits and also what it would look like, visually. 

I made a list of words I thought related closely to the brand (and some that don't). These came in handy when writing the press release and designing the logo for the brand. 


4. Wireframing

Pen and paper (here are some bad pics of those).

Based on what I'd 'learned' from our users, I started figuring out what this app would look like and how they'd flow through it. What's the navigation like? How easy can I make things for them? This is when the idea of Scenes (previously Modes, but that sounds awful, more on this later), came about. An easy way for them to control every aspect of a particular atmosphere. We as humans have these different "modes" we enter and exit throughout our day, so why not mimic that behavior? 


5. Visual Design

What does the app look like? How do I appeal to the largest group of people? 

I worked with colors, type, icons, imagery, layout, all those good things. A bright green color, accompanied by a rounder typeface, Nunito, would make it friendly enough to appeal to the widest audience. A single color throughout the app lends the brand a sense of comfort, safety and consistency, ideas that are core to our brand.


The app itself is broken down into four main parts (see main screens here):

  1. Onboarding - when a user downloads the app for the first time and needs to sign up, what does that process look like?
    1. Five screens, with the primary goal of getting users to the main benefit of the app (connecting their home) as quickly as possible
  2. Devices - A main piece, and first item in the navigation. This is where a user would control Scenes and individual Devices.
    1. The main 'home' screen, a user can scroll through Scenes and Devices with the ability to add, enable/disable and favorite each (primary actions). 
    2. User will then have the ability to dive into: All Scenes, Single Scene, All Devices and Single Device screens
  3. Voice - Control your devices with your voice.
    1. Enables you to speak to your phone and control devices (much like an Amazon Echo for example)
  4. Favorites - Access to your favorite Scenes and devices. 
    1. All your favorites at your fingertips for quick access. Especially for one-handed use

 

Here are some screens for your viewing pleasure....