Designing a Marketplace for Deepspace
My Contributions and Role:
Lead UI/UX Designer in charge of designing a mobile app and responsive website, including all collateral and graphic designs.
High-Fidelity Prototype: Mobile and Desktop
User Interface Design
Designing for Accessibility
Digital Art for Background
Deepspace has been one of my favorite projects I have worked on so far. They offer an expansive Play-to-Earn metaverse with many avenues for profit, including crypto mining and trading. When I was hired as a UX/UI designer, the clients gave me full permission to be as over-the-top, original, and artsy as I wanted. My instructions were to make a marketplace for all platforms, along with their front-end developer. This had to be delivered in less than a month.
This was a challenging experience, considering the deadline and the lack of resources. Still, I'm happy to say that the clients were delighted with the results, and I had the pleasure of participating in several twitch streams with them and making several concept art pieces for their game.
UX/UI and Graphic Design
Jumping Right Into It
Because of the lack of time, we had to skip over the traditional steps and go right into the high-fidelity design. This was an absolute challenge, especially since we had almost no guidelines, so we decided to make a simple sitemap and wireframes and go from there.
Information Architecture: Sitemap
The Marketplace should be the same for all platforms, so the sitemap works for the design of both mobile and desktop. Because we had to jump into the design, I made a basic sitemap based on our client conversations. We narrowed down the pages necessary, and, along with the front-end developer, we agreed to build the basics and then hide some parts of the marketplace and build them later.
One of this design's challenges was successfully translating them from desktop to tablet and mobile. The design has to be futuristic and give the impression that the user is "entering" the game from the marketplace. The first screen the users see when entering the marketplace is a graphic welcoming the users. We followed the sitemap and added a link to their wallet from the menu.
Everything on this site, including the background, vectors, and graphics were made by me. I used Krita and handpainted all the details.
As we continue designing the marketplace, we wanted to keep the same "vibe" as if the users are looking through a "screen" in space inside a video game. This page is empty because this is where the users can see their recent purchases and swaps, which is a feature that will appear after the game is released.
Outposts and Inventory
For the "outpost," I designed a simple page with all the ships the users could purchase, exchange, or swap. This is one of the most essential parts of the marketplace, so one of the clients suggested a way to filter them. We kept the list of ships, a way to filter them and organize them on a table.
For the inventory, we keep it similar to the outpost, with the difference between the ships' cards and the buttons.
For the rest of the Marketplace, we decided to "hide" away the buttons for "shipyard" and "equipment", since those are future features DPS will add. Right now, the game is in a beta version, and they are expecting to expand it.