APPINTERACT

Appinteract is a new, simple, DIY mobile application generation tool for small business customers. Once users provide necessary information, they can create apps without coding, and directly publish apps in mainstream app store. During the summer of 2015, I joined Posh Technologies as a UX design intern to work on this beta version of this wonderful product. On September 2015, AppInteract was successfully launched in September 2015. This case study summarizes my works for AI project.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of Posh Technologies.

My Role

I was part of their Experience Design and Research Team. There are one more designer and two researchers in our team. I fully participated in all stages of release cycles including meeting with stakeholders, conducting field research, ideation, user testings, iteration, as well as presenting works to gain buy-in from executives, senior stakeholders, and other Posh teams.

The works I used here are done by myself if I don't give credits. Implementation details are subject to change since I’m not at Posh anymore.

The Goal

Connect with on-the-go customers

Posh Technologies are a mobile transformation company enabling business productivity for mid-size and small-size enterprises. Over years, Posh discovered a strong demand for small business to build the connection with the on-the-go customers. AppInteract aims to bring small business owners more connected customers, and thus more sales.

The Challenge

SUPPORT VARIOUS GOALS
Different business has different desired app. Therefore, the in-app features we provided should have enough diversity and flexibility to support their various business goal. What's more, the app creation flow we designed should let users find out what they can do.

GET USERS ON BOARD
As a SaaS solution, a simple and intuitive user flow is critical for its survival. We need to minimalize the user frustration and streamline the user flow so that users are willing to sign up and make payment.

The Approach

Module Architecture

The concept we already had in the beginning for enabling users to customize their apps is to adopt module architecture. Module architecture means that we needed to deconstruct current UX patterns on a component level called mobile modules, and allow users to select modules they need. We were tasked to construct the mobile module library.

Another early architectural decision was that it would consist of a set-up wizard, a dashboard, and the landing pages. Artificial Intelligence will be used to grab information from their existing web presence to generate an initial app. Therefore, we were also tasked to develop this conceptual model: learn, preview and edit.

Lean UX in Agile

Since the whole project moved in Scrum, our team opted for a lean approach which emphasized rapid sketching, prototyping, user feedback and design mockups.

  • Focus on one sprint's worth of design work: There's no more "Design Phase" that can last for weeks or months to get the right design and think about the entire experience. To understand and solve this issue, I focused on one sprint's worth of design work rather than design too far ahead of the development team.
  • Meet the changing needs and meet the need of scaling: Agile is iterative. There will be another sprint and it will provide another opportunity to refine and build on the work currently being implemented. Coming up with a solution that takes scalability into account and keeping myself sensitive about ever changing need of end users and expectation of stakeholders is key for final success.
The discovery

Key Insights

Key insights that defined the beta version of product were gathered through socializing our design as early as possible to small business and internal candidates. The research was conducted in both field and remote settings.

feature1

Business Types make difference in goals

Small business from different industry has quite different understanding and expectation for the app they want to generate.

feature2

Show me what you can do

Clarity on how AppInteract would help users' business is highly expected including what their apps would be like and why it's beneficial.

feature3

Template preferred

Templates with diverse packages of functional modules and navigation styles were favored because they were thought to saved time.

feature3

Features rather than modules

The in-app features should directly convey its use case rather than appear as general functional modules that could only be understandable for IT professionals.

feature3

Payment Sensitivity

Inappropriate occurrence of payment would generate user frustrations.

The Design

Get Started quickly

When opening Appinteract, users can quickly get started by entering the basic info of her business and existing web presence, and then preview the app that consists preset functions for her business.

Do some Basic tweak

By choosing among several different navigation templates and color styles, users can tweak their app before signing up.

Play the app

The app in the preview is playable. Users are able to know what the generated app can do, how it will potentially help their business, and also what need to be changed further.

Login to dashboard

After previewing, users will be invited to create account so they can
enter the dashboard to edit the app further.

Edit the app functionality

In the dashboard, users can edit the functionality of their app by adding or removing modules in the app.
These modules are customized for small business.

Payment, and then publish

Before publishing, users need to subscribe a plan to continue.

Manage the app after publishing

After publishing, users are able to let their customers download their app, and manage their app directly in the dashboard.
For each module, there will be an admin interface in the dashboard.

The start of the journey

mobile module library

The biggest challenge I faced throught this project was moving forward my design, whilst the other parts of the project were still in the state of chaos. This challenge was especially hard when we started to construct the mobile module library. Since the in-app features are the direct benefit we could offer that can connect users' business with on-the-go customers, and keep them come back for more, these module design projects while small would make a big impact.

User Story

As for a new product, defining one or two user cases is greatly helpful for us to focus our effort. Through closely viewing websites of local business and discussion about the product positioning, we built up two initial use stories.

Later on, we iterated and expanded the user story after we had access to target users. But these initial user stories really guide design decisions, priorities, and create empathy amongst our team in the early stage.

With the help of use story, I was able to identify the use case of each module, and then finished the interaction design accordingly. Here are the considerations I put for shipping the modules:

  • Small business (Users): how can modules support their business?
  • End customers (Users): how to make modules intuitive and user-friendly?
  • Engineer: how can the modules fit into the plan for beta version launch?
  • System: What's the role of the modules in the whole system?
 

 

The Challenging Calendar Module

The most challenging module I worked on is the calendar module. And I would like to take calendar as an example to show the approach how I design a module.

 

 
 

PROCESS

  • Analyze use case
  • Analyze user flow
  • Ideation
  • Concept 1
  • Concept 2
  • Narrow down/ prioritize
  • Paper Prototype
  • Ideation
  • High fidelity
 

 

 

Second part of the journey

Setup wizard Redesign

An intuitive and engaging creation process would be the key to the success of our service. We started the process by planning and conducting user testings. Our primary goal is that:

  • Guide users to create an app that is helpful for their business goal;
  • Make the process engaging and minimalize user frustration.

Initial Screenshot

Test Process

As part of this process (and all of our projects), we had a very specific way of testing the solutions. We repeatedly test solutions as we build them, as part of our iterative, co-design process with our stakeholders. In this case, We conducted moderated, 60 minutes long usability tests with eight small business owners in total from different industries. We gathered and incorporated their feedback into the next stage of development, so we consistently knew we were on the right track.

How we made the decision

It was worth a mention that the decisions in response to the findings were not merely made by design team. We presented our findings to other teams and also got them involved in the decision-making. Some of our findings were about pricing, content strategy, technical support waw also discussed so that a company-wide alignment was created.

One of the most controversial decision was about whether to put payment page before publishing or after publishing. Therefore, we created 2 variations in the flow to conduct A/B test. We found that the participants were confused by seeing payment page after publishing their apps, and they complained about the flow. That's why we finally put payment page before publishing.

New Screen Flow

 
 
 
 
Final part of the journey

Dashboard

My next individual challenge is to design the functionality part in dashboard including editing app and managing app. Concept development through testing and iteration really got me much clear about how modules would interact with users intuitively.

Outcome

Cross-team Collaboration

Landing PAGE

In addition to app creation process and generated app, I also contributed to the design of landing pages, email templates, and other on-brand support to marketing team. This experience really enabled me to professionally deal with changing requirement and efficiently work on multiple projects at the same time.

“Shaohong worked with us as an intern on marketing campaign, website, and email designs for a technology company specializing in mobile applications. He has a great eye for design and detail, thinks outside of the box on design concepts created from scratch, and provides timely on-brand support for all design requests. I know he will go far in his career and would recommend any company consider him for UX and branding design work.”
Lauren Piano, Sr. Marketing Program Manager at Posh Technologies