header-image.png

App Builder

Creating and publishing one’s own app to the marketplace previously involved a lot of technical expertise. With Zype’s app builder, we broke down the steps to get the most non-tech-savvy user through this process without giving them a migraine.

To give a little context, Zype is a software platform that helps video content owners streamline their business and sell video directly to their fans. The app builder is one of Zype’s products that allows video businesses to create and customize their apps found on Apple TV, Roku, Amazon Fire TV (and so on...) within a single flow. To no surprise, our primary goal was for the most non-technical user to successfully create and submit their app to the marketplace without help from Customer Support.

What role did I play in this? Being the sole designer in a startup... a lot of roles. I collaborated with peers during the UX discovery and ideation phase, carried out wireframing, prototyping, user testing, and designing UI and animations.

Discovery

Discovery

Before this project kicked off, the app builder had just one step that allowed clients to customize a few aspects of their app’s interface and then download the code from the platform. Hopefully they had a developer on staff because from there they had to build their subscription service and whatever other features they may want into the code themselves. It’s not over… clients then had to go through an intensive, and often times confusing, marketplace submission process to see their app in the wild.

We found our clients were getting frustrated with the lack of customization and all the manual, developer-heavy tasks to complete before they could submit their app.

With these insights, we decided to not only automate this entire workflow but also add the most requested features to this flow. Through a little card sorting and whiteboarding, we logically grouped types of features into digestible steps.

Prototyping

Prototyping

With the prototype I designed, we were looking to test how easy (or how hard) it was for our clients to get through this flow and stay motivated to continue to the end. We assumed answering app questions in broken down steps while giving the user positive reinforcement by showing his/her progress would suffice, but we had to be sure with a little testing…

User testing

User testing

Unfortunately in a start-up, user testing doesn't take quite as big of a priority over other tangible materials (although, arguably is more important). However, we decided it was worth the time for such a large launch, so I performed 3 user tests with coworkers and 3 with our clients.

For one, we found users weren’t confident their work was being saved. To help reassure our clients, we implemented a checkmark not only at every step, but next to every input field if he/she successfully answered the question. In addition, if the platform was experiencing a lag, we added subtle but noticeable spinner with a "Saving settings" message.

We also noticed that users were having a difficult time choosing between the publish options at the end of the flow. Should they publish the app themselves or have Zype publish for them? To make the decision easier, we broke up a few key considerations users care most about (difficulty, time to completion and cost) in an easy-to-compare visual.

The finishing touches

The finishing touches

Once we felt we had a good MVP to go to market with, I added minimal but purposeful design elements including subtle colors to separate groups of content and greens to indicate progress. I also snuck in some moments of delight with fun animations once a client successfully finishes the flow.

Despite some development limitations we had to overcome (no fun without them, am I right?), we managed to create a simple, easy-to-navigate flow for the most non-technical users to successfully, and enjoyably, create custom apps.

Theme.png
Publish.png
Congrats-SelfPublish-animation-4.gif