Playfora
Role // Brand Designer | Client // Playfora | Designed in // Figma
Playfora is a South Carolina-based startup changing the social selling e-commerce game with an engaging, raffle-based shopping platform. With Playfora, sellers (Play Hosts) can sell luxury items, earning the full value of the item, while buyers (Players) only pay a small fraction of that cost for a chance to win the item. With each sale, a charity (Play-4-Good Partner) chosen by the Play Host receives a portion of the profits to support their cause.
As Playfora undergoes a rebrand and re-launch, I was hired on as a brand designer to incorporate their new brand standards into their existing app, and craft a visual redesign of their website. This contract is current, and materials will be updated as they become customer-facing.
Jump To
Marketing Materials
As updates to the app were released, I designed new promotional screens for the app store to advertise the latest features and design to potential new users. In addition to creating these new promotional slides, the redesigned content within each of them is work I designed to improve the app according to new brand standards.
View the iPhone and iPad versions of these screens below.
App Design
As Playfora incorporated a brand redesign, one of the most crucial pieces was the large, customer-facing application.
Playfora’s app is a combination of an e-commerce and social platform, where users can follow one another and shop each other’s product offerings. Users create an account under one of three categories: Player (Buyer), Play Host (Seller), or Play-4-Good Partner (Charity). Players are on the platform to shop unique items, and both Play Hosts and Play-4-Good partners sell items for profit and proceeds for charity. From there, Players can shop the offerings of Play Hosts and Play-4-Good partners.
As of the end of January 2024, I have designed over 100 screens, mainly across five user flows: a new feed screen, the spinning reveal of the winner selected by the Wheel of Playfortune, a new splash screen, onboarding screens for new users, and, the biggest undertaking — the ‘Purchase a spot’ flow, where users purchase entries into Plays in order to win.
Feed Screen
One of my first tasks upon joining the Playfora team was to redesign their feed screen, which is the home page a user lands on each time they open the app. The old feed was created according to previous brand standards, and had a few usability issues that were cleared up with the redesign.
The previous feed screen, shown to the left (desktop) or below (mobile), utilized the brand’s prior color scheme of a deeper blue and a golden yellow. Additionally, the screen had some spacing issues, and did not properly use grouping and text alignment to make information clear to users.
The updated feed screen, shown to the right (desktop) or below (mobile), incorporated new brand standards, using a secondary light blue shade behind the ‘Trending Plays’ for a more cool and relaxing feel. Categories were also updated with brighter images that contained colors featured in the brand’s new logo. Alignment adjustments were made amongst the Play Hosts icons, grouping information together in a more cohesive way, and center-aligning the Trending Plays headline above the content allowed for more Plays to be seen without the user needing to scroll.
Wheel of Playfortune
The Wheel of Playfortune is how a random winner is selected after a Play closes, similar to drawing a name from a hat in a raffle. This is one of the most exciting parts of the user experience for the app, and the design had to match this excitement.
The Figma design of this screen, seen right (desktop) or below (mobile), showcases the countdown, animation, and end screen of this user flow. While the in-app experience has a longer wheel-spin duration, the Figma prototype only has a short preview of this animation to communicate the design to the development team.
When considering how to design this screen, it was crucial that it felt exciting and gamified. Thus, the large spinning wheel spanning the entire screen created a focused excitement on the wheel and whose username was passing through the middle.
The end screen needed to convey the Play details, winner, and, since this is the wheel from the perspective of the Play Host (seller), instructions on how to proceed in sending the winner their item.
New Splash Screen
Playfora’s existing splash screen was brief, quickly transitioning the user into the app. To support the new branding and gamified experience, a more engaging, animated splash screen needed to be created.
View the new splash screen to the right (desktop) or below (mobile).
Onboarding
The first experience users have with an app is crucial to their overall satisfaction, especially with complex and/or new services. Thus, designing clear and easy-to-use onboarding screens was critical to the design of the new app.
Because different information is needed for the three types of Playfora users - Player (Buyer), Play Host (Seller), and Play-4-Good Partner (Charity), three different onboarding screens were needed. The previous onboarding flow included the splash screen through the user entering their phone number, and the extended process was designed to provide more education on the functionality of the app for new users.
View one of these flows, the Player (Buyer) flow, to the right (desktop) or below (mobile).
Purchase a Spot
As an e-commerce service where the experiencing of purchasing Spots, or entries into Plays, is the primary source of revenue for the company, designing that user experience was critical in the app’s redesign.
Fitting in with the new gamified feel, Playfora wanted this new Spot selection and checkout process to be more exciting, engaging, and interactive. Additionally, it had to be clear, clean, and usable for the best possible transparency with users, which is always crucial when money is involved.
See a walkthrough video of the Figma prototype for this section to the right (desktop) or below (mobile).
Website Design
To introduce new Sellers, Play Hosts, and Players to Playfora, a strong web presence is critical. Before downloading the app, potential new users can be introduced to Playfora’s brand and offerings, and after downloading they can use the site’s pages as reference guides for selling and buying on Playfora.
The website was designed to launch alongside Playfora’s new app experience as a companion tool providing the above resources and more to improve the overall user experience. The landing page was designed as part of the updated brand guidelines for Playfora by Embacy, a design agency, prior to my arrival to the team. I created the rest of the web pages in Figma, which were then developed and published online by our web development team.
View a few of the pages below and learn how they were designed, or visit the entire live site by clicking the button below.
Player, Seller, and Play Host Pages
It was crucial that the design of the website provided just as exciting and engaging of a gamified experience as the app - both to keep the branding consistent and to gain interest in the app itself. To cater to these three experiences, our ‘Getting Started’ tab has three categories: Selling (for Play Hosts), Shopping (for Players), and Raising Money (for Play-4-Good Charity Partners).
To create this gamified experience, different interactive elements were used - flip-around cards, horizontal scrolls within the greater page, drop-down and interactive menus, and more. To ensure these elements were accessible at all screen sizes, different versions of each page were specially designed for standard computer, tablet, and mobile breakpoints - ensuring a highly responsive and engaging experience for every user.
View one of these pages - the Buyer/Player hub - at desktop, tablet, and mobile breakpoint sizes below, or visit the link to view the page live.
Frequently Asked Questions
It’s important that FAQ pages are clear and easy to use - after all, there’s no FAQ for the FAQ page. Keeping the need for simplicity and extreme usability in mind, I had to brainstorm a way to keep the exciting, gamified experience present in this page.
Ultimately, we decided to go with a design I created inspired by folder tabs that utilized that design convention in a more abstract and stylized way. Using full-page color made the design pop and feel exciting, but the lack of significant graphics or distracting elements still makes finding the right question and answer easy.
View the desktop version of the FAQ page below, or click the link to view the live, responsive web page on any device size.
Check Back Soon
This project is ongoing, and new design work will be posted as it becomes customer-facing.