Design Challenges Update

For the past few weeks I have been doing Adobe XD design challenges from Behance to create a mobile version of a personal finance site. It’s been fun seeing how auto animate works in more detail. The amount of embedded interactive elements you can have is also really cool. 

Home Screen

Starting things off, the main layout for the app was built. Icons were placed inside transparent boxes to make sure there was enough padding for touch screens. Using guides, the layout was made sure to not get too close to the edge of the screen. Preview mode was used to make sure sizing wasn’t too small or too big. Managing space on smaller screens is extremely important.

Scrollable Charts

With the base design ready, an interactive element was added to the home screen. This was a fun one because it contains nested elements. With scroll groups, setting a bounding box, you can choose how much of the image you want to view at any given time. This is great for showing a graph over time. Allowing the user to see a progression over time by scrolling through information. And within the graph, nested tap triggers allow users to turn on and off points of information to keep the screen less cluttered.

Payment

This was a good lesson in auto-animate. Creating before and after states of a button opening into a payment window, making sure both states contain all the same elements allows auto-animate to move objects into place smoothly when hidden off screen. Changing their distances from their final position also creates different timing in the animation.

Wallet

The wallet screen combined scroll groups and auto animate features. On this screen, you can tap which friend list you want to look at. This interaction slides a new scroll group into view from off screen. I also learned about using google docs to populate lists quickly with names and images. XD reads the columns and matches them to named groups in your project for quick results. This will be a huge time saver if you are working with lots of data.

User Profile

Lastly, creating user profiles that can be accessed from the scroll group adds one more layer to the interactions that can be created inside the previously built ones. It makes for a fairly robust prototype that doesn’t require any coding. I can’t wait to see what else I can do with it!

Please try out the prototype below. I look forward to bringing you more soon.