https://www.monicadivito.com/contact daily 0.75 2022-04-21 https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/dfd224dd-8eaf-46eb-b792-7e1d41c73eee/sunset.jpeg https://www.monicadivito.com/about daily 0.75 2022-07-15 https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/068ed3fb-9ceb-44c6-8416-401c0a223408/path.jpeg https://www.monicadivito.com/monicahome daily 1.0 2022-07-15 https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/6ffa1b74-623a-4463-a219-1a190ceafa81/headshot.jpg Home - Monica DiVito UX Designer Motivated by learning and connecting with others by listening, writing, and creating effective designs with the hope of adding a breath of fresh air to everyday life. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/1df9d957-7ce7-44e8-9d51-8a5dbabb409f/Educationmockup.png Home - Help others achieve. The task was to redesign a government website. I chose to work on the U.S. Department of Education site because of my extensive experience in teaching and learning. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/6706c3fa-7071-4e05-b52e-ddf89b4281f2/Firefightermockup.png Home - Support a cause. The challenge was to work in a small group and redesign a website for a non-profit organization. Our group chose the Firefighters Charitable Foundation because we had all been affected by recent fires in our area and were motivated by the idea of helping out through design. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/6602170c-1234-47b0-a462-c754af6d5d3b/Sweetsmockup.png Home - Make life sweeter. This group project was aimed at solving an everyday problem. Living in the mile-high city motivated us to create Top Sweets which is an app to help those who bake at high altitudes. https://www.monicadivito.com/firefighters daily 0.75 2022-07-15 https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/af6a13c4-5a71-4396-be4c-c838734ebb64/Firefightermockup.png Firefighters - A whole new design in less than 3 weeks. Our team of four was given the challenge to do a website redesign in 2.5 weeks! We chose the Firefighters Charitable Foundation because we felt compelled to help fire survivors after witnessing a devastating loss of homes from a recent wildfire in our area. We wanted to help others who also felt the urge to get involved. We wanted to update the site to make it visually pleasing. We wanted the site to be easy to use on desktop and mobile. Ultimately, by updating the site our hope was that the number of donations and volunteers would increase so that more survivors could get the help they need. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/679c243f-d216-4fff-b40f-8e83d7a1759f/illustrationfiretruck.png Firefighters - Time for research. We each conducted 2 user interviews, using an interview plan that I wrote, in order to get a better understanding of our users and the problem. I was curious about how and why people decide to contribute to a cause in hopes to find insights to encourage more people to use the site. Key Take-Aways: most people prefer to donate to local organizations many prefer to connect with trusted organizations that they find through family, friends, and social media the biggest obstacle to volunteering was time people wanted to know WHERE their donation is going The findings presented a challenge; We needed to figure out a way to add a local aspect to our national site. Click the button to see the full interview plan that I wrote. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/bf78dc5f-ec98-4f52-9d07-195d5448dae2/Storyboard.png Firefighters - Tell a story. From our user insights, we created a user persona to help us contextualize our site. We used the storyboard method, using our persona, as a guide towards a solution. Then we collaborated on a Miro board by doing an affinity map to find relevant themes in our user research and the "I like, I wish" method to come up with some great features. We prioritized the ideas using a matrix. All of this work helped us get closer to a solution. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/e79d2fe3-ad0b-4638-a726-2ea60feb8cb5/Mood+Board.jpg Firefighters - Set the mood. We all set out to find some new inspiration for our new design by creating mood boards. We found that when we compared our boards, we were on similar pages as far as the mood. We had similar colors and we chose images that were more uplifting and bright rather than sad and dark. This proves our intrinsic desire to show the work the organization does in bright light rather than from a place of fear. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/50aa76e0-e1bd-4df3-9f30-a7905c025414/firefighterwireframes.png Firefighters - Wireframe it. After all this researching, generating ideas, and moving to a solution, we could finally start working on the website. We started creating low-fidelity wireframes based on our research. We conducted user tests to see if users could contribute locally. They could, but not easily. So, in the mid-fidelity wireframes, we added another major button, but users were confused by the directions on both buttons and they didn't know which one to choose. We also picked a fun color, melon, that passed accessibility testing as well. However, an overwhelming majority of users disliked the color. We made the directions more concise and clear on the buttons in our last iteration. Now users could easily decide what to do. Check out the iterations of the homepage. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/17332768-f4b2-4ce0-8dcf-adae9832fa11/Style.png Firefighters - Style it. We collaborated to create a style guide to make the design of our site cohesive with a modern look. We each took a task such as finding images and icons, designing buttons, ensuring accessibility with colors, and choosing typography. Initially, we chose a fresh melon color but it didn't test well. So, we decided to stick with a classic fire engine red and a charcoal color that gives a dependable and trustworthy feel. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/b25b89b0-be97-4495-9261-397a330ac07a/firebeforeansafter.png Firefighters - Learn from it. We are so proud of the dramatic improvement we have made on this site from the original to the most recent iteration. We learned that working in a group was both challenging and rewarding. We had to blend all our individual design processes into a group design process. We also had to figure out the best way to communicate with each other. We found that we all learned something from one another and that we were able to work quickly when we all put our heads together. Frequent communication and flexibility were both keys to making it work. Next steps We would like to continue to build the remaining pages of the desktop and mobile versions of the site. We would continue to test as we go to ensure that users can easily find their way. To view the complete case study, please click the button. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/2b1d99ea-7e56-4a8f-b73d-76ddde0cf7a6/Firefightermockup.png Firefighters - Prototype it. All of our work culminated in a working website prototype that we built in Figma and tested using A/B testing as well as user testing. Our user flow was created for someone who would like to get involved locally and order two hygiene kits for the Superior fires in Colorado. Or, someone could choose to "Donate Now" to go straight to donating. Click the button to check it out! https://www.monicadivito.com/education daily 0.75 2022-07-15 https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/644bc55f-3c4d-4b5f-8320-9bbf0a8b384f/Educationmockup.png Education - A clear direction for users. I chose to work on the U.S. Department of Education site because I knew from experience that it is a dense site that is used by a variety of people from students, to parents, to teachers, to policy-makers. Therefore, improving this site would help a large audience. Make the site clear, direct, and digestible for everyone. Give the site a fresh look while keeping to the brand. Ensure resources are accessible to those who needed them. The ultimate impact would be that lives would be improved with better access to resources and knowledge. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/e4ab5ab5-08a6-423c-95b3-e54957edd69e/Edmatrix.png Education - Research it. It all began with lots of research and synthesis of that research. I brainstormed a proto-persona, Carly Ramirez, who is the first in her family to attend college and needs a clear way to fund her education. With Carly in mind, I conducted 7 user interviews to learn more about their wants and needs. I recorded and transcribed the data. Then I prioritized their ideas using a prioritization matrix. Key Take-aways The amount of information on the site is overwhelming, so it needs to be better organized. The mobile site was clunky and should be updated for better usability. Grants should be a priority over loans because they are gifts of money that are interest-free. Current navigation system works but could be improved for clarity with drop-downs. Images should convey content. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/e667230c-6ea8-469f-9ab6-f1a8db06f6f5/Edannotations.png Education - Research it some more. A full heuristic analysis was done on the current website to flag improvements that could be made while taking into consideration the user research as well as usability testing on the navigation. An analysis of the logo was also done to ensure that the updated design would convey themes of professionalism, trustworthiness, knowledge, and success while still keeping the current logo. Key Take-aways Design is not consistent. Aesthetics are confusing. Headings seem like links because of colors. Images do not convey meaning. Top navigation and footer do not correspond. Overwhelming amount of text. Too many acronyms are hard to understand. Top navigation does not show where to find specific items. Category names are not clear. Images do not convey meaning. Footer takes up a large portion of the page. “How do I Find…” section is not useful; the Search bar is more helpful. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/343a3eda-5575-42c2-8d16-b04f59f70cd1/Department+of+Education+Sitemap-4th+iteration.png Education - Solve it. I started with the navigation since that seemed like the biggest problem. If a user, like Carly, couldn’t find the money she needed, she might not attend college. Or, she might mistakenly apply for a loan first, which needs to be paid back with interest. I first did a card sort exercise to get ideas on how to organize the whole website and create clearer navigation. Then, I created and iterated a site map to arrange the vast amount of pages on the site. Steps to a solution Created fewer and clearer categories to help users find what they need. Two categories became one “funding” category, to make it obvious where to go for money. Reduced volume of text and pages to be more concise and easier to digest. Listed pages in a meaningful order that could be used as drop-downs in the navigation. Designed a smaller footer that still provides important services to users. Planned recognizable utilities at the top of the page to provide extra help when navigating. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/565f6794-2c77-4bcc-854c-ab4bccb20e87/Edbeforeandafter.png Education - Experience it. The results are dramatic with an updated professional site that anyone can use to easily get funding for a school or a project on the right, compared to the original site on the left with too many choices. Now the site has a clear navigation system, with drop-downs, so users can find what they need as well as a design that projects the idea of success. Click the button to try out the desktop prototype on Figma. Imagine the user-persona, Carly, as she navigates to get funding for her upcoming year at college. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/e2d66a97-42f4-4dab-87af-a9d1ea186828/Edwireframes.png Education - Iterate it. Each new set of user tests, using a working prototype built in Figma, led to better design and functionality on the mobile sites. Notice the progression from low-fidelity to high fidelity. Images were replaced with a navigation bar. Icons became more to scale. Purpose became clear with prominent placement of mission statement. Style guide was applied. The same process was used for designing the desktop site as well. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/a04bc164-1555-45d6-989b-e880035e2d12/EDbeforeandaftermobile.png Education - Try it on mobile. When comparing the original design on the left to the updated design on the right, it is easy to see how the solutions improve the experience. Users, like Carly, now have a clear path to getting funding for their education. This mobile site now has a clear purpose, a familiar navigation system and ways to connect. as well as a clean and professional aesthetic that follows the intent of the style of the brand. Click the button and try the mobile prototype on Figma to experience the improvements. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/2e0e8e94-061f-46df-85de-59b991ef3f6c/edmoodboard.png Education - Reflect on it. At the end of any project, I like to think and ask myself how it went, what went right, what went wrong, and what I can do next time. Sometimes, I like to go back and look at my first inspiration boards and potential solutions to evaluate how much the ideas remained constant or revised completely. In this case, when I look at the mood board on the right I can see that the ideas of success and knowledge, as well as the color palette, definitely inspired the final designs. I learned that working individually on a project was easier to coordinate but less dynamic because I missed the input and collaboration of everyone’s talents coming together. One of my biggest challenges was actually the smallest part of the page, the social icons. I had a hard time scaling them to the right size and I was reminded that even the tiniest of objects can have a big impact on the design. The project was also a good demonstration of the importance of user-testing because features that I thought would be important, like button states, never came up. So, user input kept the project on track and moving in the right direction. Overall, it was rewarding to improve such a big site that is used by a large audience. Next steps Build out remaining pages on both mobile and desktop. Create interactive button states and test them. Click the button to view the entire case study. https://www.monicadivito.com/topsweets daily 0.75 2022-07-15 https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/aa1747c6-53f1-48b7-ba82-e33ebabaa018/Sweetsmockup.png TopSweets - Invent it. This project is by far my favorite because it was the first time I experienced the rush of excitement to see my idea transform into an actual working prototype that could be so helpful to so many people, including myself. This was a group collaboration to solve an everyday problem. I was thrilled that the group chose my idea of helping people who bake at high altitudes. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/bf28e5bd-0a38-4066-8024-78dfc283f4e9/bakingresearch.png TopSweets - Research it. The idea was initially inspired because my son’s birthday was coming up and I needed to figure out how to make an egg-free cake at a high altitude. At first, our group wanted to help all cooks with any dietary restrictions. However, we learned sometimes we need to let go of our initial ideas and start over. We conducted a survey using Google Forms and interviews using Zoom as well as researched statistics about high altitudes. Key Findings Almost all bakers need to make some kind of modification or substitution when baking. 90% of the respondents attributed these modifications to high altitude. A surprisingly large amount of the population lives at high altitudes. Ultimately, based on the research we conducted, we decided to focus only on the idea of helping bakers at high altitudes. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/beace34f-5bd4-4721-bf77-0d50f461272d/bakeiterations.png TopSweets - Build it. Test it. Iterate it. All of this data collection and user insight helped us each to create a user flow with a clear beginning and end. We also individually created low-fidelity wireframes with working prototypes. We also each practiced testing our prototypes to find out what was working and what wasn’t. Initial Findings All users paused at the camera/input screen signaling confusion. All users were successful at completing all tasks. All users commented on the ease of use. You can see how the findings led to screens that were chunked for easier reading. Click the button to try out my low-fidelity prototype, so Emily can get help with her baking. I was proud that my initial prototype was the only one that actually worked for users to be successful in all tasks, so it was chosen to be used as the base for the next iterations. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/59a76a3e-0ec4-4ce4-b0f5-717de2417346/competitiveanalysis.png TopSweets - Size up the competition. We continued to gather more information to fine-tune our problem and work to a solution. We did an affinity map activity to find themes in the data, and developed our user persona, Emily, who had a similar story as mine featured on a storyboard. We also completed an “I like, I wish” activity and utilized the feature prioritization method all while researching what baking apps were already out there. Key Findings Only one app was geared specifically to high altitudes and it was only available for Android. Many agreed that using the app without having to create an account was a strength. Taking all this research into account we crafted a user insight statement that would help us to stay on track: “Upon analyzing our research, we found that people who bake at high altitude have not found any mobile apps that are useful in making modifications to recipes for high altitude. Emily, a loving mom who recently moved to Denver with her family, enjoys baking for others. She needs a way to modify her own recipes easily because she feels fulfilled when she can comfort others with her delicious treats.” https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/e1454dc3-69d4-42cb-b9eb-8e9e8316318f/bakingflow.jpg TopSweets - Go with the flow. We had to figure out the actual flow of each decision for our users to achieve success on the app. All three iterations of the user flow that I made are included, even if all the steps can’t be seen, in order to show how the flow became a bit more involved and improved for the user experience as we all combined our ideas. Bringing in all of our ideas and prototypes to form one prototype was not easy. We really needed to keep going back to our research and user insight to keep us on a “happy” path. On the bottom iteration, you can see that there are more decisions for users, noted with purple diamonds, so that they can upload a recipe either by hand or by taking a picture, or even using a picture from their library. Users also have the option to save their converted recipe which prompts them to create an account near the end of the experience, if they so choose. This decision was inspired by the competitive analysis when we found users enjoy using an app when they are in the middle of something in the kitchen, and then decide later if it is worth creating the account. Click the button to experience the group low-fidelity prototype with all these new paths and no dead ends. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/0e872d3a-15be-4641-842a-0e59a8654504/Sweetsmockup.png TopSweets - Think about it. This project focused on the user experience including research, testing, wireframing, and prototyping. It was also a lesson in group collaboration as well as mastering new tools quickly. The design featured in the mock-up is similar to how I ultimately envision the app to look, however, I will need to come back to this project to actually design and apply user interaction skills. As a group, we were proud of what we had accomplished in only 3 weeks’ time. What we learned: Communication is key to good collaboration Utilize the strengths of each member of the group. Teams can create more quickly than working solo. Feedback from users drives the work forward. Next Steps: Explore dietary restrictions as another feature. Explore a feature to save notes. Update to mid-fidelity. Keep testing and iterating. This is where the story ends for this project. I’ve learned you need to celebrate each small win as they come to fully enjoy the work. This app started as an idea and ended in a tangible prototype that actually works. I’ll take that as a win! Click the button to view the entire case study. https://www.monicadivito.com/work daily 0.75 2022-07-15 https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/1df9d957-7ce7-44e8-9d51-8a5dbabb409f/Educationmockup.png Work - Help others achieve. The task was to redesign a government website. I chose to work on the U.S. Department of Education site because of my extensive experience in teaching and learning. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/6706c3fa-7071-4e05-b52e-ddf89b4281f2/Firefightermockup.png Work - Support a cause. The challenge was to work in a small group and redesign a website for a non-profit organization. Our group chose the Firefighters Charitable Foundation because we had all been affected by recent fires in our area and were motivated by the idea of helping out through design. https://images.squarespace-cdn.com/content/v1/625f0c2427606a2acdcff5d9/6602170c-1234-47b0-a462-c754af6d5d3b/Sweetsmockup.png Work - Make life sweeter. This group project was aimed at solving an everyday problem. Living in the mile-high city motivated us to create Top Sweets which is an app to help those who bake at high altitudes.