Interactive Design

27.05.2025 - 10.06.2025 / Week 6 - Week 8

Brenda Wynn / 0372128

Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University

Project 2

JUMP LINKS

INSTRUCTIONS

BACK TO TITLE

PROJECT

Figure 1.1 "home page" progress (13/06/2025, week 8)

Firstly, I worked on the page that will greet the users first. I included a compilation of some work that the company has done to show the users what type of service that the company provides mainly. I used smart animate for the photos so that it can overlap automatically. Then I started on the navigation bar, which I added a hover effect to it so when the users hover above the navigation button it will change in color. Lastly, I added a photo of the company's logo that I took from the original website.

Figure 1.2 "services" progress (13/06/2025, week 8)

After I was done with the first part of the home page, I started on the services that will display the different type of services that the company provides. For this part, I made a template where the image would look dark but it would look bright when the user hovers above it. Then, I included the images that represent each of the services and changed the description on each one.

Figure 1.3 footer progress (13/06/2025, week 8)

The last part of this page is the footer which I made into a different section by adding a black background. I also included another navigation bar on the footer to make browsing easier for the users. For the navigation bar on the footer, I made it change in color when the cursor hovers above it to indicate what the user will be clicking on. Lastly, I included some of the company's contact on the other side and used the same effect like the footer's navigation bar. Though for the icons, I edited it from images I found on the internet.

Figure 1.4 "type of service page" progress (13/06/2025, week 8)

Once I was done with the first page, I started working on the type of service page where it will explain more about the specific type of service to the users. On this page, I skimmed through the long text on the original website and took some key points to put on this page. I also included a photo beside the texts, so that it is more pleasing to look at. After finishing the top part of the page, I included other pictures of the company's work on that specific service and titled it "OUR WORK". I also included a "BOOK NOW" button and an arrow button that allows the users to navigate through the website easier. The "BOOK NOW" button is meant for the users that are interested in the service and it will change in color once clicked. As for the arrow button, it will change in color if it is hovered and it will direct the users to the top of the page once clicked.

Figure 1.5 "contact page" progress (13/06/2025, week 8)

Moving on to the last page of the prototype which is the contact page where I firstly included the title and the company's address. Then I took a screenshot of a 360 map around the company from the internet and placed it on Figma. I blurred the photo and put a dark tone over it to resemble a 360 map. Though I also put a description to tell the users that it is a 360 map. Then I started on placing the company's contacts and decided to put it on different blocks to add more color to the page. After that, I put the same compilation from the first page to this page, but I added a dark tone so that I can emphasize the "BOOK NOW" button more. Once I was happy with the layout, I started on making the effects on the 360 map, contacts, and the "BOOK NOW" button. For the 360 map, I decided to include an outline to make it look more clean and I added an effect where the map will be brighter when a user hovers above it so that the users will know what they are going to open. Then for the contacts, I included a hover effect on the contact number and username. It is meant to direct the users directly to the contact page if they click on it. Lastly, the "BOOK NOW" button where I added a hover effect which will trigger the button to change color when hovered.

Figure 1.6 adding directions to buttons progress (13/06/2025, week 8)

After I was satisfied and done with the pages, I then added the different effects and different directions on all the interactive elements so that once the user clicks on a specific interactive element, that elements will know where to take the users to.

Figure 1.7 finishing touches (14/06/2025, week 8)

When I was done with the frames, I tested it first to see whether I need to improve on the interface more or not. So, after testing the prototype I found that the button that I used on the second and third frame was following the interaction the user did even on different pages. I decided to make a new button for the third page and I also did the same thing for the contacts on the third page.

Figure 1.8 first page jpg (14/06/2025, week 8)

CLICK HERE TO ACCESS WEBSITE PROTOTYPE

Redesign Goals:

Content re-arrangement for a better layout
Use a better color palette for an appealing and promising look for new users
Use other typefaces to invite users to read the information or browse

The key features that I added in my website redesign prototype are simplified navigations, simpler explanations, and structured work display. On the home page, I added a compilation of the work that the company has done. It is meant to indirectly tell the users that the company provides photography service. I also included the different services below, so that the users can see the different types of services that the company provides easier. Then, I included a footer on the bottom of the page that includes some more navigation for the users to navigate through the website easier when browsing and also some of the company's contacts so that the users can reach out to the company easily.

