submissionform_thumbnail.png

Shopify App Store

 
 

SHOPIFY APP STORE

I was at Shopify as a Product Design Intern on the App Store team (within the larger App Platform team), and I redesigned and successfully launched the enhanced App Submission form for App Developers to improve the developer and merchant experiences.

 About the APP PLATFORM

Shopify’s App Platform is a place for App Developers (3P) to create apps and provide functionalities for our merchants that are not included in Shopify Core – such an environment exists because we want to leverage the existing App Developer ecosystem to reach all of our merchant-needs. Within App Platform, the App Store is an essential and unique area where merchant-needs and App Developers’ contributions intersect.

 THE APP SUBMISSION PROCESS

In order to publish an app on the App Store, the App Developer must fill in a submission form with the app for Shopify’s App Review team to examine and ensure the information provided is correct and appropriate (i.e. the apps do not violate any of terms of service). Once the submission is accepted, the app will be published on our App Store for merchants to install. 

 
 
 

– PROBLEM SPACE

Insufficient App Submission form (v1)

The App Store was filled with inconsistent and disorganised app listings because there were few restrictions or guidelines provided for App Developers to fill in v1 of the submission form. For example, form v1 included a free text input field for App Developers to write detailed description about their apps, but there was no limitation on the length or types of information allowed in the description box (links, emojis, text, etc). As a result, some app listings ended up being 4000-character essays filled with emoticons.

 
 

App Submission form v1 [old]

 
 
 

– OPPORTUNITIES & GOALS

The enhanced App Submission form (v2)

Because App Submission form v1 was outdated and did not support our team's vision our team, we aimed to improve both merchant and App Developer’s experience by redesigning the submission form. We looked to achieve the following with this project: the form would be:
(1) for App Developers to provide appropriate and relevant information so we could showcase their apps in the best ways possible,
(2) for us to collect and use the data to improve the overall App Store,
(2.5) with that data, we could help merchants discover apps that were most useful for them, 
(3) for us to have the ability to organise and display information consistently.

 
 
 

–01 THINK PHASE

APP PLATFORM DESIGN SPRINTS
WORKSHOPS
research sessions

Our team started out by scoping individual projects and identifying problem spaces and key opportunities within them. After participating in design sprints, workshops (merchant and App Developer journey mapping, and merchant synthesis research workshop) and user research sessions, and with initial guidance and support provided by my mentor and UX Lead, I became the designer and product owner of the submission form v2.

 
 
 
 

As a product designer, my goals were: to refine existing sections that were unrestricted, introduce new sections that would make a more informative and useful app listing for merchants, and lastly, provide clearer and better instructions for App Developers to achieve  successful submissions.

As a product owner, my responsibilities included: making decisions and redesigning the form, doing both research and usability tests to inform (or reaffirm) decisions, and most importantly, communicating and collaborating with the entire team (FEDs, BEDs, Content Strategists) like a project manager to ensure deadlines would be met.

 
 
 

–02 EXPLORE PHASE

user journey diagram
Data models
wireframes
user flows

I began my design process by looking through a hundred app listings and conducting an audit of our App Store, then I compared these listings to form v1 to identify overlapping (or lack of) patterns. This approach helped me understand how pieces of information were related and connected from the form to actual app listings. Afterwards, my mentor and I created a data model on Excel (which I continued to refine throughout project development). In the data model, we included and broke down individual elements for form v2: new and removed fields, input types, constraints, requirements, visibility, additional notes, and more.

One of the biggest challenges was to update a very complicated and confusing section for App Developers and merchants: “Pricing”.

App Store user journey diagram

 
 

Submission data model

 
 
 

Pricing

The Problem
Right now, there are two ways charges can occur to merchants – (1) charges made through Shopify’s billing API (charges that show up on merchants’ Shopify invoice) and (2) charges made NOT using Shopify’s billing API (i.e. app requires a paid, external account). However, we never set up the pricing section on form v1 to convey such complications to App Developers, which then also affects how merchants perceive app pricings.   

