UX Templates & Wireframes

Overview

AccuWeather is a local & international weather forecasting company with a robust website and mobile application. For new/innovative features to be added the UX team wanted improved user flows & pre-created wireframes to save time in the design process.

Project Focus

I was tasked with aiding the UX team to push more projects out rapidly. To do this I first created a standard library for User Flows based on competitive research and wireframes of preexisting mobile application pages. The flows include various shapes, arrows, test styles, colors, annotations, and triggers. The wireframes were created into components via Figma so that UX designers can easily drag/drop to create user flows swiftly.

Research

User Flows

I conducted competitive research to learn more about the best practices for User Flow diagrams. During this research period, I learned which shapes were uniform and how to set up an appropriate flow diagram.

After I understood the basics, I created my first iteration of a User Flow diagram. I would do weekly feedback sessions with my colleague to gain a better understanding of what the AccuWeather UX team wanted and needed.

Wireframes

For the wireframes, things were more straightforward. I compiled old Zeplin & Sketch assets into Figma to start building existing screens. Alongside, the weekly feedback sessions for the user flow I would also get feedback on my progress with the wireframes for AccuWeather mobile application.

Explorations & Iterations

Below you can see some of the early iterations for my flows & wireframes.

This was my first time creating wireframe in Figma, so they started out extremely rough. Though, I kept a hero in the upper left to define each of the different shapes, colors, arrows, and user icons. After several rounds of iterations, I decided to define that the flow should run left to right with "Yes" going up/left & "No" going down/right. I also decided to minimize the user icons since that may be confused with different UI cues. Colors also were minimized to only show major components that need to be highlighted. My initial thought was to make yes = green, no = red, and yellow = decisions. Though, all of the color distracted the design, thus defeating its purpose.

Here I have three iterations each reflecting a different color palette. I started out trying to mimic the application as closely as I could. Though, making the wireframe blue made it difficult to distinguish the different components so I created a dark & light mode. The dark mode had too much gray, therefore, the accessibility was low for visual cues. In the end, the light mode wireframe had the best contrast and was the most visually appealing for the design team.

The next feature that needed attention in my wireframes were for the in app icons (Sun, Cloud, moon, etc). I started out by created each as an ellispe, though, since the larger icons were also represented by ellispes, it became hard to distinguish the two at a glance. These were later changed to squares as you can see in the final design section.

With the graph component on the wireframes, the team wanted it simple and abstract enough for other designers to understand what it is without being influenced by a complete data chart. I made several levels of fidelity for this component. In the end, we settled on version 7 due to its simplicity and uniformity with other icons/components in the AccuWeather library.

Final Designs

components for the UX Team at AccuWeather. Each app page is organized to be taken apart like building blocks, so there is less headache when they need to edit them. A major change that was made from the initial explorations is the level of fidelity. In the initial pages, you see that all units/information is zero or a generic name. In the final designs, it was changed to house semi-real information. I found this to be less distracting & more natural for whomever the viewer may be.

Feel free to explore the final designs in the embedded Figma file below.

Some snipits of finished application wires.

If you'd like what you see feel free to email me. :)