Screen Recording (Google Chrome)2.gif

Anni

+ Content Management System for Anniversaries +

 
 

Time | Feb 2019 - May 2019 (4mos)

My role | UI&UX Designer, Front-End Developer

Skills | HTML5/CSS3, JavaScript, jQuery, Information Architecture, Interface Design, Prototyping

 

◇

HIGHLIGHTS

  1. Building a CMS with multiple user interaction including post, comment and like.

  2. Practicing responsive web design.

  3. Optimizing user experience with web design “tricks“.

 

◇

DEMONSTRATION

 

◇

 
Anni -1.gif

Login & User Home

User can sign up/login to the website with email address. Once logged-in, user will be redirected to their homepage with a sidebar menu leading to posts, memories(comments), likes and bookmarks. They can trace their histories and quickly access to recent posts.

 

Homepage

On the homepage, a slideshow is showing the most popular anniversaries. Below are popular and upcoming anniversaries where user can get quick access to. The “Popular on Anni“ module also shows numbers of comments, likes, and bookmarks, as well as most popular comments.

Anni -2.gif
 
Anni-3.gif

Showcasing & “Celebrating“

On the detail page of each anniversary, an animation is used to showcase the cover and title. User can slide a button to “celebrate“ the anniversary.

 

Browsing & Commenting

User can browse the contents of each anniversary including basic information and gallery. The comment area is sticked to the right side of the screen so that it will get more exposure to users. User can not only leave comments but also reply and like other comments.

Anni-4.gif