Adobe XD Challenge: Bill-Splitting App

When I finished my General Assembly course I wanted to get more familiar with Adobe XD and also find a way to practice UX/UI skills more regularly. As luck would have it, the Adobe XD team runs a series of Daily Creative Challenges with a wide range of topics, and uses Discord to create community around the projects and provide feedback.

When I started completing the challenges I was mainly focused on recreating exactly what was being shown in the video, maybe adding my own color palette or fonts, but largely following the host. Now I like to use the prompt as a challenge to come up with a design independently, and then later review the video to see what I didn’t consider and where I might have brought my own unique spin.

This week I did quick concept sketches of four of the challenges from the latest series before landing on the one I wanted to build out further:

Prompt: Create the interface for a bill-splitting app. Prototype the splitting experience with drag triggers and Auto-Animate, allowing users to choose shares with sliders.

Ideation and Sketches

An assumption I brought to this project was that people probably wouldn’t be looking for an app that only split a dinner bill evenly (i.e. a calculator is probably faster if all you’re doing is division). When I reflected on my experiences at restaurants with friends, I thought about the common challenge of trying to figure out who ordered what and by extension, who has to pay for what. I’m personally not a fan of the call to “ just split it evenly!” when some folks ordered much more than others, so I wanted to think about ways for people to claim an item, or portion of an item, as their own.

For my initial sketches I wrote out the key activities I thought would be necessary when wanting to split a bill:

  • Picking friends to split the meal with
  • Uploading a receipt
  • Choosing the amount to be paid by each person for an item (and incorporating a slider per the prompt)
  • Requesting a payment or paying a friend (i.e. if I paid the full bill on my card, I need to ask x,y, & z friends to pay me or vice versa)

Next I quickly sketched out the key activities. Instead of sketching this out on paper, I tried using the Concepts App on my iPad, and so far I’m loving it!

Sketches of screens for a bill-splitting app including user selection, receipt upload, item selection, and total amounts owed.
Sketches and activity notes

Low-Fidelity Prototype

Even with “quick” daily projects, I like to create a low-fi prototype because it enables me to validate some of the thinking in my initial sketches and also test out the animations. Using a Drag trigger was new for me, so I wanted to make sure I understood the functionality before jumping into a higher-fidelity design.

I ended up with 12 artboards that included the screens I initially sketched as well as the various states I needed for animations. Some things that ended up differing from my original sketches included:

Friend Selection Buttons: I initially sketched the user selecting an “Add” button when choosing who they wanted to split a bill with, but decided I could simplify the interaction by using empty circles then filling them with checkmarks (not pictured in low-fi version), similar to how you can invite friends to an event/group on Facebook’s mobile experience.

Mobile wireframe showing list of friends to split a meal with.

Loading Screen: I wanted to add in a loading screen between taking an image of a receipt and reviewing the itemized list because it likely would take a little while to render in real life. I went back and did a quick sketch for this, and decided on a screen showing a receipt being scanned.

Mobile wireframe of loading screen.

Item List: During wireframing I tried to figure out the best placement for selecting how much each friend paid, and eventually landed on making each item a drawer that would open to show sliders and who was paying what. This is a screen I probably could’ve spent more time sketching!

Mobile wireframe of a list of purchased items and sliders to select who pays what for each item.

Pro-tip: I like to add an artboard somewhere in my project or in another file with just notes on what I’ve changed and questions I’ve had as I’ve been designing. This makes going back later and creating a post like this 10000x easier.

High-Fidelity Prototype

After creating my low-fi prototype, I choose my color scheme and built out a few button components that I knew I would need on multiple screens. From there I jumped into creating my high-fidelity prototype, and after finishing, created my first mockup video using Photoshop!

Between my low-fi and high-fi prototypes I made a few modifications: 

Enter Receipt Manually Button: Originally I was going to make taking a photo of the receipt the most prominent option, leaving “Enter Manually” as a text link. Clickable text links weren’t a convention elsewhere in my design, so to make its functionality more clear, I converted it to a button.

Mobile screen with options to add a photo of a receipt or enter information manually.

Instructions for Item List: Although I designed the items to look clickable, I worried the purpose of clicking one might not be clear enough. I decided to add a sentence explaining that a user should click an item to modify who pays for what.

Add Item Button: When I mocked up the physical receipt for my prototype, I excluded the tip, thinking it would be handwritten on the final copy or paid in cash. This brought up the need for a user to add something that wasn’t on a receipt, so I introduced an “+ Add” button to the item list. This button could also be used to enter a full receipt manual entry.

Clicking to Assign an Item: Rather than always requiring users to use the slider to change who pays what, I added the ability to select a user’s photo and “assign” the item to them automatically. After clicking a photo, the slider will move to reflect the selection, and the non-payee’s photo will become more opaque.

Option to Exit: As I was testing my prototype I realized I wasn’t giving my user a way to exit the flow/cancel the split, so I added an exit button in the upper right corner of most screens. There would likely be other screens within the app showing all of users past “splits” and the option to create a new split. Although I wasn’t designing those screens, I still needed to think about where my flow would fit in to the broader app.

All the screens in my design:

Final Thoughts

Reflecting on the Challenge

After completing my designs, I went back to the Behance to watch Andrea Hock’s challenge video, and reflected on my work:

  • Animation: In my designs I hadn’t known the best way to show numbers increasing as the slider moves. In her video, Andrea walks through using a mask and auto-animate to have the numbers scroll along (about 10:20 in the video). This is something I wish I had implemented to make the my slider animation cleaner, and will now think to use in future projects!
  • Styling and Spacing: Visual design is a big learning area for me, and although I was proud of what I created, I think I could have spent more time on the styling of the item drawer. The spacing of the user photos, slider, and values was ultimately a little tight, and I think the slider could’ve been given more prominence for ease of use.
  • My Unique Take: The challenge video focused on creating a screen to split a total bill between four people and select when someone had paid their portion. I was proud of how I approached incorporating other screens into my flow, and I likely wouldn’t have done this if I’d strictly been recreating the video.

Further Questions to Explore

Even though I decided to conclude my work on this project here, no design is ever done! Below are some questions that could be worth exploring in the future if I chose to revisit this:

  • What does this flow look like if a user has to split a meal with five friends? Or 15? Will item drawers work for bigger groups or should each item have its own page instead?
  • How could you indicate to a user that certain items have unique splits (i.e. splits that aren’t even between friends) when all the item drawers are closed?
  • What if two of five friends offered up their credit cards when paying at the restaurant? How would you help users understand who should pay whom?
  • How can the slider be made more accessible? What visual indicators would be needed for making the proportion values text entry fields?

Resources:

  • Stacks: Adobe recently released a new feature called that allows you to dynamically rearrange items. I tried using this with my item list, but want to learn more about the best ways to add/group items to a stack.
  • How to make a mockup video in Photoshop: I’ve seen lots of videos of mockups but have never known how to make them, and decided this would be the project to learn!
  • I used Color Hunt, Color Scale, and Stark to determine the color palette for my project and check contrast. The latter two are plugins for XD.
  • I referenced these articles on sizing buttons and text fields and Apple’s guide on gestures and accessibility when I created some of my components.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s