Courtney Tam

Comparison between Android and iOS home screen.

Role

As the sole designer on this effort, my focus was targeting the architecture and ensuring strong usability through difficult roadblocks of the application. I designed both Android and iOS screens, while keeping the consistency between platforms. Due to the speed of the project, the visual design of the interface was based off of Netguru’s LunchTime mobile app design for iOS. The styles were then recreated using Material 2.0 for the Android screens.

Problem Space

How can we simplify splitting receipts with multiple people? There are multiple expense splitting applications out there, Splitwise, Billr, Divvy, etc, all with important features that do very helpful actions for their users. This passion project aims to solidify the key features of the various apps into one app. After identifying the usability issues of the competitors, the Divide team planned out our own approach to this problem, creating our own mental model of how a user would think when trying to split a receipt with the respective members. Here are a few features we planned:

Receipts will be scanned to minimize the user’s manual inputs
Each receipt can be quickly split as a whole (evenly between members) or by item where members of the transaction can be added to the item. If multiple members are added to an item, it will be split evenly by those members.
The transaction owner, the user who is creating the split, will be the user who paid for the bill originally, so that the members added to the transaction will be paying he/she back.
Groups can be made for people who frequently share expenses.

High level overview of the create transaction steps.

UX Goals

To create a meaningful onboarding process by guiding the user to provide crucial inputs while using a low cognitive load. It is imperative that this new onboarding process can capture the user’s mental model in deciding how to pick a logo. The accuracy of the logo results will then decrease the drop-off rate and should match or simplify the logo tagging process in the CMS.

Project Constraints

Refactoring the Brand Values will directly affect how the logos are tagged in the Content Management System. The logos must be easily tagged to decrease the time spent by the team member uploading the logos. Along with this, the tags must match the mental model of both our end users and the team members to ensure that there are no discrepancies in the results shown on the application.

Process

1. Competitor Analysis

To strengthen my understanding of how logo design tools use onboarding to better understand their users, I took a look at how LogoJoy, Tailor Brands, and Google’s 3hr Brand Sprint tackles this process. Key points that I looked for was the cognitive load and interaction costs, how accurately did the method capture the user’s mental model, and how useful was the information gathered (i.e. could that information be used to categorize logos in the CMS to show meaningful results to the user).

2. IA: Card Sorting

Compiled Card Sorting Results.

Looking at all the features, I used a simple card sorting study with a few participants to create mental models of our users. I took all features and listed each out as actionable items by users. I needed to be very cautious in how I worded each action to ensure I did not create a bias. This study was crucial to help me see which actions users found difficult to understand and to visualize how users grouped the information. From here, I analyzed the results and created final groupings of the information that matched the majority of the participants.

3. Flowchart

Flowchart defining the screens in the application and the navigation between them.

With the actions and information grouped and solidified, I then created a flowchart to depict how the user would maneuver through the application. The card sorting study helped identify major actions that drove the navigation. Using the flowchart, I then sat down with the developers to discuss the proposed architecture making changes where necessary. During this step, we discussed the developer’s technical constraints and how the designs needed to accommodate such limitations. Identifying these early on helped tremendously in designing work-arounds, so that our solutions were not just band-aid fixes.

4. Defining the Scope Doc

To stay organized and on the same page as the developers, I wrote up a scope document of the project listing out which features and actions will be included in the first version. Here we also discussed the areas of concern and implementation difficulty. After finalizing everything included in V1, we planned out the project sprints by features.

5. Designing v1

I first created lo-fi designs by mapping out what information would be presented on which screens. I then began designing for iOS, using Netguru’s LunchTime app as the baseline for the visual design. Next, I had the challenge of recreating the screens for Android. Due to my unfamiliarity with material design (I’m an Apple user! 🙋), this project really pushed me out of my comfort zone in design. I had to dig through the material design documentation and flush out exactly what components are used for what types of information. I forced myself to be extremely detailed, ensuring my spacing, font sizes, and shadows followed the material guidelines properly. The process continued for each sprint; designing feature by feature with iOS first then recreating the screens for Android with the proper material counterpart.

Different information displayed within a card, maintaining the overall style (iOS).

Next Steps

Divide is currently being built starting June 2018. All the screens for version 1 have been designed and I am now working on additional features scoped out for version 2 of the application. Once the app is running, I will conduct usability tests and user interviews to uncover issues. I will also use analytical tools to discover new insights such as drop-off and click through rates. The app will continue to evolve and iterate, aiming to minimize friction for our users.

Conclusion

This passion project has really pushed me through the entire process of app design. At first, my naive self believed that designing a “few” screens would not be difficult at all, when in reality, this project was much bigger than I imagined. Now, upon reflecting on the process, I see that I uncovered usability issues, architectural flow problems, multi-platform app consistency difficulties, and many more roadblocks. I learned how a solution to a UX problem may uncover new issues, how everyone’s mental model on tackling action is different, and how many edges cases there are. To conclude, there is a lot more I need to learn and grow as a designer.

Divide: App Design