I participated in a subset of the Adobe XD challenges between Sept. 29 and Oct. 9 with the goal of improving my visual design skills by focusing on smaller sets of screens. The Adobe XD challenges have a great community of folks providing feedback, and I really enjoyed participating. Below I’ve captured some of the aspects I was most proud of in my designs and which areas I think could continue to be improved.
To-Do App Using Stacks
The first challenge I completed focused on creating a to-do app utilizing Adobe XD’s Stack functionality to organize and rearrange items in the list.
Celebration: I wanted to make it clear to a user that they had picked up an item to move it to their Top 2 or elsewhere in the all tasks section. By increasing the shadow blur once an item was selected I was able to achieve this.
Critique: Because I’m newer to visualize design, I’ve tended to stick to utilizing one prominent color in my designs because it feels safer. This has led to a simplistic feel (not necessarily a bad thing), but I wanted to challenge myself to incorporate a broader color palette moving forward.
Media App Using Auto Animate
The second challenge I completed focused on utilizing auto-animate to transition between screens in a media library. My personal spin on this challenge was creating a platform for musical theater performers which contains sheet music, scripts, and space for personal recordings.
Celebration: I used more than one color! I tried to move outside of my comfort zone a little with this project and start playing around with a broader color palette. I picked up colors from an image that had the calming, creative tone I wanted the app to evoke (see image below).
Critique: I flip-flopped between showcasing the cover of the full songbook and just the individual sheet music within the library view. If this was a larger project, this is something I would want to investigate in UX testing because it felt like I was debating a functional vs visual choice that would need user input. I would be interested to know which one creates a more intuitive experience for the user and helps them quickly navigate to the song they want to view.
Trivia App Using Component States
Inspired by a recent experience I had with virtual group trivia, I used this challenge on component states to create a virtual trivia platform.
Celebration: One of the top usability heuristics for UI design is providing users with visibility into the system status. I tried to incorporate this principle into my design by including a section which shows which users have voted or answered a question and who the platform is waiting on to move forward. One challenge I’ve encountered in trivia apps with friends is knowing when everyone has voted/answered and when we can move on.
Critique: During a challenge review call, the host of this XD Challenge series, Peter Deltondo, went through my project. The primary feedback I received was to bring in more of the branded elements from the first screen into the rest of the experience. In my final iteration of the design, I updated the topic cards and activity statuses to showcase the color palette. I wasn’t 100% satisfied with the final colors but they were a step in the right direction.
FAQ Page Using Anchor Links
For this next challenge I created an FAQ page for a bookstore that utilized anchor links to navigate to different FAQ categories.
Celebration: The primary challenge was to use anchor links, but I tried to incorporate a hover state as well for the navigation to help users know what they were going to be clicking on.
Critique: I think I could continue to refine the layout of the page to ensure the navigation, header, and questions are appropriately spaced.
For the final challenge I created a chart showing the breakdown of categories within a budget that rotates as a user shifts to a new view.
Celebration: I was proud of how smooth the animation ended up after a bit of fine tuning to make the entire chart and labels one component.
Critique: As with any microinteraction, it’s important to try to delight but not disrupt the user. This challenge was good for practicing animations in XD, but if it was part of a larger project, I would want to make sure the microinteraction adds to the experience or information on the page.
- Video: How to Turn UI Designs Into Video Using Adobe Premiere
- Article: 8 Great Adobe Fonts Combinations to Use in Your Next Project
- Type-Scale: A visual calculator for determining typeface sizes
- Article: 10 Usability Heuristics for User Interface Design
Be sure to check out the Resource Hub for a curated set of resources that are helping me in my UX/UI learning journey!