Designing a content submission platform for Square Enix London Mobile

Overview

Square Enix Mobile London (SELM, for short) is the newest of Square Enix's mobile studios. They not only develop mobile games themselves but they also act as publishers for games which other external parties have developed. The Online Publishing Team was approached by the Creative Director of SELM as they needed a content submission platform where creators could submit their game ideas to which Square Enix would then develop or publish with them.

SELM would take care of promotion and marketing and drive the game to success which is not an easy task for smaller companies to accomplish. SELM would also be able to provide Localisation services, monitor reviews and ratings, as well as user feedback and suggestions. These external parties could be sole game creators or other studios as long as they have a registered company.

For this project, I was the UX designer on a team that consisted of a 2 developers, the senior development manager and the QA manager while working closely with the Creative Director of SELM.

I was responsible for identifying and addressing user experience needs by creating personas, wireframing, and prototyping while collaborating with the rest of the team on ideation. The objective of the 3-month project was to build the entire backend system for the submission platform.

As of right now, this portal is not online yet but the backend systems I helped design are in place. As parts of it are still going through legal reviews, I had to blur some text inside the wireframe and prototype images. I also unfortunately cannot share images of the completed project until all parts have gone live but as soon as they do, I will update this page.

Product Vision

What SELM is looking for are fresh ideas that are either fully original, new IPs Square Enix can use or games that use one of Square Enix's existing IPs true to brand. Creators are encouraged to submit their best pitch and sell their ideas or games as Square Enix is known for creating high-quality, in-depth games and has a high standard to uphold. If a submitted pitch convinces the SELM team, they may offer a contract to the creator to work with them to create the game that was pitched.

Requirements

Submissions need to be reviewed by nominated staff (the "reviewers") to ensure legal and due diligence checks have been performed before providing any of the above-mentioned services.

From a business point-of-view, SELM is looking to carve out a niche in the mobile games market – Square Enix has invested into mobile games in the last few years but outside of Japan, most of their games are on console and PC. While key IPs such as Final Fantasy might have high visibility on the Japanese market, Square Enix has other, "Western" IPs that would lend itself to fresh ideas on mobile.

For users, it is important to make the process of submitting their ideas friendly and open – many games companies nowadays, especially bigger ones, will usually have an "Unsolicited Submissions" section on their website and not often encourage anyone outside their company to submit ideas. Pitching your idea to someone as prominent as Square Enix which is one of the biggest AAA games companies out there can be incredibly intimidating.

On the technical side, the system needs to be easily accessible and secure – mutual trust needs to be established between creators and Square Enix as a company. Creators need to know that their intellectual property is stored securely and that they remain in control of their data when using the system. Square Enix must also protect their own assets. Until users have been verified by signing an NDA and going through additional legal review steps, achieving "Square Enix Partner" status, they cannot submit projects.

Ideation

Initially, the Creative Director and his team made a tree diagram with features they would like to see, and a rough outline of the process. They suggested a minimal front-end page that would describe the studio and then give the user a prompt to sign up and submit their ideas, and a more in-depth back-end system that our team would be heavily involved in.

While the SELM team already had a submission process in mind, I wanted to get a feel for the target audience and stakeholders, and remain open to other options so that the process can be as streamlined as possible.

Identifying the Users

According to the Creative Director, the team has previously tried to pull in smaller independent game studios or even individual game devs with fresh ideas. They were open to all kinds of applicants, no matter what size their studio was, as long as it was a mobile games company.

With the information I gathered from the Creative Director, I identified two distinct user groups and fleshed out two personas – one for an established mobile games company and one for a single game dev. These two personas cover the majority of end users and helped me figure out user goals, current behavior, and pain points.

Two prominent pain points are finding the right person to contact and tracking the submission. Manually writing emails back and forth after wading through tons of company pages to find out who to contact gets really difficult. Not all publishers make this process straight-forward and there can be confusion on who to contact inside a publishing company, especially if it's a bigger AAA studio.

Therefore, we determined that a key component of the final design would be to allow end users to easily track proposals and see all updates from their contact immediately upon logging in.

Understanding the application's posture

By definition, the SELM submission platform sits somewhere between a sovereign and transient web application – while the user has one clear task (submit), there are multiple different windows that would make it suit itself the most to being a desktop-only application. The applications also support rich input and can be very text-heavy, depending on how the creators plan to sell their games.

