LEVELSTORY

Designing a product from concept to launch

OVERVIEW

After two extensive home remodels and seeing how miscommunication between clients, project managers, and the people doing the work often caused schedule and budget overruns, my husband and I used our backgrounds in software to build LevelStory—an online service and mobile app that keeps projects and businesses organized, on schedule, and on budget. 

 

To bring the idea to life, I moved between five areas to advance us towards a successful product launch.

  1. Research understanding the problem and empathizing.

  2. UX design prioritizing the direction, iterating, and course correcting.

  3. Visuals and branding creating a unified, beautiful experience.

  4. Mobile design streamlining the app for people on the go.

  5. Marketing providing education, help, and building a sales funnel.

ROLE

Co-founder

Director of Product Design

RESPONSIBILITIES

User Research 

Information Architecture

UX/UI Design

Info-graphics

Brand Strategy

Marketing

LINKS

LevelStory Demo App

Mobile App (Android)

Mobile App (IOS)

Research

Product research

I always start by gathering information to better understand the problem and to empathize with the people the product is for. In order to improve the client experience, we needed to help the people running the remodel industry. Targeting small to medium sized general contractors, I interviewed business owners, administrators, and employees. Descriptions of what the different roles did, their needs, the tools they were using and the problems they ran into allowed me to create personas to design for. I also evaluated construction project management software on the market to see what was missing from the available solutions. This informed our initial offering.

Usability testing

I conducted several usability studies including paper and click through prototypes. Business owners and administrators were brought in to test proof of concept, information architecture, and navigation.

 

Based on research, we were able to determine a starting scope for the minimal viable product (MVP). 

Usability_Testing_Joy.jpg

An administrator completes tasks and moves through a click through prototype.

Field research

We were fortunate to recruit a small number of businesses to test our MVP. I went on several office visits to observe how administrators used the software and how it was performing in relation to their expectations. Feedback was also collected via email, calls, and in-product messaging.

UX Design

Wireframing

Research helped set the direction for LevelStory. It was focused on the details of managing remodel projects. Iterations on the IA moved quickly into wireframing. This created a site map for the MVP and allowed us to refine user flows and track screens for development.

V1_Storyboard.png

Improving the Information Architecture (IA)

Feedback from our MVP validated the effectiveness of our initial core offering, but business owners and administrators needed more before they were willing to take the time and effort to move over their company. They wanted one product to manage their entire business. We needed to increase LevelStory's scope, but rather than overwhelm the existing structure, we decided to revise the information architecture and create a more extensible structure. The reworked IA took on a higher level team and business view.  Projects that had been sharply separated could now be rolled up into higher team level tasks, like making purchases across projects. Changes were made to the navigation, actions, filters, and views. 

Beta_IA.jpg

Getting more from the Navigation

The MVP navigation had been compressed to the top of the page for speed and visibility, but over time it had become overloaded. It also took valuable vertical real estate from the workspace. The release version looked at screen usage data and utilized the horizontal screen space by moving the navigation left and vertically. Navigation remained a fast way finder, but now the buttons included icons and the page showed more user data. This aided key tasks like map viewing, calendar scheduling, and dependency linking. The vertical placement also allowed for comfortable future growth.

Navigation_Closeup_Whitebg.jpg

Space for Actions

Like the navigation, actions in the MVP had been placed at the top half of the page for speed and visibility. Over time, an increase in actions created collisions with the search, sort, and filter which shared the same row. The release version took into account that the number of actions varied depending on user role permissions. Actions were given a dedicated space with labels that could float over content. Anchored to the right of the screen, the variability of actions was less distracting, labels could freely expand, and hit targets never moved.

actions.jpg

Refining Filters

The filters in the MVP floated over the page content. In the release version they were thoughtfully incorporated into the page so they did not obstruct content and were clearly connected to what they were filtering. The controls were also presented in a more standardized way.

Project filters transparent bg.png

Adding Views

Through the MVP, we learned that certain roles needed different views into the same data. For instance, workers were satisfied viewing tasks in a list, but project administrators had difficulty scheduling without a task dependencies map. The dependencies map took into account things such as dry time and order of operation. The release version included many new views that helped different roles excel at their jobs.

Task Dependencies transparent bg.png

Branding

Creating a unified visual language

Once the information architecture and wireframes were established, detailed screen mocks were produced and continuously reviewed. Page patterns, controls, and colors began to be standardized and collected for a LevelStory style guide. Brand elements such as the logo were finalized and added to the guide.

brandmark.png

Craftsman tools such as the carpenter's ruler and speed square influenced the shape of the brandmark.

UI guidelines.jpg

Colors, typography, controls, dialog boxes, error handling, and more were standardized.

Infographics

Designing the infographics for the project overview required walking a fine line between alerting administrators and not alarming homeowners.

IOS and Android Mobile Apps

Information Architecture

Many on-the-go LevelStory users exclusively use the mobile app. It mirrors the main app but focuses on streamlining the task list and logging hours and receipts. Similar to the main app, I started with the IA. Rather than create two separate UIs for IOS and Android, the stricter IOS guidelines were used and applied to the Android app. Company administrators didn’t want to have to teach their users and create training material for two slightly different version of the app.  Standardizing made transitioning to the mobile app much easier for our users.

MobileApp_InfoArch.png
Wireframes
MobileApp_Wireframes_transparent.png
Redlines
Final app

Marketing

Responsive marketing site

Beyond building a quality product, the LevelStory launch required many marketing components.  We needed to educate consumers and to create a sales funnel to help people over the hurdles to buy. A marketing site was created for consumer education, purchasing, product support, and as a login portal. Three versions of the site were created as we iterated on and refined the messaging. Surveys were used to gauge responses to messaging and visuals.

Transactional emails

To provide a consistent and professional feel to communications with users, templates were created for emails like account activation and password reset.

emails.jpg
Onboarding

A custom project within LevelStory was created so people could use the product itself for successful setup.

onboarding.jpg
Tradeshow materials

To introduce the product, we attended tradeshows. Flyers, brochures, a backdrop, posters, and teeshirts were all produced.

Setting up at the Puyallup Home Show 2019

Results

Successful launch in fall of 2018

After rigorous testing and revision through our MVP and beta program, LevelStory launched in fall of 2018. All of our beta customers successfully transitioned to active customers. Follow-up data from them showed that with LevelStory project management, businesses increased annual revenue by an average of 30% year over year. Customers also successfully consolidated most business functions onto the LevelStory platform with the mobile app playing a critical role in achieving near 100% adoption for employees to enter their hours and receipts. We plan to increase our marketing efforts in the coming year for greater customer acquisition.

30%

increase in annual revenue

2X

more projects per project manager

80%

fewer tools from consolidation

© 2019 by Sandy Wu