On the type of service page, where the users will be directed to when they click on a specific service. I simplified the long paragraph from the original website, so that the users just need to read the key points of the service. Beside the explanation, I included some of the work that the company has done on that specific service so that it is more pleasing to look at. After the explanation part of the page, I included the other work that the company has done on that specific service. In this prototype, I used "Corporate Photo" as the type of service. On top of the footer, I also included a "BOOK NOW" button and an arrow that is pointing upwards button. The "BOOK NOW" button is meant to give easier access to the users if they want to book a service and the arrow button is for users that wants to keep browsing on the website.

The last page of the prototype is the contact page, where I included the company's address and the 360 map of the area around the company to make users who booked a photoshoot can easily find the company's building. Then below that, I included some of the company's contact which can direct the users to that specific contact page if they click on it. Lastly, I put a compilation of some work that the company has done and overlayed a "BOOK NOW" button. It is meant to give the users an easier process if they are interested on booking the service.

While making the prototype on Figma, I decided to change a few elements from the wireframe. The first change I made was changing the "ABOUT" page and navigation to "CONTACT", the reason is because "CONTACT" was easier for the user to know more about how and where to reach the company compared to "ABOUT". The next change is on the first page that greets the users. I originally planned to put just an image of the company's work but I decided to make a compilation to show the users about the service that the company provides more. The third change I made is the corner radius that I used, because the original wireframe navigation actually has no corner radius but I decided to change it to have corner radius. Though in the end, I decided to stick with no corner radius since it was a professional website and I think that the rounded edges was making the website look not as professional as I want to. But, I did add corner radius to the "BOOK NOW" button on the type of service page to differentiate it from the other components of the page. I also added a bit more description to some of the pages, so that it is more clear to the users when they are browsing. For example: I added a "OUR WORK" title before the display of the company's work on the specific service. On the "CONTACT" page, the company only provided two ways to contact them. So, I decided to change it so that the contact is in different blocks. I also decided to add color, because I thought that the page was missing a bit of color. Another change on the "CONTACT" page is the "BOOK NOW" button that is on top of the company's work compilation. The reason of changing it was because I tried to make it exactly like the wireframe, but I did not like the overall look of it since it was a bit hard to read see. So, I changed it into a button instead. Lastly, I also decided to change the color palette colors to match the company's logo more.

During the period of making the prototype, I did reflect on the objectives that I set on the proposal. The prototype does have a more simplified navigation compared to the the original website's navigation because the original navigation bar was a bit out of place and unorganized. There are also different qualities of photos used in the original website, so I made sure that all the photos that I used was displayed in the same quality. For the layout, I made it much more easier to see and access for the users because the original website layout was a bit hard to view. Though for the color palette, I did not change much of it compared to the original website. Because I didn't want to include a variety of different colors since I thought that it might divert the users attention too much. However, I did change the font to a similar one since the original website font choice was a bit common.

PRESENTATION VIDEO:

Mr. Shamsul gave me some feedback regarding the prototype I made:

1. Change the navigation buttons into a navigation bar

2. Decrease the size of the footer and add a copyright notice

3. Delete the boxes behind the texts

4. Make the "BOOK NOW" button direct users to the contact page

5. Change the "BOOK NOW" button display on the contact page and make it into a form for the users to fill if they are interested in the service

He also recommended me to look at other references. Here are the references I explored while refining my prototype:

Figure 2.1 references (17/06/2025, week 9)

After looking into the new references, I changed a few parts of my website according to the feedback given and the references I saw as inspiration.

Figure 2.2 prototype development progress 1 (17/06/2025, week 9)

The first change that I did is on the first page that will greet the viewers, starting from changing the navigation into a navigation bar. To do so, I discarded the boxes behind the text and added shadows to make the text more readable. I also changed the hover effect, so that the users know what they are clicking on. For the logo of the company, I added a shadow effect so the users can see and read the logo better. Then I changed the background of the first page so that it fills the entire screen with the compilation of work that the company has done. Due to the change in size, I did resize the image for it to fit onto the frame and created another compilation.

Figure 2.3 prototype development progress 2 (17/06/2025, week 9)

The next change is to delete the boxes behind the texts and make the footer decrease in size. So the title "SERVICES" does not have any more blocks behind. The navigation and contacts on the footer are also decreased in size to fit the size of the footer.

Figure 2.4 prototype development progress 3 (17/06/2025, week 9)

After I finished changing the first page, I started on the type of service page where I deleted all the text of explanation and decided to just display the company's work of that specific service. I used the same size as the images below the services and embed the images on the rectangles.

Figure 2.5 prototype development progress 4 (17/06/2025, week 9)

