Popbase App
Real Work/ Reality Project
I was able to design assets, mocks, layouts for both the PopBase web tools and the app as a contract UX designer. I expand and iterate on existing design protocols to flesh out and expand our product's unique tools, and assist with production of PopBase marketing / branding materials (e.g. website, prints, ads etc).
So, Popbase is where you can build your own interactive, personalized, digital fan club. PopBase allows creators/influerencers to engage their fans anytime, anywhere through applied game mechanics in an interactive, personalized fan club. PopBase creators was the first ever public pilot using the PopBase technology and tools. The app allowed established social media creator brands to use our high end tools to engage with their audiences and monetize on the interactive experience. The program focused on active, Micro-Macro influencers who wanted to use our tools offer this immersive experience to their fans.
1.Player Profile Redesign
Start off my first design task is to polishing the existing UI/UX design of profile page in Popbase app.
The original design is as below.
I was making a task flow progress of showing how this three categories(Inbox, Stats, Setting) would be functioned in the app. To distinguish the design from before, I re-arranged position of the menu, aligned the player’s bio info to the top right corner, and adjusted the negative space of the core arrow buttons etc. But since the format is horizontal, there are some constraints for putting those content as a breathed layout. However, After discussed this with the team, I did iterations which to adding grey slip dots to indicate each category’s content. So there are more space to showing the secondary content (Bases, Quests, Badges). I also adjusted the icons, putting them next to the menu field in order to let user intuitively recognize the different categories.
About the colors, I was thinking of the entire color scheme of Popbase app. Because Popbase app has its own orange-yellowish color tone. I decided if we want to have more color contrast to distinguish the background color, we can add warm colors in Category:General Stats.
Sketch
Iteration
Final Design
Back and forth, its taking 1 week to sort of the app’s layout, another one week for designing a bunch of badges.
2.Badges Design
3.Feature: Base Designer
The Base Designer is a feature which allow player to be able to move item or switch the skin.
Final Design
4. Currency Pack
Shape defined: I was adding border-radius and curved edges of the treasure chest.
Colors exploration for testing and comparing.
3. Final design: Refine the look, add wooden texture and give frame a silver metal look.
