Labels

Major Project 2 | Everyday Batam

29.03.2026 - 03.02.2026 Week 01 - Week 08
Tracy Angeline Tio / 0362222 / Bachelor of Design in Creative Media
Major Project 2 / Taylor's University
EVERYDAY BATAM
TABLE OF CONTENTS
LECTURES
WEEK 1-8
Consultation Week
INSTRUCTIONS
MIB BOOKLET :
PROGRESSION
Major Project 2
Week 01
One week before the semester began, I started to make a decision between continue the previous topic or start a new project. Looking back, I do not satisfied well with my current topic and there's a topic I think would be interesting to do.

Story behind :
I come up with an idea inspired from my surroundings and hometown, which is "Batam". Growing up here, I observed that Batam is famous for it's industrial rather than lived experienced. With tourist number increased on every month because Batam is affordable, I want to build a digital identity that represented Batam resident and outsiders so they could shape their thinking about Batam as well.

On the first week of class (03/02), I had a consultation with my supervisor to discuss about the topic. The topic were approved and I could proceed with the research.
Fig 3.1 Project Overview Brainstorm Week 01 03/02/2026
Fig 3.2 Build a Slide Deck Week 01 03/02/2026
I finalized my project name : Everyday Batam, which means what an everyday in Batam looks like for example the activity, culture, people, etc.

One thing I aware when we starting on new topic, I need to speed run and finished the research quick so I can reach prototype phase, catching up for MP 2!


Week 02
This week I began to conduct interview with 3 users and analyze their answer. I gain a several insight from this interview and further more, I also research it through internet article to support my idea. Once this phase is finished, the user persona and journey map were created as a part for define phase.
Fig 3.3 User Persona and Journey Map Week 02 10/02/2026
Once this phase is finished, I jumped into ideation where I start to think about output idea and work on information architecture for everyday batam.
Fig 3.4 Information Architecture Attempts Week 02 10/02/2026


Week 03
We don't have a class for this week due to CNY holiday. I continue with my progress, catch up with the ideation phase. While finalizing the information architecture and flow map, I look for web references so it can help me imagine how I want to visualize the content for the prototype later on. 
Fig 3.5 Finalized Flow in Miro Week 03 18/02/2026
Fig 3.6 Web Inspiration Week 03 18/02/2026
Most of my references were collected from Framer as I planned to give a try for this software since Framer can actually publish the site rather than prototype. Even though I never try this software, seeing the tutorial everywhere make me think that I would able to handle this. (jk i got cooked by this software)


Week 04
Three weeks before presentation, I rushed to quickly finalize my design guide along with wireframe design. My first idea for the landing page is zoom out from ferry window because people mostly come to Batam using ferry.
Fig 3.7 Storyboard - Landing Page Week 04 24/02/2026
And then I started to design the wireframe, using lorem ipsum content at first along with researching the color and typography.
Fig 3.8 Wireframe Design Week 04 24/02/2026
Fig 3.9 Color Exploration Week 04 24/02/2026
After I showed this to Mr. Shamsul, he advice me to have a clear tone of voice so the design and content would be matched together. Moreover, the features like drag and drop should not be serve as decoration but to be related with content as well.

For the tone of voice, Everyday Batam adapt a relaxing and reflective tone, inspired by slow living in a small island. As for features, I got an idea for the culture part by drag the dancer to the stage and it was approved. Meanwhile for the design style, I continue it for next week.
Fig 3.10 Planned Idea Week 04 26/02/2026


Week 05
Once the tone of voices and features idea are settled, I start to finishing up with the website content, wireframes along with design style since I need to start framer early as I can.
Fig 3.11 Web Content in Docs Week 05 03/03/2026
Next step which is the design guide, I explained to Mr. Shamsul regarding on rationale choosing blue and green since it was inspired from Batam scenery for the island. Soon the color and typography were finished by the end of this week along with the wireframe design.
Fig 3.12 Color and Typeface Week 05 06/03/2026
Fig 3.13 Final Wireframe Design Week 05 07/03/2026
After the ideation phase is finished, I move to the prototype by designing assets at first before start to work on Framer. The style were adapted using mostly scenery photo as it provide a real preview of the city rather than illustration. For now, only ferry window, map and tari jogi were designed as vector for identity purpose.
Fig 3.14 Web Assets in Figma Week 05 08/03/2026
For the video content, I find the video clip in pexels. It provide a high quality video clip and free! Later then I start to compile the clip using capcut.
Fig 3.15 Pexel Video Clip Week 05 08/03/2026


Week 06
Starting on the first day of week 6, I started to build in Framer. Thought it was easy but my expectation was too high.. At first I spend a lot of time to make the scroll section works for landing, but it's not really smooth. So I doubt if this idea would not works.
Fig 3.16 Landing Page Progression Week 06 09/03/2026
To not waste any more time, I jumped to the home page first. Using framer reminds me of using Flutterflow as this both software works were similar. Both required a css understanding like stack, grid, column and frame.

One tips that I could provide is learn it from the template. Framer provide various of free template that user can remix. I looked on how the template structure their content so it build a clear understanding for me! Below are some work in progress on Framer.
Fig 3.17 Progression on Website Week 06 15/03/2026 (Full Progress are Written in Project Management Document)
By 15/03/2026, the website is finally completed and I do conduct a testing with my target audience. Overall they said it was fine but several feedback received that wish the site could be improved. With only 2 days left before presentation, I would not be able to refine it soon, so I take a note for this feedback as a next future plan. 

