CrashAD | Prototype Design
A working prototype designed in Invision studio and developed using Next.js (React). With a total of 27 screens the UI design was accomplished in less than 3 weeks, while the frontend development of the same project took 3 months with its raised complexity to make the final product more smooth and simpler.
Homepage Tabs & Sidebar Navigation
With a set of 6 tabs on homepage, the navigation is side-oriented, with quick access and instant page loads (although MPA acts as SPA with next.js). For a more detailed navigation, users can use the sidebar navigation by clicking the menu icon on top corner.
Brand Page - Ads, Products & About
A channel page for brands with a channel trailer and banner for introductory purposes. Users can browse all latest ads and their related products and features at one-place.
Brand Editor - Ad Manager, Edit Profile and Page settings
The editor partially replicates what an Youtube studio can do, upload, organize and edit video ads and its related products. An ability to customize the default brand page is also made available in page settings tab.
Ad Directory - Save Ads into Favorites, Categories & Keywords
Personal directories or collections for users to save their favorite ads into a group. Users can then explore new products and features published by these brands in the respective directories.
Video Upload & Product Details
uploading the ad required a series of complex information to be filled, which was simplified into a 3 step process, where users can fill in the details while video gets uploaded in the background. Minor optional details can be added in a pop-up modal where its priority gets slightly pushed back, making the primary steps far easier to understand and complete.
User Sign-up & Sign-In
The signup only required minor details from the user, and it opens in a flat simple layout where everything is filled in one-go. the sign-in opts a pop-up overlay modal and does not break the userflow while he is exploring the app.
