Collage Landing Page
Date | Apr. 2018
UI/UX Design | Sheng Pan
Frontend Development | Sheng Pan
Tools | Sketch, Principle, HTML, CSS, JavaScript
Collage is a new feature of our product. It’s an editor tool let the shop owner design their online shop.
We create various kind of module: photo module, blog module, product module and so on. User can make unique visual by arranging the order of the modules.
The goal is not only to make users understand how it works but to apply for this new feature.
I’m the frontend developer and designer of this project because it’s not arranged in the sprint, and frontend team doesn’t have enough time to develop this page.
This landing page should be an introduction for our new feature. However, team members are still working on this new feature, so we can't reveal the interfaces to our customers.
See Demo on Codepen
How to introduce the concept and attract users to apply for early access without showing the editor interface? We could change the way we communicate. Instead of the real interface, we show sample pages made with Collage Editor. We talk about what Collage can do for them, not how to use it.
Because of the content, I make an easy prototype to display the whole page and the user flow. Additionally, the parallax effect is another point I try to display. It will help when I develop this landing page.
Prototype is really convenient for me to check some details or information with product owner, because it reduces the waste of developing landing page that product owner doesn't expect.
After 2 days discussion of film storyboard, 2 days film making and 1 days creating mockups, it costs 8 days in total to finish the landing page.
I created a beta version mockup before I got the complete copywriting. There are some difference between beta and the final version mockups, such as the primary color and call to action button.
It costs to much time in compress the film size, we could minimize the film size by reduce the stories of the film.
See Demo on Codepen