According to the Creative Director, they wanted the portal to function both on mobile as well as on desktop but realistically expected most users to send their projects on a desktop PC since that is likely where the creators would keep their development and demo files.

In order to keep the screens clean and clutter-free, I gathered my first ideas for a minimal UI. It was important to convey information and status updates upon first glance, so that users who checked their status from time to time, would see the updates straight away upon logging in.

Scenario Mapping

Before going into any actual sketching or wireframing, I began creating a scenario map. This gave the team a focus – both the SELM and development teams bounced ideas off each other with a clear directive: What can the user do? What are their goals and what paths does the user take to get there?

The tree diagram from the SELM team was very useful as it gave me a good overview in what the team and the business wanted. I approached the scenario map from the user's perspective, fleshing out each path or scenario.

This step helped figuring out what the user would actually do and therefore what features the Portal would require. A few questions cropped up along the way such as "Can the user save their project submission and complete it at a later stage?". The scenario map helped the team to identify these additional user requirements at an early stage.

Wireframing and Prototyping

Once the scenario map was complete, I created a wireframe in Xd that showed the user flow. Both the SELM as well as the back-end team who would be building the platform validated the paths in line with the business and technical requirements. The user flow described the path the user would take in detail, from creating their account to updating their company profile, to submitting or deleting projects.

While the wireframe helped figuring out the user journey and what the user could do, there were still a lot of questions and the conversation naturally moved to how the user would accomplish their tasks and how information could be displayed.

With the who and the what set in stone, I began exploring the UI.

The Prototype

To ensure that the SELM team was happy with how the back-end would function, I created an interactive, clickable prototype and let both the development team as well as the Creative Director and Project Managers try it out themselves. Having this interactive prototype helped massively in refining and optimizing the submission process as the Creative Director could empathize with users that signed up to the platform.

Landing Page/Your Studio overview:

There is a requirement for all users to be logged in to maintain strict access controls, so on the main SELM page, user authentication takes centre stage. The register function is indicated by a large CTA button which is accompanied by some text to prompt the user to sign up to the Portal in order to submit their games.

The business and technical requirements specified that users are authenticated by their email address. When a user first registers, they are taken to a form where they enter their information and then confirm their email address. Once the user has confirmed their email address, they get automatically logged in and taken to the landing page.

To avoid deterring users before they even start using the system, we removed several unnecessary barriers in getting the user signed up, such as asking for the size of the company which may have left a negative impression on solo developers, a key target audience.

There is a brand requirement that all Square Enix sites will usually feature a slim header bar that opens a menu where users can log in or out, so to keep brand consistency, I added the header bar on the SELM portal as well, though with some variations such as a small menu with items for basic account management such as logging out or changing Company Settings.

Main Navigation: The Sidebar

The Portal has an additional side bar which has three sections: Your Studio which functions as the landing page, Your Projects where the user can see the status of their proposals, and Useful Assets. Useful Assets include Square Enix's IP List, Submission guidelines as well as Checklists.

SELM's original tree diagram did mention Useful Assets as a separate branch, so I decided to keep all help articles in one place so the user could easily access it whenever they needed. The other two categories crystallized themselves while creating the scenario map – as I observed the paths, I grouped the actions into categories that would make up the navigation in the end.

I decided on the sidebar with the three main sections early on to ensure the navigation would constantly be visible to the user &ndash if they wanted to go through the Submission Checklist, they could find it very easily or if they wanted to check the status of their latest proposal, it was just one click away. By having a very clear, structured navigation users would not get lost, no matter if they are submitting for the first or 100th time as all the information is in plain sight but not so intrusive that high-level users would get annoyed.

Other options I explored included a navigation bar at the top of the page but I quickly abandoned the idea, thinking that the standard Square Enix bar and an additional navigation bar might be too many bars. The menu that flips out that shows Account Options would also cut into the links and partially obscure them and two headerbars were not very mobile-friendly.

Another option would have been to put the links right into the headerbar but again, when scaling the design down on mobile, where would these options go? They might have been hidden inside the flip-out menu but I did not want to hide the main navigation on mobile.

How to Submit:

