20/10/2024- 17/11/2024 (Week 4-Week 8 )
Lizzie Tanaka (0362065)A
Advanced Interactive Design | BDCM | Taylor's University
Task 2: Thematic Interactive Website Planning and Proposal
INSTRUCTIONS
On task 2, we were tasked to work on the visuals of the website in high fidelity along with its interactive elements such as the animations.
Submission Instructions:
1. Walkthrough video of the website with its animations
1. Walkthrough video of the website with its animations
2. Online blog post
Week 5
On week 5, I showed Mr. Shamsul my initial high fidelity wireframe and he told me that it lacks something. It wasn't too 'fun' or playful and I needed to explore more references on the layout. Especially on the content part, feels a bit boring since it was just text. I was also not too sure of my design so I decided to re-do the design. It took several tries to get to a design I liked. I also noticed there wasn't too much on the interaction part.
Fig 1.1 High fidelity draft
Fig 1.2 Parallax animation frames
Fig 1.3 Layout draft
With the feedback in mind, I tried to find a less boring layout.
Week 6
I asked for feedback on my revised layout but Mr. Shamsul still thinks it lacks something, but it was better. I was also out of ideas and I felt like I was restricting myself from exploring other ideas other than my current design. I felt like my design was too plain, boring, and not interactive enough. I tried changing the image placeholders to just boxes of colors but it looked weird.
Fig 1.4 Draft on homepage (W6)
Thinking it was too much, I minimized the amount of the confetti boxes and made them larger.
Fig 1.5 Draft #2 on homepage W6
Below is a layout I tried drafting with rotations but it looked messy.
Fig 1.6 Draft on layout W6
An idea to make the website flow with a simple quiz came up during the feedback session and I proposed the idea in which Mr. Shamsul agreed. I decided to revamp my entire website design and restart from beginning.
The website would have two quizzes with three choices each:
1. User's level of hiking
2. User's desired activity
Fig 1.7 Revised flowchart
Week 7
WIth the quiz in mind, I tried to make it work with my old layout. But i don't think it worked well and decided to restart everything from scratch.
Fig 1.8 Draft on quiz page
In my new design, I used a triangle as my main element to represent the mountain.
Fig 1.9 Home page & quiz page
Fig 1.10 Routes page
Fig 1.11 Explore pages
I showed these designs and animation to Mr. Shamsul. He approved most of it but suggested a few changes such as the content page of the routes section suddenly was crowded with triangles. Changing it would make it look better since the pages before are quite simple. The sudden rectangle themed page on the explore section feels like it's a different website.
I decided to rework the explore page the most because I was confused on how to make all three images appear at the same page with triangles.
Fig 1.12 Failed attempts
Eventually I decided to make the explore section a quiz as well to match the first section. The layout would more or less be the same brief information of the location would appear when the triangles on the images are clicked.
Fig 1.13 Quiz pages on explore section W8
Fig 1.14 Main content pages on explore section W8
I worked on the animations of each page and recorded the walkthrough below.
FEEDBACKS
Week 5
- Design lacks something
- Not fun or playful
- Plain layout
- Not interactive enough
- Find more references
Week 6
- Was a bit better but still lacks something, need to study more references
- Quiz idea is accepted
Week 7
- Triangle element is a good idea, maybe can decrease the size of the triangles in the title page of each route (the one at the top)
- The content page of the route section feels out of place because its suddenly crowded and full.
- Explore section feels out of place as well since its suddenly more rectangle themed
REFLECTIONS:
I didn't expect the prototype part to take up so much ideas and time on the animation. Truthfully, I didn't like my ideas when I was presenting it for feedback as well so I had a hard time exploring designs and felt like I needed to stick to my task 1 wireframe even if it was clear it didn't work. The animations part was quite complicated to do in Figma and it took more time than I had expected.
Overall, the task has its ups and downs and I was glad to have went through the process I did because I learned more about user experience while I was doing this project.
Comments
Post a Comment