Asset Layer Creator Hub
Enabling and Inspiring Creators to Create.
Client: Asset Layer
My Role: Lead Designer
Tools: Figma, Zoom for User Testing
Asset Layer Website: AssetLayer.com (Must Create Account and Sign-in to View Dashboard)
PDF Case Study Link: Here
Part 1: What is Asset Layer?
Asset Layer helps developers accelerate their apps into full ecosystems with exchangeable assets, boosting retention, monetization, and user acquisition. A key part of this is empowering 3rd-party creators to contribute their own content. The Creator Hub serves as their central dashboard—the focus of this case study.
As a startup, Asset Layer operates with limited time and resources. Speed and efficiency are key—designs must stay lightweight to avoid unnecessary complexity for developers.
Part 2: Who are the stars of our show and what do they?
To deliver the right tools to the right users, we need to understand who they are. Asset Layer’s user base naturally falls into two distinct groups. Let’s meet them:
App Owners
App owners create and manage applications using Asset Layer. They determine what additional 3rd party content they’d like to add to their application.
Creators (the true a-listers)
Creators contribute content to apps created by app owners. This includes Asset Content (i.e. Additional Items) and experiences (ie. Mods and App extensions). They are the primary users of the Creator Hub.
The diagram below breaks down the hierarchy of key features for each user group. Creators fall into two categories: Developers, who build mods and extensions, and Artists, who submit assets and collections to apps.
Note: A “Collection” refers to a group of assets that can be either identical or unique.
To simplify, we can break down the goals of our 'Creators' into four key objectives:
Submit content (extensions and collections) to apps, aiming to grow active users or revenue.
Manage and modify their creations.
Track performance through key metrics like sales, revenue, and daily active users.
Access resources such as tutorials and documentation to support their work.
Hub Requirements:
With established goals for our users, we can now think of the Creator Hub as a snapshot of the overall experience and tools being provided to creators to facilitate those goals.
This allows us to identify a few key things that the Hub dashboard needs to do:
Enable Creators to quickly create submissions and check the status of Collections and Experiences that they have submitted
This includes both the submission status (approved/denied) and the overall performance of their creations (sales, users, etc...)
Enable Creators to access the tools needed to manage those same Collections and Experiences
Provide easy access to tutorials and documentation that creators need
Research / Competitor Analysis:
Along with establishing our own expectations for users of the Hub, it’s important to explore the experiences our competitors provide. This provides two major benefits
Insight into what competitors may be doing right OR wrong
Insight into what our users may already be expecting from a Dashboard/Hub Experience
Below are a few screenshots of some of the research I completed on competitor dashboard experiences along with some brief notes and takeaways.
Ultimately, there are too many insights to be listed here, but I’ve listed some of the more notable observations below:
Providing high level summaries of creation performance at a glimpse
Providing information and links for documentation and easy help support
Ensure there is proper direction to the user, avoid vague sections and unclear copy
Link to functions that are not directly included on the dashboard (i.e. direct link to edit a collection created by the user
The Design Process
Early Prototyping:
The value of early prototyping is that it allows our team to quickly iterate on different design patterns before committing the resources to creating a full-fledged mockup. It also gives us something to put in front of users for feedback early in the design process, which can be extremely helpful for avoiding blind spots in the design.
My preferred process for early prototyping is to start with simple pen and paper, blocking out sections and getting a general feel for layout. After that, I start building a low-fidelity clickable prototype in Figma, useful for user testing and getting a better understanding of potential issues in the design. This is also typically a good time to get a feel for the overall user flow of the platform before worrying about aesthetics.
I’ve included an image of an early mockup built in Figma that helped the team get a better feel of the layout and content of the Creator Hub.
Asset Layer Design System:
In order to speed up the development of updates and ensure uniformity of design components, typefaces, and colors, I spent time working with our developers to build a collection of common UI components to be re-used throughout Asset Layer.
These components are built around the React JavaScript library that Asset Layer uses for UIs and are a modification of a Devias React Kit we licensed to save time.
Included below are a few examples of those components, but the full library includes significantly more elements.
It’s worth noting that many of the components have additional interactions when users click or hover over them, providing visual feedback to the user (i.e. the Buttons diming slightly on hover).
User Testing:
An essential part of the design process is getting prototypes in front of users early and often. In the case of Asset Layer, we’re fortunate to have access to two major groups for testing.
Group 1: Active users from our discord server, who use Asset Layer and provide good insights into the experience of “standard” users and in some cases “new users”
Group 2: Our Developers. Asset Layer is fortunate in that the very same developers who help build Asset Layer also use the product for their own Applications. This group can be considered “Power Users” who already know the ins and outs of the platform.
Our process for user testing was to put a clickable mockup prototype (built in Figma) in front of users. We then asked them to complete a number of tasks, and had them verbalize their thoughts as they went through the process. After completing the tasks, we asked a few follow up questions regarding spots of confusion, or expectations they felt were not met.
This process helps to flag incorrect assumptions that can easily be made by a designer who has a full picture of the product at all times.
User Testing Insights:
To keep things simple for this case study, I distilled the feedback into a couple of key findings:
Not enough content and direction for new users, a little overwhelming to know where to start when first landing on page
Provide more overview statistics for users to quickly understand how their creations were performing
Minimize Copy Text on Page, simply too much information to look at, making it difficult to process the page’s intentions quickly
These findings were used to make a number of small tweaks that were ultimately implemented into our final design.
Creating a High-Fidelity Mockup
After completing the research phase of the project and building low-fidelity mockups, it was time to work on the finished high-fidelity mockup.
The intention of the high-fidelity mockup is to create a final design in Figma that can then be passed off directly to our development team. This design showcases exactly which components should be used and should communicate clearly the functions of each.
It is worth noting that as our team’s sole designer, I work directly with the development team to ensure the quality of the implementation matches that of the original design.
The next section of this case study will walk through each part of the Creator Hub block by block.
Final Designs
Navigation Bar:
Clear and concise navigation is a key component of any good design. Poor navigation can ruin the experience of even the most well thought out products. Our team spent a significant amount of time discussing different navigation bar options and testing them with our users. I’ve included some of those original mockups below, along with the final version our team ended up selecting.
Benefits of the final navigation design:
Allows quick switching between teams and accounts, essential for collaboration between different groups
Does the best job of properly segregating the features for App Builders and Creators while still allowing users who use both to easily access them
Separates the features that pertain to both user groups into it’s own “General Category”
Allows quick access to important documentation as well as links to the “Marketplace” and “My Assets” which are useful for testing and confirming that actions taken in the Asset Layer app are being reflected to users
Intro Block:
The intro block came about after completing competitive research and confirming an interest from users during the testing phase. It’s primary intention is to serve new users and put them on the correct railways to making their first creation by providing links to helpful documentation and pushing them towards creating a submission.
It has the additional benefit of being closeable, so more seasoned users are able to remove it from their Hub if they feel it no longer serves their needs.
My Collections / My Experiences:
The My Collections and My Experiences tables are pretty self explanatory. They provide a quick glimpse at high level information regarding the status of each creation, as well as data that may be useful to quickly look up during development (i.e. Creation IDs or Slot Information) and links to the creation’s detail page.
Data Summaries:
Data summaries came up multiple times during our research. The primary function of these are to provide a glimpse into the overall success of the user’s creation. In the case of Collections, the focus is on volume and revenue. In the case of Experiences, the focus on is on user acquisition.
Helpful Links:
The helpful links section is by far the simplest of the sections on the Hub page. It includes links that we found to be expected or requested by users during the research phase of design.
Ultimately this included links to other popular apps, documentation, the community discord server, and blogs written by Asset Layer on the latest updates.
App Submission Page:
For brevity's sake this particular case study wont go too deep into the collection/experience submission process. However, it is worth noting that part of the intention of the Hub is to provide creators with quick access to the submission process.
As such, clicking any app link brings the user to an App Overview page which contains useful information regarding an App’s Description, Slots, Documentation, Toolkits, and the ability to submit Collection and Experience proposals directly to the application.
Mobile Compatibility:
While our data tells us that most of our users access Asset Layer via desktop browsers, there are still a percentage that use mobile from time to time. As such, it’s import that we are thinking about mobile views during the design process.
The final prototypes are done with responsive design in mind, leveraging break points and Auto Layout features in Figma to ensure that the final build will work for mobile and desktop users alike.
While some editing features are limited on mobile, users are still able to lookup any information about their creations quickly and easily.
Full Design, Closing Thoughts, and Next Steps
As mentioned in the intro of this case study, Asset Layer is a startup that has a limited amount of time and resources to complete projects. The goal of this design process was to finish with a completed design that developers can build when the project becomes a priority.
Ideally, given more time, I’d run through additional iterations of user testing and editing, allowing the Hub to grow and improve as additional data and findings become available.
However, it is important to work within the limitations of a project. The intention is not to build the fanciest and most intricate design possible, but rather to build something that users enjoy using and fits within the budget of our resources. Rarely will any project be perfect at launch. The nature of good design is that it should always evolve and improve over time. Avoiding stubbornness and accepting mistakes will always lead to a design that better serves users.
With that said, in addition to receiving a large amount of positive feedback from our community, we also saw a significant uptick in the amount of time users were spending viewing the dashboard after implementing the new design. This ultimately led to a higher conversion rate of users signing up and continuing to use the product. Our team considered the update a big success.
The finished Version 1 design of the Creator Hub can be found below Please keep in the mind that it is a static image, and thus lacks the interactive feedback that an actual web version would provide.
