Avatar Editor
Adapt avatar editor function to mobile and Xbox platforms. Design an intuitive and coherent experience to our users.
Role
UX/UI Designer
Team
Product Manager
Frontend engineer
Tools
Sketch
Webflow
Illustrator
Duration
2 months
Problems
UI is not mobile nor Xbox friendly. Lack of info hierarchy and components are not following style guide.
Mobile
Explore layouts
Intuitive item-slot design approach.
Define general flows
Define user flow based on layout A.
Iterate for scalability
The “slot” design is not ideal for scalability, so I redesign it with scrollable navigation.
2-level navigation
We had so many categories, so we rearrange them into two levels for the ease of navigation.
Phone prototype
Extensive widget for primary categories and scrollable subcategories.
Tablet design
Maintain the same functions and flows.
Tablet prototype
Maintain split-screen layout along with two-level navigation.
Web
Prototype
Consistent navigation experience and reinforce style guide
Xbox
Competitor analysis
From major games, learnt about user behaviors and layout design for console.
Explore layouts
Prototype
Adapt same functions and optimize design for Xbox.
Reflections
Cross-platform design is quite challenging yet interesting since designers need to learn different user behaviors based on devices. In addition, LUA base coding set constrains on design. Be flexible and work around it.