Project Background

The Muslim Student Association (MSA) is a registered student organization at the University of Washington and was in need of a new website. They went to DUBvelopers, now known as Web Impact UW and requested a website that would represent their club well.

Moodboard

Researching MSA and understanding the club was how we began our project. We wanted to create a website that truly resembled the club and what they stood for. Creating a mood board was how we began ideating and testing out different looks, such as with their logo.

Lo-fi Wireframing

Once we understood MSA better and had a grasp on what they wanted for concepts we moved forward into wireframing and the layout of the website. The focus of the wireframing was to get a design prepared to show MSA and get their feedback on the pages and content put into the website.

Hi-Fi Wireframing

Final Design

High-fidelity wireframing was our next step, but before we checked in with our client and showed them the work we had up to that point. We asked for any feedback on the pages, themes, photos, and text planned to be used for the website. Given approval we began our design plan. I was in charge of editing several of the text excerpts, as well as designing the opening page, gallery, about page, and about Islam page.

Once wireframing was complete, we moved on to prototyping and assembling all the components. We finalized the layout, added colors, text, photos, and established the overall flow. Using Figma, we created an interactive version of the website to simulate how the final product would function.

Mobile Final Design

Final Design Mockups

Being a part of Web Impact UW was incredibly helpful for my early development as a designer. This was the first project where I focused primarily on design, using Figma as my main tool. Throughout the project, I gained experience in wireframing, prototyping, and creating interactive designs. I also learned how to adapt website layouts for both desktop and mobile, ensuring a smooth user experience across devices.

This was also a new experience for me, as I had to adapt to working with a new team. I enjoyed collaborating with everyone and learned a lot from my teammates. Our communication was excellent, especially when meeting deadlines, and our year-end showcase was a success.

Next, we completed the mobile version of the website. I adapted my assigned pages to fit smartphone screens, ensuring responsiveness and usability. This was the final stage of the design process. Once finished, we handed the design off to the coding team for implementation and publication of the website.

Reflection