Objective
The goal of this final stage of the design thinking process was to apply final interactive prototyping to the wireframes from before and implement colors, images, and fonts. Before finalizing the website, a second round of testing was done to ensure that the website would meet user needs. I aimed to solve this by using red to tie the theme back to OU’s colors, repeated design decisions to communicate consistency, and adding interactive elements to create visual interest.
Hi-Fi Prototype
After I received feedback for my wireframes, I realized that most of my type were too big, so I went in and sized a lot of the text down. I also noticed that the layout of my wireframes were quite basic. To hopefully solve this issue, I incorporated some sections that were in a centered format to make the page flow more dynamic.
I received a lot of valuable feedback regarding placement and arrangement from Raju and the users who tested my wireframes. Some of the biggest changes I made include moving the alumni spotlight to the home page for more visibility, rearranging the layout of skills students learn and the application process information to be more interactive and accessible, and combining the separate resource pages into one. I also made a big decision that I’m currently not too sure of, which is removing my dedicated events page and not including news because I feel as though the current news that we have access to applies more to SoVA instead of our program and the information about the events on the homepage
is enough.
A/B Testing
I decided to do A/B testing on two different versions of a student work overlay, alumni spotlight arrangement, and a parallax of skill cards exploration.
I came across a dilemma while creating the student work overlay because I wasn’t sure if I wanted my users to be able to view bigger images of a project or provide contect to each project that was displayed, so I decided to create two variations. One overlay was an image carousel that had big images that accompanied the full screen, and the other was an overlay with more images pertaining to the project along with a description of the objectives and solutions. With the help of my users, I decided that the overlay with a description of the work is more successful.
I felt as though my alumni spotlight and the upcoming events sections appeared too similar, so I created a new arrangement that only displayed 3 alumni with descriptions that were automatically visible without clicking a button. Surprisingly, all 3 users voted for the scrollable horizontal arrangement of more than 3 alumni that had hover and click interactions. They said that being able to see multiple real examples of career paths was important.
I really enjoyed the idea of including a parallax animation in the home page of my website, so I animated my flippable skill cards to move to their dedicated positions on hover from a stacked formation. I quickly found out that the animation was overwhelming because the cards already had an interesting animation attached. The simplicity of the cards displayed neatly was more appealing to my users.
Challenges
I think the main challenge that I faced was making my website visually entertaining, yet easy to understand for all audiences. I loved the idea of a super animated website, but through testing, I figured that simplicity is better perceived. I think that because I aimed to create a website with many visual interactions, the theme did not turn out as academic as I would’ve wished. I also didn’t realize that assigning colors to the website would be so difficult, but I found myself spending a lot of time thinking of color placement.
The biggest takeaway from working on the Hi-Fi prototype, testing, and my challenges was that it’s incredibly important to not settle with an idea that you’re attached to because it may not be received well with potential users. This whole process also made me notice that all of the seemingly tiny interactions matter greatly.
Leave a Reply