The research plan I created for this project employs the use of different styles of gleaning information. The following methods each have their own strengths and merits when put into action:

Once the prototype was created, the last step was to test it. I performed three usability tests, to see what feedback users had in the two task flows I had created. What I found was that users articulated some of the text was too small, particularly the phone number at the bottom, and some of the “body” copy. This can be easily updated with future iteration due to creating font styles. Some reorganization may be in order once the text is large, but this can easily be done. One user, a non native English speaker, had a hard time reading the logo font, so a Vegan Mario’s logo redesign may also be in order to appeal to a broader audience. Another issue that came up is that text was gapping during the check out phase, so this was fixed. One of the most important IA issues that arose during the test phase was that even though users indicated “Classes & Services” would be an appropriate header to house gift cards, it was still difficult for usability testers to locate immediately. So, with these test in mind, I changed the header to “Classes & Gift Cards”, since gift cards were the only service offered. All in all, my most important take away from these tests highlighted the need to check my designs on a small screen, to ensure I am designing for users on smaller laptops. This bit of knowledge will serve my design process well for years to come, and was one of the best pieces of wisdom I received from the project.

After usability testing, I brought the body text size up from 12 to 14 at the minimum, to make the body copy easier for users to read on smaller screens. I also increased a few of the sub-header texts to header sizes, so they were more eye catching and denoted different sections. I decided to stay with Sahitya as the primary typeface, as it accented the branding of Vegan Mario’s, providing a sense of calm and artisanal quality. Since the font type was slightly too stylized for the numerical values in button fields, I chose Inter for a more straightforward numerical typeface. Creating a style guide helped create consistency as I brought the prototype up to high fidelity.

One of the greatest challenges in bringing the project up to Hi-Fidelity was choosing a color scheme. Fortunately, since I had made color styles in greyscale at the Lo-Fi stage, this would made swapping out colors easy once chosen, as sections already had color hierarchy to them. All that was necessary was to define the palette.

Usability testing of the old site showed users felt it was cold and unwelcoming, from both the overwhelming amount of text, as well as the lack of engaging colors. While users originally suggested “Thanksgiving colors”, to give a sense of warmth, this proved tricky in practice. The browns, yellows, and oranges that usually come to mind when thinking of thanksgiving, proved to be too clashing. To explore the idea of “Thanksgiving colors” and define a color pallet, I brought in a multitude of images based around bread, baking, and thanksgiving. What I came to find is that various shades of green were also involved in the color scheme around these images.

Upon exploring multiple images, I found a fantastic shade of green in a mug that accented a loaf of bread, and found it fantastically accented the white background and shades of the bread. I dubbed  the green shade “sage” and iterated a few lighter versions for different accents. To highlight the top navigation bar, I searched for a brown that would accent the green and provide enough contrast to ground the navigation bar at the top. I found the shade in an image where the brown was present in an illuminated candle on the table. this brown contrasted well with the white shades and proved to backdrop the sage color I had chosen as well. While these colors added a more refined aesthetic than Vegan Mario’s previous palette, it did clash with his logo. I redefined his logo with a minimalistic aesthetic, to give it a classy and artisanal feeling instead of a kitschy look. Since he advertises his bread as a form of art, it was important to design a website that was also artfully crafted down to every last element. The logo redesign is minimalistic in an effort to not draw attention, and draw the audience’s attention to main exhibit, which are Mario’s breads. Further consultation with the client would be necessary to further redefine the logo.

While these colors added a more refined aesthetic than Vegan Mario’s previous palette, it did clash with his logo. I redefined his logo with a minimalistic aesthetic, to give it a classy and artisanal feeling instead of a kitschy look. Since he advertises his bread as a form of art, it was important to design a website that was also artfully crafted down to every last element. The logo redesign is minimalistic in an effort to not draw attention, and draw the audience’s attention to main exhibit, which are Mario’s breads. Further consultation with the client would be necessary to further redefine the logo.

Once the stylistic attributes were brought up to Hi-Fidelity, it was time to adapt the layout for mobile use. Since hovers don’t exist on mobile, the top nav bar was changed to an on tap hamburger menu for easy navigation. This would not only include the main headings, but also the user portals such as search, and their profile sections. This way, the only icons that would appear in the navigation bar at the top other than the hamburger would be the cart, so users could see how many items they have added for purchase while still browsing. Other than simply adapting the sizing of images and text styles, it was also necessary to adjust the positioning to better suit mobile users. The bottom navigation bar was completely redesigned in a vertical hierarchy, to suit users needs for easily clickable navigation, and for a cleaner visual aesthetic on a smaller screen. A similar design was issued for the “You May Also Like” listings, as a vertical layout on mobile allows for larger images, which help users see products better, and to effectively help drive sales.

After adapting the Hi-fidelity wireframes for mobile, a few changes were made after receiving feedback on the design. The banner image behind “Welcome” was too high resolution and some found it distracting, so the image was slightly blurred to allow the “Welcome” text to pop out more from the image behind it. I also changed the buttons on both desktop and mobile to be slightly transparent, as users reported the desire to see the more of the images behind the buttons. Additional testing is needed to determine whether the brown “chaga” color style works well for the banner. Some users found it distracting, and would prefer a shade of the “sage” color, while others liked the brown and found it framed the site well. While there are always areas for improvement such as those listed above, users reported the new design is a major improvement from the existing website. In the words of one user, “it now looks like a legitimate and artisanal bread site that I would order from.” This, along with other user feedback, affirmed the website improvements are on the right track, and would improve with further refinement.