High Fidelity Mockup for a Food Charity

The client asked me to rework the medium fidelity mockup I submitted to them and create a high fidelity color mockup. As part of my process I created a triadic color palette that includes earthtones from which I picked three—see deliverables. The charity sent me the basic requirements for the the layout. The founder of the charity was comfortable with me not only making the design but also composing the prose for the design. She requested that the design conveys the urgency of fighting world hunger but also to make sure that the fun aspects of the charity are depicted as well.

One of the biggest things I learned when designing this site is that oftentimes a little color goes a long way, especially with colors that are further apart on the color wheel. The blue and the green go together very well even when used liberally. On the other hand, the orange-red color, although part of the triadic color scheme, worked best when used sparingly for inner borders and buttons. I discovered that I really like the triadic color scheme in that it is an effective way of finding colors that work when used both liberally and sparingly.

Medium Fidelity Wireframe/Mockup

A medium-fidelity wireframe/mockup for an organization that fights world hunger. The organization wanted the personality traits of Honesty, Compassion, Respect, and Service to Others to really shine through for their website. Also, they wanted the design to have Inspirational, Descriptive, and Transparent UX Content as well.

To illustrate why fighting world hunger is important, I used both global and national hunger statistics to create a sense of urgency and also a call-to-action for the site visitor to donate. I also included transparent, inspirational, and descriptive UX Design content in the mockup. The client liked the mockup and hired me to create a high-fidelity color mockup.

Med Fidelity Blog Wireframe

A baking supply company asked me to create two iterations of a blog design: one that emphasizes their baking supplies and the other that emphasizes tech-savvy elderly women, their biggest client. I solved the first problem by featuring the baking supplies used for a particular recipe in the blog design. The second problem, I decided to feature top elderly female chefs who had contributed recipes to the blog.

By creating the two iterations for the client, I learned how to tie in different aspects of a company in a design to emphasize its different offerings. Ideally, this would change user behavior in that for the first design iteration, the visitor would become more aware of the baking supplies the company offers and would potentially purchase some of those goods and in the second iteration, the site might attract its biggest in-store customer, tech-savvy elderly women.

Weather App Prototype

The client asked me to create a prototype for a weather app. They requested that the deliverable should be a high-fidelity prototype that includes the current weather along with the forecast of upcoming days. When a specific day is selected, a new screen will appear with the weather specifics for that day including the low and high temperatures and chance of precipitation.

This was my first time creating an interactive prototype in Figma and I thoroughly enjoyed the process of designing the app and then making it interactive with the prototype. I also discovered that Font Awesome is a great resource for free UX Design icons. Also, I learned users can intuitively decipher images much faster than words. For instance, instead of using an H or L for low and high temperatures, by simply changing the color of the number to red and blue, the same information is conveyed in a more aesthetically pleasing manner.

Signup Form Wireframe

Sometimes with high-end UX Design tools, it is easy to get too detailed when creating wireframes. A pet adoption agency hired me to create a super simple wireframe for the desktop, tablet, and mobile views of a pet adoption form. After determining the stakeholders, audience, and goal of the form, I created a wireframe of the form using Balsamiq, which is a tool that really lends itself specifically to creating effective wireframes.

I had some preconceived ideas about how I was going to create a wireframe for the adoption form. However, I found it was much better to consider the needs stakeholders, audience, and goals of the form before I began drafting the wireframe.

Medium Fidelity Wireframe/Mockup

The client hired me to create a user flow for a hiking application. The goals for the business are to create healthier communities and more active individuals by giving people an easy way to schedule a hike, increase the number of hikes users go on, and increase the number of app downloads. Using the card sort located in the Deliverables, I was able to create an effective workflow of two different user personas.

During the process of creating the user flow, I was able to empathize more with the two personas and visualize the specific needs each user might have. For instance, one persona wants to be able to schedule hikes with his busy friends and the other persona wants to be able to meet new people while hiking. I included both capabilities in the user flow and subsequently the wireframe itself.

Blog Wireframe

A baking supply company asked me to create a low-fidelity wireframe that emphasizes recipes and the supplies they sell. The company came up with the basic requirements for the layout, which seemed limiting to me because I could only design how the blog would look above the fold and the header section is small, making it difficult to incorporate a traditional desktop nav—I opted for a hamburger nav.

The company liked the wireframe I created but looking at it now, I would probably write the word MENU over the hamburger nav to make it clearer what those three lines mean and I might even consider a more traditional desktop nav. I understand that sliders and carousels are often lowly regarded because of clickability rates, but in the context of a baking blog, I feel that they can be effective. I would consider using an expandable list to replace the sliders in the future. In order to get users to buy the company's baking supplies, I made sure to include advertisements in the aside portion of the design.

Research for a Grocery Store App

The client needed me to conduct interviews with grocery shoppers to determine their main pain points and develop a proposal for a grocery app based on those pain points. Participants were found using social media with a notice solciting primary shoppers of households to take part in a shopping study that is being conducted in order determine what features of a grocery store app might make grocery shopping easier and more enjoyable.

What was really revealing to me during this project was that it is best to let the subject lead the interview and that the best responses you get are often from broad rather than specific questions. Of course, you do not want to ask too broad of questions, but questions that make the user share unique, personal details about what you are asking. I used some of the participants' statements to create an affinity diagram as pictured here. I used the statements to create categories and then I placed the relevant statements under each category.

Grocery Store App Usability Test

Based on my research, the client created a prototype of their grocery store app and hired me to conduct usability tests to determine if the user could complete a simple task. The participant was asked to choose bananas, place the bananas in the cart, and then view the cart at checkout. I had all the participants speak aloud as they attempted to complete the task and was able to make recommendations for improving the prototype based on participants' feedback.

This project showed me the importance of usability testing in that no matter how well you think you can empathize with different user personalities, it is extremely difficult to predict what pain points the user might run into. For instance, when participant 3 pointed out that the number of bananas is not shown on the second screen, I was impressed and surprised by her observation. I included her input in my deliverables to the client.

UX Design Critiques

UX Design Critique of two websites, including color critiques and empathy maps

A company called Shirts 4 Mike hired me to critique their website using UX Design principles. In addition to determining the site's goal and target user, I broke the site down into the UX design principles of color, shapes, grouping, and balance and organization. I also created an empathy map of what a potential site visitor does, thinks, says, and feels in order to determine the effectiveness of the website and offer suggestions to improve it.

The most important thing I learned while critiquing the site was that the pictures and images of a website can be equally as important as the word content. In this case, I suggested that the client create an About tab to describe in more concise language what Shirts 4 Mike actually is.