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.
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.
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.
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 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.
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.
Business Types make difference in goals
Small business from different industry has quite different understanding and expectation for the app they want to generate.
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.
Templates with diverse packages of functional modules and navigation styles were favored because they were thought to saved time.
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.
Inappropriate occurrence of payment would generate user frustrations.
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.
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.
- Analyze use case
- Analyze user flow
- Concept 1
- Concept 2
- Narrow down/ prioritize
- Paper Prototype
- 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.
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
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.
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.”