Wireframes

After making a site map and sketching designs, it was finally time to start making wireframes. I instantly set out, making atoms, molecules, and organisms. Then, I developed the navbar and footer to start my page. From there, I started to develop my individual pages. Immediately, I found this to be a daunting task, trying to turn my initial sketches into actual designs, wasn’t always a seamless transition. Not to mention, I had trouble with scale. I was constantly having to downsize my components and pretty much everything, so the screen space could accommodate enough elements and information. Once I managed to come to terms with everything, it was fairly easy to start putting everything together. Around this time, I had to create new variables in order to accommodate the spacing of my page elements. The elements were also looking too rigid, so I incorporated a rounded edge on the top left and bottom right corners. The rounded edge became one of my design tropes for the entire website. As I continued working, I quickly found that my website was going to have a lot of pages, so I started using overlays. I found that the overlays would act strange sometimes, especially my dropdown menus, but with a lot of prototyping, I managed to resolve the issue. Once I had a lot of the wireframes done, I gathered feedback from some classmates. They found my navbar to be distracting, and they didn’t know that they could interact with a lot of my elements. I was largely oblivious to how many of my components lacked interactive elements. I went back and created variants for a lot of my molecules. I also revisited my navbar, and with some help from the professor, managed to make it more cohesive.

Testing

Once I had finished the wireframes, I started to test. I recruited three participants, each representing my user groups: students, parents, and faculty. I would ask them five questions, such as: find junior course classes, faculty information, or student work. After conducting interviews earlier in the project, I felt more prepared for this testing. It went fairly smoothly. I just had to remind my participants to think aloud, so I could better gauge their interactions. I found that I still had issues with interactive elements. My drop downs had no visual indicator, and some interactions weren’t that noticeable. They also found some of my information to be grouped in a weird manner, they struggled to find degree expectations, financial aid and alumni. I moved some of the information to different pages, but I probably need to conduct another test to see if I was successful.

Reflection

Overall, making wire frames was stressful, but also really fun. My sketches didn’t seamlessly transfer into digital form, so it was stressful trying to create a similar layout. However, once I made a foundation for the website. It was really enjoyable. I like all the problem solving involved when trying to make components and interactive elements. I wasn’t the biggest fan of conducting tests, but it was absolutely necessary. They definitely helped me identify flaws in my design.