The Process
To properly structure (on form v2) and display (on app listing) these different pricing nuances, I had to simplify and narrow down the pricing information App Developers could provide in a way that merchants could easily understand. After digging through a list of apps in every category on our App Store to identify different pricing models, I listed out a range of apps from those with the simplest (i.e. a one-time charge) to most complicated pricing plans (i.e. a monthly charge with a free trial and also charges based on usage). Additionally, I spoke with our Data Analyst to collect data on billing API usage sorted by payable type to gain more insight in the actual numbers for each of them. This data was broken down into payable types, number of apps for each type, the percentage of those apps, and the name of each app. It was extremely helpful to see all the numbers laid out and to ensure I made data-driven decisions.

The Solution
After many rounds of discussions and reviews with Stakeholders, Leads, and Senior Designers, I improved the old “Pricing” section by replacing the dropdown and free-form text field with new requirements and dynamic input fields to control and clarify pricing information App Developers should and could provide to tackle the previously-“Wild-West” situation. (See HERE for more information)

Pricing in App Submission form v1 [old]

Pricing in App Submission form v2 [enhanced]

 
 
Explorations: Nothing selected

Explorations: Nothing selected

Explorations: "Free" selected

Explorations: "Free" selected

Explorations: "Monthly payment" selected

Explorations: "Monthly payment" selected

Explorations: "One-time payment" selected

Explorations: "One-time payment" selected

Explorations: "Not using Shopify API" selected

Explorations: "Not using Shopify API" selected

 
 
 

–03 BUILD PHASE

TEAM COLLABORATION
PROJECT MANAGEMENT

When the form v2 UI and interaction designs were finalized, I began working closely with FEDs, BEDs, and a Content Strategist. (Prior to that, I made sure to keep them in the loop on each iteration too.) On top of communicating daily on Github and chatting in person (since we sat next to one another), I set up several recurring check-ins with the team members to make sure we could deliver on time. I was also constantly presenting in Design Reviews and Stakeholder meetings so everyone was aligned and aware of the progress.

 
 
 

–04 LAUNCH PHASE

RESEARCH PLAN
USABILITY TESTS
final adjustment
launch
project documentation

Our team launched an MVP version of the submission form v2 to conduct usability tests with App Developers. The purpose of these usability tests was to expose potential problems related to new and updated UX flows and the content so that we could fix them before launching the form to all App Developers.

To prepare for the tests, I recruited participants by reaching out to thirty of them personally. I also worked closely with our User Researcher and Project Manager to scope out a research plan (“Submission Flow Research Plan”). Overall, most participants did not feel that the redesign caused any additional inconvenience to the process  and they welcomed the improvements. They didn’t request any significant changes and felt the form covered their app descriptions well.

So, taking the valuable feedback we collected into account, I collaborated with my small project team to make appropriate adjustments to the form v2 for our soft launch. On Oct 3rd, my team and I successfully launched the App Submission form v2!

 
 

App Submission form v2 [Enhanced]

 
 
 

–05 REFLECTION

This was my first time being both the product designer and the product owner on a project; even though my title was an "intern", I was held at the same expectations and was given important tasks just like any other full time product designers.

Apart from designing and producing according to milestones and taking initiatives to connect with team members and Stakeholders, another very important skill I picked up from this internship experience was to juggle different responsibilities at the same time while moving the project forward quickly. On top of these work-skills, I learned a lot about collaborating with people who had very different personalities and expectations and were in various disciplines. I figured out ways to communicate efficiently with team members and managers, which varied depending on who I had to present or talk to. As I was working hard, I also learned to fight "Imposter Syndrome" and became more proactive and resourceful as I leaned on my team for areas where I needed improvements. 

I was very fortunate to have been a part of Shopify TO's first Design Internship programme and be surrounded by designers with years of experiences! It was an incredibly unforgettable learning experience. 

Shopify UX Summit 2017

Shopify UX Summit 2017