On the contact page, I mainly changed the bottom part to a form. I used rectangles to create the overall size of the form and added placeholders. For the type of service, I added a hover effect that will change in color if the user hovers above it to make it easier for the users to know which type of service they are booking. I also added a hover effect on the other forms to indicate what information the users will be filling.

Figure 2.6 prototype development progress 5 (17/06/2025, week 9)

After I finished changing the prototype, I fixed some problems and added some finishing touches. Lastly, I decided to add animations and directions to each interactive elements for it to be more accessible for the users.

FINAL WEBSITE REDESIGN PROTOTYPE RESULTS

Figure 2.7 prototype development results (17/06/2025, week 9)

PROTOTYPE LINK

The first page that the users will see is a compilation of the work that the company has done. Then a navigation bar is located at the top right corner and the logo is placed on the other side. When the user hovers above any of the navigation bar on the home page it will turn blue in colour. Once the user scrolls down a bit more, they will be greeted with the different types of services that the company provides. If the user hovers above any of the image that represents the type of service, it will be brighter than the others to indicate the type of service that the user will be clicking on. Every page of the prototype has a footer on the bottom of the page that includes another form of navigation for easy access and the company’s contact information if the user wants to directly contact the company. Lastly, on the very bottom center part of the footer is the website’s copyright information.

The type of service page which the users can access if they click on the different type of services below the services part of the home page will direct them to a page specifically for that specific service that the user clicked on. The page will display the work that the company has done on that specific service. The last page is the contact page, where I included the company’s address and a 360 map of the area around the company for the user to find the company easier. If the 360 map is hovered by the user, it will turn brighter in colour to indicate what the user will be clicking on. Under the 360 map is the company’s contacts that will direct the user to that company’s contact page if they click on the number or username. The last part of the contact page is where the user can book a photoshoot. On the booking, I included some text boxes for the users to fill in their booking name, email address, and mobile number. Next to it is where the users can choose the type of service they want, which will turn blue in color once the user hovers above the button. I added the hover feature so the users can easily detect the type of service they are clicking on. After the user finished filling out the form, they can click on the “BOOK NOW” button to confirm their booking. For the navigation bar on the type of service and contact page, I used a black colored text so that it is visible.

There are a few changes I made based on the feedback given, the first one is changing the layout of the first page that will greet the users. I changed the navigation into a navigation bar and filled the entire screen with the compilation of the company’s work. I also decreased the size of the footer on all the pages since it was quite big. On the type of service page, I decided to focus more on displaying the work that the company has done so that the user can see the work clearly and focus on it more. The last change I made was on the “BOOK NOW” button that is located on the contact page. I changed it into a form, so the “BOOK NOW" button on the type of service page can direct the user to the contact page if the user plan on booking a photoshoot.

During the period of refining the prototype, I reflected on the goals I set on the proposal and did some more research. The refined prototype has a much more simplified navigation system for the users to access easily since I was quite confused when I was accessing the original website through the navigation bar they provided. There are also different qualities of photos used in the original website, so I made sure that all the photos that I used was displayed in the same quality. Then I made the layout of the pages much more structured so the users can see the content of the website easier. Though for the color palette, I decided to not change much from the original website because I wanted the users to focus on the company’s work more. However, I did change the font to a similar one since the original website font choice was a bit common.

FINAL PRESENTATION VIDEO

BACK TO TITLE

REFLECTION

When we were assigned to make the prototype for our website redesign, I felt a bit excited on making this project. Maybe it was because I was finally able to see the process work come to life. Though I was a bit reluctant at first, because I was afraid that I would not be able to do as well as I'd hope for. But in the end, I still had to face it so when I started it did not go as smoothly as I thought and that made me feel discourage. So, I experimented a bit with Figma first before I actually start making this project. To be honest, I liked the process of experimenting and making it since it feels like I am improving and it is fun to learn new things too.

The process of making the prototype was not as hard as I had thought since I experimented with the software before starting the task. Because I experimented with the software first, I have learned about how to operate the software much faster. Though there are some parts that needed improvement, like the minimal development made from the wireframe to the prototype. I have also observed some of my peers work and all of us had different approaches when making it. I do think that I could have improved the interface more, but I think I did pretty well during the process of making it.

During the period of making this project, I did have a lot of fun learning, experimenting, and creating the prototype. I also learned much more about how to use Figma and how to improve user experiences. Through this process, I realized that I can learn much faster if I experimented first before executing. For now, I do think that I should improve more on my creative thinking so that I could develop my designs better in the future.

BACK TO TITLE