YDY, a prominent fitness app, sought the expertise of a designer to enhance their app's marketplace. After showcasing my proposal, I left a strong impression on the CEO, who promptly assigned me the project. Through a series of highly productive meetings and several iterations, I successfully crafted a sleek design, leading to an impressive NPS rating of 91% for YDY's revitalized marketplace. The engineering team then received a clickable prototype, which served as the blueprint for bringing the design to life within the app.
After a series of client meetings, I identified key challenges for the marketplace design. Researching competitors' designs and understanding the client's admiration for Fortnite's shop, I aimed to create an engaging and dynamic layout.
Following an iterative process, I settled on a layout featuring large and small cards. After presenting various card options, the client preferred Style 2 and opted for no background for item images. In the final round, I focused on perfecting the rare cards. In conclusion, the card design was successfully finalized in three rounds.
Following numerous client meetings, I successfully compiled the key challenges that need to be addressed in the upcoming marketplace design.
I proactively researched YDY's competitors and embarked on a comprehensive study of the design references collected during the client meetings.
While Lifewalk, Winwalk, and MetaGym may not be direct competitors, they operate within the fitness and rewards industry. In order to gain insights, I examined their marketplaces to understand how they showcased rewards and the available purchase options for users.
Moreover, during our client meetings, it became evident that the client held a strong admiration for Fortnite's shop and expressed a desire to incorporate a similar concept into their own app.
After gaining insights into the client's requirements, I delved into a thorough examination of YDY's competitors' designs. Additionally, I conducted an in-depth analysis to understand the factors that captivated the client's interest in Fortnite's design.
The design approaches of the three platforms share a rather lackluster experience.
Lifewalk uses categories and horizontal scrolling for its item list, while Winwalk has a simple vertical list without categorization. In contrast, MetaGym employs a vertical grid layout and an intuitive menu with "Awards" and "Power Ups" tabs, enabling easy category switching.
I investigated the factors contributing to the lackluster design of the three competitors and the success of Fortnite's more dynamic approach.
In Fortnite's design, I identified key aspects for its success: distinct card sizes (large, medium, and small) that create visual interest, effective organization through categories, and strategic use of vertical and horizontal scrolling for a seamless browsing experience, facilitating exploration of a wide range of items.
Having gained a clear understanding of the factors contributing to successful layouts, I jumped into the task of designing the marketplace layout for YDY's app.
Taking inspiration from Fortnite's layout, I incorporated three different card sizes into the marketplace design. The top two items were designated as Featured Items, while the rest were thoughtfully organized into various categories.
Each category layout featured different card sizes and followed a unique pattern to prevent monotony and repetition. This approach ensured the marketplace page remained engaging and dynamic, providing users with a fresh configuration each time they explored a new category. Unlike competitors' designs, this strategy added novelty and prevented users from encountering the same layout repeatedly.
After conceptualizing the layout, I faced challenges with the three card sizes on vertical mobile design. The large cards consumed too much space, making the medium cards too thin and the small cards barely readable. After several attempts, I settled on using only a large and small card, which proved to be the perfect solution.
After conceptualizing the layout, I delved into the task of designing the cards. However, it soon became evident that the initial plan of using three card sizes for the vertical mobile design would not be feasible. The large cards occupied too much horizontal space, resulting in the medium cards becoming thinner than anticipated.
As I progressed with designing the medium cards, it became clear that aesthetically, it wouldn't work well due to insufficient space for the item's information and an excess of space for the item's image. Additionally, when I attempted to create small card versions, they turned out to be too tiny, making the item's information barely readable and the item's image hardly recognizable.
To overcome these challenges, I decided to go back to the drawing board and iterate on the cards' sizes once again. After multiple attempts, I finally arrived at the perfect sizes, but this time I settled on using only a large card and a small card for the design, eliminating the complexities posed by the intermediate size.
While working on the card sizes, I concurrently focused on refining the full-page layout. After finalizing the card sizes, I seamlessly integrated them into the updated layout.
With the layout finalized, I presented the client three distinct card options, each targeting specific goals: understanding their preferred aesthetic style, determining their preference for item image presentation with or without a background, and introducing the concept of "rare" items.
The client preferred Style 2 for the Marketplace page due to its conservative card style. Design 3 for the second page received positive feedback, and the idea of incorporating rare cards was met with enthusiasm.
However, a final decision on item image backgrounds remained undecided. Further discussions and explorations were required to align with the client's vision and preferences for the design.
To understand the client's aesthetic preferences, I showcased three distinct styles:
Style 3: A vibrant and colorful approach. I incorporated YDY's red hue and adorned the entire card background with an engaging pattern.
Style 2: A more conservative option. The card's background featured YDY's black color, with a subtle gradient in YDY's red. For the rare card, I retained the same concept but substituted black with a striking purple.
Style 1: A fusion of both ideas. Normal cards displayed a black gradient with a YDY red border, while the rare cards adopted a more dynamic and colorful appearance.
In the second round of card design iteration, I addressed the image background concern. After thorough discussions, the client expressed a preference for the design without the background.
In the final design round, my primary focus was on creating the rare cards. I retained the original design for the basic cards but added a design pattern and specific rarity color for the rare ones. To highlight the item's image prominently, I made sure the top half of the card remained as dark as possible.
In conclusion, the card design was finalized in three rounds. The first round established client preferences and a basic design. The second round included different rarities and a background-less display. The final round perfected the rare cards.
My clickable prototype, served as the guiding blueprint for the engineering team, ensuring a smooth implementation of the marketplace design with tested functionality and user experience. The collaboration led to delivering a final product meeting the client's expectations, providing users with a seamless and engaging app experience.
The high-fidelity prototype guided the engineering team in implementing the marketplace design. It provided an interactive overview of features, interactions, and visual elements, ensuring a smooth and accurate implementation.
Collaborating closely with the engineering team, we successfully shipped the product to the client, ensuring that the final outcome not only met their expectations but also provided users with a seamless and engaging app experience.
1. Learned to adapt. For this project I had to skip over some of the components from my design methodology and combine others because of time and budget.
2. Learned to work on a well stablished design system. YDY had previously worked with another designer who created the design guidelines. Originally, I was a little concerned that this would restrict my creativity. But, the design guidelines were very detailed which made it easy for to follow and I did not feel restricted.
3. Bring bad news early and come with alternatives.
