Objective
My main goal for this phase was to create wireframes that were extremely easy to navigate. I wanted my users to arrive at a destination in 3 or fewer clicks, and I tried to make sure my users did not have to think. I’ve incorporated Don Norman’s 6 principles of interactive design and Gestalt’s design principles into my prototype to improve the functionality of my wireframes.
Wireframes
My wireframe pages were based on previous sketches, and the flows and prototyping were based on my team’s sitemap. Creating a sitemap and sketches made it incredibly easy to begin the wireframes. The wireframes needed to be grayscale and exclude all images to focus on the functionality aspect. Before working on the pages, I created collections of various variables and the necessary atom elements to start.
I learned many things during this process with the help of YouTube, fellow classmates, and my instructors. I figured out new Figma features like overlays, more possibilities of carousels and component sets, different hover animations, and drop-down menus. I learned that repeating elements like carousel features cause confusion in differentiating information.
The new knowledge I gained from Gestalt and Norman allowed me to understand why each of those principles is significant. The principles that I found myself utilizing the most were proximity, visibility, feedback, consistency, and continuity. I was most interested in the many iterations of feedback and experimented with different hover animations. I think that feedback is important because users should be reassured of their actions.
Testing
We had our users use the Think Aloud method to navigate our wireframes. I tested 3 participants. One from each prioritized user group: students, parents, and faculty. I came up with 5 tasks for each set of users, depending on their roles.
Seeing in real time how each participant attempted to complete each task was incredibly eye-opening. There were many features in my prototype that were super obvious to me and even my peers, but not as much for individuals outside of class. My mom was one of the participants, and I received a lot of valuable feedback from her. Since she is not familiar with many academic terms and website interaction, she wasn’t aware of the definitions of some words and some features. This let me know that I needed to change a few terms for clarity. Professor Sang’s feedback was also very appreciated. Because of his knowledge on the matter, he asked many useful questions that helped me brainstorm ways to accommodate any confusion.
Challenges
While working on my wireframes, I had difficulty keeping track of and creating properties for my components. I learned that using properties is better than repeating similar components. Making carousels was not the hardest, but it was tedious because of all the different variations I had to keep track of. In the beginning, I had a habit of forgetting to name frames, but it became so much easier to design when I had my frames labeled. I also found connecting all of my overlays confusing because they had to be done individually.
Working through my challenges made me realize how much I enjoyed prototyping and seeing everything connect. I quickly got used to auto layout, and I’m still discovering the possibilities of the feature. Currently, I feel like the initial display of my home page is not as visually pleasing in terms of the layout and interesting features, but I’m struggling to find inspiration that is relevant to the VisComm program.
Leave a Reply