A9: Static Mockups
Hunter McCormick
April 2, 2025
Get Hunter McCormick’s stories in your inbox
Join Medium for free to get updates from this writer.
This assignment provided opportunity to apply a semester worth of UX and Figma lessons into one high-quality project. After a lot of time, hard work, and learning, I am satisfied with the my BadgerWorks app design mockups up to this point in time.
I used my medium fidelity wireframes as a baseline for each high-quality screen, converting assets used in those designs into components for repeated use. While most mockups resembled their wireframe counterparts, I purposefully changed a few screens, namely the community group screens. A personal goal of mine for this assignment was to practice design using Google’s Material Design 3 system. This design uses elements like shading and cards to resemble physical interactions.
I also thought this paradigm style would be useful when we learn about animation in a couple of weeks. My skill roadmap also departed from the Duolingo-inspired screens. I did this because I wanted the roadmap to metaphorically and visually mimic an actual road rather than using a derivative design of a popular app.
I spent significant time on this assignment because I tried to employ the best practices we learned in class. I practices making and using components, using grids, naming conventions, and autolayout, acting like I was a professional designer when I worked on the mockups. For some reason my Figma would not allow me to use variants, and it was a bit challenging to work around this hurdle at first.
I used OpenAI’s GPT 4-o and o1 models to generate unique community group avatars to make the screens feel more alive. I also used AI to make a high-quality professional Bucki the AI Coach avatar and the skill roadmap icons for the same reason. I’m generally opposed to using AI in design settings however, the time sink for designing custom graphics for each element was too large if I wanted to turn the assignment in on time. Unsplash also provided generic images for mock link screens and organizational bio galleries.
After completing the screens, I realized something was still off. My color palette faced issues with contrast, conflicting color pairings, and simply did not look great. I changed the background to an off-white and used the University of Wisconsin-Madison shades of red for primary and secondary colors. To keep it simple I also white and black for font color. These changes improved the aesthetics of the design and taught me that even in the final stages of design, iteration is still possible.
