RedBeacon Design Challenge

Note: This is my response to a design challenge from applying for an interaction design position at Redbeacon.com. While ultimately not a fit, discussions with their hiring manager show show me to be a better fit for a “user experience designer” role in their organization than an “interaction designer,” with the latter closer to screen details and coding for them. I publish my response to showcase my mindset and design process.

Overview

In pursuing a job opportunity to help RedBeacon take its services and apps beyond the point solution that it is, I submitted a design in response to the design challenge part of their application process. My design proposed to expand the app from a point solution of soliciting service professionals to being a home improvement project notebook, helping users keep track of the things they want to do and things that inspire them.

The Design Challenge

Challenge Requirements

• Cap time to 4-6 hours
• Review on web: http://www.redbeacon.com/my-home
• Download either our android or iphone app to get a baseline for our utility UI

Background story

A new user, unfamiliar with Redbeacon, hears about a new helpful home improvement app and downloads it from the Android or iPhone store. They open the app, go through the welcome tour, and then land on a dashboard page that should be both engaging and delightful.

Goal

Create a new user flow starting from this landing on the dashboard that captures users’ home improvement intentions and inspiration.

Keys

• Include a lightweight interaction allowing for rapid-fire project entry
• Project entry can include custom entries or a selection from recommendations
• Offer (not require) an option to request a service deliverables
• Short presentation or write up of your process
• Lo-fi sketches or wireframes
• Interactive prototype built with method of your choosing

Current System(s) Summary Description and Evaluation

The current app seems a very focused application. Users are given the opportunity to describe a project, prompted to provide certain information, then provided with a submit button to submit the project as a request.

Overall

Impression: The app feels very ballistic. Once you start, you can’t stop, and once you get to the end, the only option you have is to submit the project to RedBeacon and request service professionals. Filling out the app’s information prompts could take less than five minutes…but how often are users five minutes away from a decision to hire a professional?

This is the reason that the app feels like a point solution. The app only serves the function of collecting required information and sending it out. Users’ home improvement lifecycles involve a lot more than that, including lots of procrastination, considering doing it themselves, considering hiring professionals, collecting ideas by, for instance, browsing through a Home Depot.

To grow usefully beyond that point solution, I believe that the app will need to support more of these other activities and timescales.

Project Screen

Users fill out the necessary information by following a guided interview about their projects, once it has has been identified as a particular type of project. These questions and answers build a project screen with each question as a section. There is an unlabeled status bar at the bottom reporting the progress of the user through the project definition process.

The problems here are:

1. Users don’t know that bar on the bottom is a progress bar.
2. Users don’t know that all their answers info is on one long “page”.
3. Users don’t know what information they’ll need.
4. Users don’t know how to edit prior answers until they get to the bottom and click the X button to close or cancel the project.

Process Steps Represented in This Design Challenge

This document represents a snapshot of the state of the described RedBeacon design challenge in terms of the process outlined above and how it got there.

1. User research. While self-observation and introspection can often be suspect as a source of research, as a focused design challenge, I could only go on the information in the challenge and what I felt was likely true of the apps’ users. I was careful to note my own reactions to the app. In addition, observations with regard to social networking phenomena such as Pinterest point to people’s tendency to keep track of things as ideas, suggesting that people may collect ideas and solutions as they wander the world and maybe a Home Depot with their smartphones and other smart devices.
2. Market research. Knowing from my phone conversation with the RedBeacon hiring manager that one of the directions that RedBeacon is considering is growing their service and app beyond being a point solution.
3. Digesting the Data. I used the last two steps’ worth of input to create a set of Essential Use Cases to catalog the set of functionality that I felt a new user would be interested in and to understand their relationship with each other. In doing this, I went beyond what the app currently does to try to address how the app could support more of the life cycle of activity around users’ home improvement project needs. Artifacts: Essential use cases, content model, navigation model
4. Design. Where the rubber meets the road. Artifacts: content models, navigation models, sketches, Balsamiq mockups.

Documents and Artifacts From My UX Design Process

• Essential use cases
• Content model sketch

  

  Content model, envisioning what information and interactivity should be on which screens. Here, focused on the home screen.

  
  
• Navigation Model sketch

  

  Navigation model, showing workflows and how they might entail and traverse different screens.

  
  
• Design sketches of key screens:
  • Home screen and project detail screen

    

    Sketch of the home screen and project detail screen

    
    
• Clickable prototype (pdf), created with and exported from Balsamiq Mockups
• In-browser interactive prototypes, created and hosted via PopApp using images exported from Balsamiq Mockups [Added 7/9/2014]:
  • A redesigned feature: Starting a project by typing a name and entering data
  • The new feature: Start a project by taking a picture

