INTERACTIVE DESIGN / ASSIGNMENT 02

Naura / 0356798 / Interactive Spatial Design
GCD60904 / Interactive Design
Assignment 02: Website Redesign Prototype

__________________________________________________________

Instruction:

• Develop a clickable prototype showcasing the key pages and features of your redesigned website.
• Ensure users can navigate the prototype and interact with essential elements.
• Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software.
• Key pages to include:
• Homepage: Display navigation, hero section, and key content areas.
• Core Content Page: Include at least ONE core page (e.g., About Us, Services, or Products) to highlight content organization and presentation.
• Contact Page: Demonstrate user interaction with forms or other contact methods.
• UX considerations:
• Usability: Ensure user-friendly navigation, intuitive interfaces, and accessible features.
• Interactivity: Include functional elements (e.g., buttons, hover states, and form fields) for a realistic user experience.
• Prototype: Provide a fully functional prototype via a shareable link or as a downloadable file.
• Write-Up: Add a 500–800 word entry to your e-portfolio. The write-up should:
  • Highlight the key features of your prototype.
  • Explain significant design decisions.
  • Describe how the prototype addresses the objectives outlined in your redesign proposal.

__________________________________________________________

To begin the redesign, I focused on creating a new logo in Illustrator. I aimed to stay true to the original website’s color scheme, basing the design on my initial sketches. The goal was to ensure that the logo aligned with the overall aesthetic while giving it a refreshed, modern look.

Fig 1.0 | Logo Design

Next, I prioritized redesigning the job postings, as they form the core content of the website. Initially, I used the wireframe layout I had planned for the project. However, upon reviewing it, I realized it lacked the professional and polished appearance I wanted to achieve. This prompted me to re-evaluate and make significant improvements.

Fig 1.1 | My Initial Wireframes

Fig 1.2 | My Old Footer Design (based on Wireframe)

I chose not to use this design because it had several issues that made it less user-friendly and less professional. The "Jobs by Country" and "Jobs by Industry" sections included an excessive number of links, which could easily confuse or overwhelm users. Additionally, the design was likely not mobile-friendly, as the large number of links and the absence of collapsible sections could create a cluttered and unorganized appearance on smaller screens.

 

Fig 1.3 | My Old Posting Prototype (with New Footer)

To refine the design, I explored ideas and inspirations on Pinterest, which helped me identify styles that better aligned with my vision. At one point, I considered implementing a card-swiping interaction for job postings to create a more engaging user experience. However, I decided against it due to potential development complexities. Instead, I opted for a simpler and more practical design approach that effectively conveys the content while maintaining a clean and professional look.

Fig 1.4 | PJobs' Redesigned Homepage

One of the key features I introduced in the redesigned layout was a tag-based filtering system. This design choice offered flexibility and a visually compact interface, ideal for enhancing user-friendliness. Initially, I thought the layout seemed too compact and considered switching to a checkbox-based filtering system. However, after discussing this with a friend, I realized that checkbox filters might give the interface an outdated feel. The tag-based filtering system, on the other hand, provides a modern and intuitive experience for users.

Fig 1.5 | PJobs' Redesigned Job Vacancies

For the job posting details, I structured the descriptions to allow candidates to quickly find relevant information. This was a significant improvement from the original site, where lengthy, unstructured sentences made it difficult to extract key details. Additionally, I introduced a feature that enables users to upload and manage multiple resumes on the platform. By saving templates, users can create tailored resumes and cover letters more efficiently, streamlining the job application process.

To enhance usability, I added two overview sections. The first provides quick insights into the main aspects of each job, such as required skills, benefits, and application deadlines. The second section features a user profile matching indicator, allowing candidates to quickly assess how well a job aligns with their skills and experience. This feature adds a personalized touch and helps users make informed decisions at a glance.

Additionally, I replaced the original website’s “Other Posts” section with a “Similar Job Suggestions” feature. This change allows users to easily discover alternative opportunities relevant to their interests and qualifications, keeping their experience focused and efficient.

Fig 1.6 | PJobs' Redesigned Job Listing

Lastly, I added a “Contact Us” page, which I felt was a missing and necessary feature from the original website. This page allows users to get in touch with the website’s support team quickly and efficiently, ensuring their concerns or inquiries are addressed in a professional manner. I believe this addition enhances the overall functionality and credibility of the website, as clear communication channels are crucial for building trust with users.

Fig 1.7 | PJobs' Redesigned Contact Us

04.12.24 Consultation:

When I showed Sir Shamsul my progress, he mentioned that the design was good overall but suggested a few minor changes to the homepage. One of his recommendations was to extend the box in the "Countries for Job Seekers" section. The initial design made it look like the content was placed inside a box within another box, which felt redundant and cluttered.

Additionally, he advised me to add a new navigation section for "Other Countries." In the original website, eight countries were showcased directly, making the layout appear messy and incomplete since it didn’t represent all the countries they cover. To address this, I added a button below the "Countries for Job Seekers" section. This button links to a dedicated page listing all the other countries, creating a cleaner and more organized layout. It also serves as a reference to the original website, preserving its core structure while improving usability and design consistency.

Fig 1.8 | PJobs' Redesigned Other Countries

Below is my Figma:

Unless you can't access it, click here.

Reflection:

To conclude, I’m quite satisfied with the final outcome of my prototype. In my opinion, it looks significantly better than the original website. While some might argue that it feels somewhat unoriginal because many job landing websites have a similar look and feel, I think that’s acceptable given that I’m still a beginner in HTML and CSS. For me, the focus was on learning and practicing foundational skills rather than striving for a completely unique design. 

Redesigning a website is not an easy task—it’s much more complex than I initially thought. There were moments when I felt that certain images or the placement of text didn’t feel visually appealing or aligned with the purpose of the site. This led to several revisions. As you might notice, my final prototype doesn’t perfectly match my planned wireframe. Initially, my wireframe was closer to a blog layout, which lacked the professional aesthetic needed for a job portal. Since I’m not a job seeker myself, I had to put myself in the shoes of potential users to understand their needs and expectations. To bridge this gap, I sought feedback from several of my older friends and my sister, who provided valuable insights. Their perspectives were incredibly helpful in shaping the redesign. I even asked them to test the prototype, ensuring that it was functional and user-friendly. 

Through this project, I also gained a deeper appreciation for the iterative nature of web design. Prototyping, testing, and revising are not one-time tasks but an ongoing cycle that ensures the design meets both user needs and technical constraints. While my skills are still developing, this experience taught me to focus on user-centric design, embrace feedback, and iterate persistently.