High Fidelity

After finishing the wireframes, it was finally time to put the finishing touches on the website and make it high fidelity. A lot of my components were already interactive, so I started including images and color. I spent a lot of time on the colors, most of them adhere to the University of Oklahoma’s design guidelines. However, I also wanted to experiment with my favorite color: blue. Trying to learn the different color modes and how colors transfer from one to another was challenging. It took a lot of trial and error to establish an adaptable color structure. Then, I made dark variants for both, making a total of four color options. I found that I had no idea how to make a button to swap the colors and other relevant components. However, with a little help, it made more sense. I also ran into a problem with my dropdowns, I accidentally deleted some elements, but it was relatively easy to fix. 

A/B Testing

During this phase, I also conducted A/B testing. I would make two different designs and have testers compare them. I thought the admissions page was too monotonous because everything was contained in separate shapes. Instead, I put text freely on the page and added a line element. At first, the line was too large and distracting, but I decreased the stroke. I made two arrangements for the admissions page and I wanted to know which was more clear and enticing. Testers said the second design was better because the line grouped information in a more linear fashion and the buttons were more clear. I also reworked the homepage, including text and a line element to match the admissions page, which made it more dynamic. Also, after going through my website, I was worried that student work wasn’t properly represented. Previously, if a project had several images, I fit them all within the overlay, making them smaller in order to fit. To try and resolve the problem, I made a carousel for the images. After the A/B testing, I received positive feedback. Testers thought the images were much easier to view. The carousel had the additional effect of allowing more images for each project. I also experimented with some different interactive elements. If I had a clickable shape with two rounded corners, I modified the interaction. If they were clicked on, the shape would invert, swapping which corners had rounded edges. I wanted more movement and interaction within the page. However after testing, it was clear that the interaction was distracting and disruptive to the viewer. I quickly changed my interactions back to normal.

Reflection

Overall, the high fidelity phase is probably my favorite part of the project. At this point, I have a fairly good understanding of where my website is going, and I get to polish and refine it. After months of work, I get to put everything together. Granted, I’m sure the website has room for improvement, but it is still fulfilling for everything to culminate into a working website.