Original flow and design: Homepage > Template gallery > Template details
Original gallery page: 1 of the 2 pages I worked on
Wireframes: UX designer provided initial frames for team type narrative: Team page (replaced Gallery page) > Template details page
Wireframe assessment: frames did not align with our mobile and desktop grids or design system, and the interactive Team buttons fell below the fold.
Competitor audit: studied page layouts, product styling, card designs and color usage
Gallery page exploration: ideated on the card design, product visual and color palette
Final card design exploration: variation in product fidelity, color and layout
Homepage design iterations: assessed the page length, content above the fold, optimization on desktop and mobile, color contrast and the need for visuals
Team page design iterations: assessed the same aspects on this page like page length and content above the fold
Final homepage: all Team buttons displayed above the fold on desktop and were maximized on mobile
Final team page: this page design was used for the 11 unique Teams
Final full-page designs: Homepage > Team category page
Final card design: 11 unique product screens were used across 60+ template cards
Final Figma handoff file: Homepage and Team page designs for desktop and mobile and spec’d for web producers
prev / next