Advanced Interactive Design-Task 2
INSTRUCTIONS
Task 2-Interaction Design Planning and Prototype
Loading page animation
Attempt 1
|
| Square Loader by Tashfeen Ahmad |
I decided to use this idea and add my own perfume bottle design on it. I start with tracing an outline of my perfume bottle.
Here are the rough animations I created. My initial idea had this general feel.
Attempt 2 (Final version)
After completing my initial design, I wasn't satisfied as the outline of the perfume bottle didn't convey a luxurious feel. In my second attempt, to preserve the website's texture and maintain visual quality, I directly used the appearance of the perfume bottle.
- Three Bottles of Cologne: Displayed side by side, each bottle transitions in and out of colour.
- Colour Cycling Animation: The animation begins with the first bottle in full colour while the other two are in black and white. Next, the second bottle transitions to colour, with the first and third in black and white. Finally, the third bottle takes its turn in colour, with the first and second bottles reverting to black and white. This cycle repeats smoothly, creating an engaging visual effect.
- User Engagement: This dynamic transition draws the user’s attention and builds anticipation for the content to come. It also subtly introduces each cologne in the series, enhancing product familiarity.
Landing page
First version: In the initial attempt, I followed my wireframe's idea completely, and the result reflects that. I tried rotating the font, which improved it somewhat, but it didn't achieve the effect I expected.
Second version (Not the final version but used most of the animation design): I split the scrollable page into three fixed pages, each showcasing one of the perfumes I want to feature. This page includes many mouse hover animations.
- The brand logo will slightly enlarge and become clickable, taking the user to the Jo Malone homepage when clicked.
- The bold text in the middle will change to an outline (stroke-only) style without fill when hovered over.
- The "About Us" and "Scent Experience" sections will show a white border on mouse hover and are clickable.
- The perfume bottle will have a shadow on mouse hover to enhance the sense of depth.
- The perfume name and price section will show two lines on mouse hover to enhance the visual experience.
The animations for all three pages are the same, but in the background, I added the original advertisement image for each perfume. When showing the prototype by scrolling, the background will move in the corresponding direction. The backgrounds of the three pages can be combined to form a complete picture.
Third version (Final version): When I started working on the product detail page, I realised that splitting the landing page into three separate pages would overlap with the product page, which is dedicated to introducing each perfume individually. So, I changed my approach and combined the three recently designed pages into one.
The combined page looks more cheerful and has a summery feel. However, I found that the original hover animation on the bold text didn't seem very appropriate, so I changed it to slide out to the left and right when the text is hovered over. Other animation remain the same.
Product Page
The layout of the product page remain the same with the proposal introduce earlier. Only the changes is I removes the add to cart CTA button. I introduced the ingredients used and the taste note of the perfume scent when user pressing the press zone. The graphic illustration used is from the website of the taste note.
Quiz page
The quiz page is named "Scent Test". I used the same background colour as the loading page. When selecting an answer, the panel will change colours based on the chosen answer. The 'Next' button will only be clickable after an option is selected. Once 'Next' is clicked, it will navigate to the detail page corresponding to the selected fragrance.
Final Submission
Figma
Prototype Walkthrough video
Youtube link: https://youtu.be/olbNdggd4vY
Reflection
When I started creating the prototype, I felt quite excited. I find the concept of an interactive webpage to be very interesting, and I am eager to see my final product. Although I encountered many conflicts between my initial proposal ideas and the actual prototype, I believe these challenges are beneficial as they push me to improve my work further.
This task has also improved my skills in using Figma. I learned how to use components to reduce duplication across pages, making my workflow more efficient.
Comments
Post a Comment