After the website, I focused to develop the pitch deck and think about what to present.
Fig 3.18 Pitch Deck Progression Week 06 16/03/2026


Week 07
Presentation Day happened by this week (17/03/2026). I manage to pitch my idea and overall feedback I received from Dr. Wong is quite similar with what my user do when testing. The most crucial part of the website is the first page (landing and home) as it should attract user and welcoming them, not to give them task.

Moreover, each interaction that happened inside the sites should have a clear purpose. For example hover revealing for food and the purpose for drag and drop features.
Fig 3.19 Overall Presentation Feedback Week 07 17/03/2026
After the presentation, I make a new plan starting from this week until the submission day on 29/03/2026. Additionaly, If I got more time, I want to produce marketing output as well.

The refinement start from the landing page. I noticed that the landing should be visible if user see it from distance, they should know what they do. What I changed is from the hidden code mechanic screen into a full-screen hero image and clear CTA button, making the entry point immediately welcoming and readable from a distance.
Fig 3.20 New Landing Page Design Week 07 21/03/2026
Next, for the homepage, I change tagline "Beyond the Border" since it acts like not too welcoming. For the stamp photo, I change into a timed image carousel filled with image as a clear entrance view.
Fig 3.21 Before and After - Home Page Week 07 22/03/2026
The next phase is to focusing on features purpose like hover and drag and drop. For the hover, I come up with the idea like showing more information inside image, meanwhile for the video, I plan to add a trigger when user drag all the dancer to the stage. The trigger here is a performance video reveal.
Fig 3.22 Video Preview Week 07 22/03/2026


Week 08
After the refined sites is finished, I conduct a 2nd testing with user first before I moved to the responsive progress. Overall, after the refinement, they mentioned that they were immersed by drag and drop features. The UI were clear and make them engaged as well. The only things that need to be refined is the background looks plain and it got much space. I refine the background by adding pattern design and removing the spacer.
Fig 3.23 Pattern Preview Week 08 25/03/2026
Moving on to the next step, I make a size for tablet and phone since my goal is to make this platform could be accesible with any devices.
Fig 3.24 Responsive Preview Week 08 25/03/2026
With that the sites is finished. The last step I did to use a code overrides to hide the watermark and export web zip file using chrome extension to get the web code.
Fig 3.25 Deployment for Code File Week 08 27/03/2026
Using the zip file, I uploaded the folder to netlify and wrap the website output. 

With some time left before submission, I moved on to the promotion and collaterals. These included a poster, social media post and items related like post card and sticker sheet were made to promote everyday batam sites. Rationale breakdown for each items : 
  • Poster was designed as the primary promotional material, built around a website launch format to clearly communicate what Everyday Batam is
  • Three Instagram posts were created as a campaign sequence, moving from a teaser to a launch announcement to a full feature of the site's content. 
  • Postcard was designed using the stamp motif from the site's visual identity, acting as a physical souvenir that an outsider might send or keep as a memory of discovering Batam. 
  • Sticker sheet was created to give the brand a tangible, collectible quality that extends beyond the screen.
Fig 3.26 Collaterals Compilation Week 08 29/03/2026


FINAL OUTPUT
All Important Links : HERE
Fig 3.27 Important Links Week 08 29/03/2026

Fig 3.28 Web Preview Week 08 29/03/2026

Walkthrough Video : HERE
Fig 3.29 Project Demo Video Week 08 29/03/2026

Campaign and Collaterals : HERE
Fig 3.30 Poster Design Week 08 29/03/2026

Fig 3.31 Social Media Design Week 08 29/03/2026

Fig 3.32 Post Card Design Week 08 29/03/2026

Fig 3.33 Stickers Week 08 29/03/2026

Final Deck Compilation : HERE
Fig 3.34 Final Compilation Week 08 29/03/2026

Miro Board : HERE
Fig 3.35 Miro Board Week 08 29/03/2026
FEEDBACK
All Feedback are Written in Project Management Document. (Links!)
REFLECTIONS
This project finally comes to an end, and honestly I have mixed feelings about it. I'm proud that I managed to finish everything I planned within the time given, but at the same time, there were no more attend class, knowing this is my last class at Taylor's University before internship happened on next semester.

Looking back, this project pushed me in ways I didn't expect. The biggest learning curve was Using Framer in a short time.  I came in knowing almost nothing about it and left feeling like I actually understand how to build a real interactive web experience. It wasn't always smooth and there were moments where I genuinely didn't know how to move forward. But every problem forced me to figure something out, and that's where the real learning happened.

I also want to thank my supervisors for the feedback they gave throughout this project. It genuinely helped me produce a better output and pushed the work in a direction I'm proud of.

If I could improve one thing, it would be making the landing page even more immersive by adding subtle animations to really pull users in from the first second. As for what's next, I'd love to see Everyday Batam at a final exhibition (If there's any) and eventually produce a short video ad that brings the Fresh & Chill spirit of Batam to social media in motion.

This project meant a lot to me. Not just as a final output, but as proof that I can take something from research all the way to a live, published website.

Labels:

Comments

Post a Comment