Project Details

TOOL USED: AdobeXD, Illustrator

ROLES: UI Designer

DURATION: 1 month

Project Context

As a web designer at Forbest Academy, I had the opportunity to create a website design from scratch, working closely with the institute's stakeholder and collaborating with the back-end development team. The primary goal was to develop a user-friendly and visually appealing website that catered to the institute's requirements. However, due to limitations in terms of cost and time, certain features had to be omitted.

Stages

• Requirement Gathering: I initiated the project by having in-depth discussions with our boss, who acted as the main stakeholder. This phase involved understanding the objectives, target audience, and specific features he wanted to incorporate into the website.

• Wireframing and User Journey: With the gathered information, I proceeded to sketch out the initial wireframes. These basic representations helped in visualizing the website's layout and structure. Simultaneously, I focused on mapping out the user journey, ensuring a seamless and intuitive experience for visitors.

• Collaboration with the Back-End Team: As the design progressed, I collaborated closely with the back-end development person to communicate the design requirements effectively. My knowledge of HTML and CSS played a crucial role in facilitating smooth communication and ensuring the implementation aligned with the design vision.

• Mockups and Visual Design: Once the wireframes were refined, I transitioned to creating high-fidelity mockups. These mockups incorporated the institute's branding guidelines, colors, typography, and imagery. Careful attention was given to maintain a cohesive visual language throughout the website.

• Iterative Feedback and Refinement: The mockups were presented to the stakeholder for feedback and validation. Through constructive discussions and iterations, we fine-tuned the design to meet the institute's expectations. This phase involved making necessary revisions to enhance the user experience and address any concerns.

• Development and Launch: After the design was finalized, the back-end development team took over to bring the website to life. They implemented the design, integrated necessary functionalities, and ensured the website was responsive across various devices. Quality assurance and testing were conducted to rectify any issues before the final launch.

Takeaways

Effective Collaboration: Working closely with both the stakeholder and the back-end team allowed for a cohesive design and efficient communication. Regular meetings and open discussions ensured everyone was on the same page, leading to better outcomes.

Balancing Constraints: While it would have been ideal to include all the desired features, limitations in terms of cost and time required careful prioritization. Being adaptable and understanding the constraints helped in making informed decisions and delivering a functional website within the given resources.

User-Centric Approach: By placing the user at the center of the design process, we were able to create a website that addressed their needs and provided a seamless experience. The user journey mapping and iterative feedback loops allowed us to refine the design based on user feedback.

Continuous Learning and Growth: Throughout this project, I had the opportunity to enhance my skills in HTML, CSS, and collaboration. It reinforced the importance of staying up to date with emerging technologies and maintaining effective communication channels to achieve successful outcomes.

In conclusion, this project involved the end-to-end design of an educational institute's website, from gathering requirements to the final launch. Despite limitations in terms of cost and time, the collaboration and user-centric approach resulted in a visually appealing and functional website that met the institute's objectives.