Dramania e-commerce platform

Course project at Institute for Information Industry Bootcamp

↓

 Project Profile

  • My main contributions

  1. User Experience Design

  2. User Interface Design

  3. Writing code for interactive pages, including crowdfunding platform introduction with HTML, CSS, and JavaScript

  4. Responsive Web Design

  • Role Front-End Developer / Web Designer

  • Platform Desktop, Tablet, Mobile Web

  • Team 3 Developers, 2 Web Designers

  • Tool Sublime Text, Sketch, Zeplin

Project Brief

Dramania is a user-friendly and interactive website to house information, reviews, and sell TV series souvenir and collection for Taiwanese drama fans, included a online marketplace and a crowdfunding platform. My team and I aim to bring a different design perspective and change classic stereotypes in web design and development.

This project was built when I was studied at Institute for Information Industry Bootcamp. After working as a graphic designer for a year, I decided to learn more about web development and user experience by joining a bootcamp in order to improve my programming skills and knowledge of design. This bootcamp helped me gain the practical skills needed to become a professional web developer and UX designer.

Web Design Process

 

Characteristics of Dramania website

Attractiveness, Interaction & User Experience

Product Page Display

Same Templates, Different Themes.

With customized web pages for different TV series, browsing finally feels personalized. Each background, image and introduction is dynamically updated from our database.

 

From My Account to Wish List Page Display

Campaign and Event Page Display

Interactive Functions.

We believe that a more interactive website will grab user's attention and then along with calls-to-action will drive them further into our site.

 

And encourage exploration through a rich, immersive experience.

Amazing Parallax Effects

We aim to use a parallax scrolling page to introduce our crowdfunding platform and simplify the concept for our users. Parallax scrolling also influences user engagement through the cue route and the action route. And it will totally bring your design ideas to life.

A quick look to see our Crowdfunding Platform Introduction Page Display! Click Me ↓