During the prototype phase, we did play around with placement of the Submission Process help text. Initially, it was on the landing page as a pop-up, then a separate modal you could open and close. Neither of these options were very user-friendly and might cause user annoyance since they were constantly jumping out and hard to find if the user did close them and wanted to see them again. In the end, a very simple diagram explaining the process was made and put on the Your Projects page. While it would be permanently visible, it didn't have the same intrusiveness as a pop-up or a separate modal.

Upon initial log-in, the Landing Page wouldn't allow the user to look at much until they gain their partner status. This is a legal requirement to protect Square Enix's assets as the IP list should not be available to users that are not fully verified. The legal review steps are currently still a work in progress and to maintain confidentiality, I edited the copy that can be seen here. Once the user has achieved Partner Status, all other options become unlocked and they can start submitting their proposals and view the Useful Assets section.

Submitting Projects:

Commonly, game studios or devs would approach a publisher with at least a demo or a fully-fleshed, playable game but SELM wants to give creators an opportunity to also submit concepts that they can help them develop.

While the difference can be subtle, it essentially means that a concept has no fully fleshed out game behind it, at most maybe a first playable demo, while a "Full Proposal" is a game where majority of the development has already taken place, or a softlaunch has already occurred. These differences are detailed on SELM's front-end page as well in the Useful Assets section. Furthermore, users are able to select what production stage their game is currently in in the submission form itself.

These are the stages a Project can go through:

• Pending which means the project hasn't been submitted to SELM yet and the user can still make changes.
  
• Submitted where the project is now being reviewed by SELM
  
• Accepted which means that SELM has accepted the concept/proposal and will reach out to the studio and
  
• Rejected.

A new Project can be added with the "+Add new Project" button which brings up the submission form. I made this CTA quite big so it'd stand out to the user. In the first revision, there were actually two buttons in this section, one for "Concept" and one for "Full Proposal" but the form itself makes it quite clear what the user is submitting, so having two separate buttons and forms seemed redundant and if anything, more confusing to the user.

Before the user can actually start submitting their project, there is a disclaimer they have to read and agree to which is an additional legal requirement.

The form itself is pretty straight-forward and simple, asking users high-level questions about their game and a few checkboxes about genres and game experience. Square Enix produce a document with submission guidelines for users to review before submitting their ideas, so that users know exactly what they are getting themselves into and what Square Enix expects from them. Everything inside the form is designed in accordance with this. Users can also upload files such as game documents or demos, and there is an option to save and return at a later stage to Submit the project.

Once a user has submitted their project, they can no longer change it but still view their submission for their own reference from the Projects overview screen. It is also possible to delete a project which will terminate the review process and remove all of the user's data.

The individual status boxes in which the submissions are displayed are collapsible in case the user wants to view only specific sections or tidy up the screen. Projects are displayed in chronological order with the most recently submitted project on top of the list.

Once a Project has been submitted, it'll go through several stages of feedback through the SELM team – these stages of feedback can involve requests from the SELM team to make modifications to the content in line with brand and other guidelines, as well as legal reviews. Once both parties are happy, a project will get the green light and move to Accepted.

Useful Assets:

Inside the useful assets section are the IP List, a submission checklist explaining the differences between submitting a concept or a full proposal and a downloadable Budget Template.

This page serves as a help center for the user should they need any information on how to submit or a reminder of which IPs are currently available.

The IP List contains all IPs that Square Enix owns together with an overview of which ones are currently in use. I experimented with this list, originally it was just a large wall of text which was tough to navigate, so I tiled all 14 IPs. Clicking on a thumbnail will show a quick summary of the game title as well as highlight the tile that shows some game art, a recognizable character from the series or the series' logo.

The Submission Guidelines help page was divided into two tabs where users can contrast the differences between a concept and full proposal submission.

Hand-Off

I reviewed the prototype together with the Creative Director, the development team's Senior Manager and the QA Manager until all doubts were cleared. There were 2 iterations of the prototype in total before it was handed off to the development team.

Learnings

I enjoyed working on this project immensely. The SELM team was very confident about what they wanted and they communicated their ideas very well which made reviews and iterations a breeze. Obviously, as with every project, there were a few hurdles along the way but due to open communication, they were easily overcome. Through my work on the wireframes and the prototype, I learned how important it is to let Management see and try out their proposals in person as it gives them more perspective on how their products will be used which is invaluable in creating high-quality products.

← Back to Portfolio Overview