Digesting the Data, and The Beginnings of Design

Essential use cases are a way to capture and describe an interaction between a system and a user in a way that is abstracted from any commitment to particular implementation details. They are, in essence, a representation of that interaction that free designers from surface constraints of the current design, allowing room for alternative design and implementation inspirations while keeping the key elements of the interaction in mind. I first came across them in the book, Software For Use, by Larry L. Constantine and Lucy A. D. Lockwood (from Amazon: paperback version, Kindle version).

Moving from introspection, conversations with the RedBeacon hiring manager, exploration and heuristic evaluation of the current-state app, I created an initial set of essential use cases to model the activity that I felt a redesigned and expanded app should support.

For the brevity of the current page, I have included them on a separate page:

• Essential Use Cases

Design

Artifacts for this section: content model sketches, navigation model sketches, and screen sketches.

Design Directions

To move beyond a point solution, an app will have to grow to support more of the activities that users do in their home improvement processes. Of particular concern with respect to the app are these areas of “growth”:

• Users are rarely within a five minute form-filling adventure away from calling in a professional. The process of defining a home improvement process and deciding to undertake it probably happens over a much longer timescale. At the least, the app should be flexible enough to support many timescales.
  • Therefore, submitting a request should not the sole goal of the app. The app should explicitly support saving projects, allowing users to have many projects in various stages of readiness and allowing them go back to them and add to them at any point.
• In support of the vision to grow the RedBeacon service beyond a point solution, I suggest a re-imagining of the app and service to be a Home Improvement Project “notepad”, where users can take notes on home improvement projects that they want to do or have done, immediately or in the future, fully formed ideas/projects in their head or otherwise.
  • The idea here is that with a list of such projects maintained, it will lower users’ resistance or activation energy required to hit that “Submit Request” button.
  • Users can record partial projects or whole projects and review them at their leisure without the pressure to submit it.
  • This means essentially building an app that serves as a To Do list for home improvement projects with the built-in function of “sending it off to professionals” to get it done.
  • An idea for a project can be inspired by thoughts, something users see, or products they run across. Offer users as many ways to start a project definition as is feasible. Let them start with a photo, video, product via bar code scan, or for later integration, a search through a Home Depot Catalog.
• The Project Detail page should communicate to users what they have done, what they need to do, and how they can edit the information. Presenting it more at-a-glance is the goal.
• “Soft-engagement”: Let users use as much of the functionality and explore the app as much as possible without requiring them to create an account. This allows them to come to discover, appreciate the value of your app, allowing them to build their own incentive to sign up for your service. The corollary is that there needs to be a value to that account beyond allowing them to get marketing emails from you. Also, sell the benefits at the point of commitment (i.e., how they benefit from creating an account or logging in or what happens when they submit a request):
  • Creating an account
  • Logging in
  • Submitting a request
• Support partial task completion. Especially as this is a mobile app, interruptions and distractions are the norm rather than the exception. This support should be clear to users.
  • Users’ data will never be at risk–as far as we are able to support that–whether they have created an account or logged in yet or not. At the least, it will be saved to their phone.
    • Branch thought: What about integration with other, complementary services? Storage to or importing pictures or videos or whatever from Dropbox, Evernote, Google Drive, MS Skydrive, etc.?

Design Phase Artifacts

Storyboarding the New Design

A clickthrough set of the proposed new design, matching the current functionality:

An interactive prototype of this feature: Start a project by typing a name and entering data [created 7/8/2014]

Reconceptualizing the app as a home improvement project notebook, the home screen provides more options.

Starting a new project by naming it…(matching existing app functionality)

Just like the existing app, as users start down the path of specifying project details as text and data (vs pictures, UPC codes, or Home Depot catalog entries).

Two design ideas for presentation of the form. Left, as expandable/collapsible sections. Right, hierarchically flattened, except for the Notes section).

Two options for data entry widgets, non-standard and standard.

The two versions of the project detail page, with data entered.

A clickthrough set of the new ability to start by taking or adding a picture (paralleling the process of starting by scanning a UPC code, or browsing via Home Depot catalog):

An interactive prototype of this feature: Start a project by taking a picture [created 7/8/2014]

Reconceptualizing the app as a home improvement project notebook, the home screen provides more options.

After tapping the camera button, users choose to add a new picture or video or choose from ones already on the device.

The camera screen for adding a new picture. Imported into this sequence from the then-current app.

Since users can start projects with attachments, users can attach them to and name a new project from here.

Two design ideas for presentation of the form. Left, as expandable/collapsible sections. Right, hierarchically flattened, except for the Notes section).

RedBeacon Home Improvement app v0 clickable prototype.pdf