React Native App Of The Week: Copart App

Load Times

The best feature of this app is the load times. Moving from view to view is a breeze and considering the amount of data that is being displayed, it’s impressive how fast these React Native views load.

Asset Quality

An important aspect of visual design is that there is no pixelation in any of the assets you control. You can see on the homepage that there are a couple of issues that can be easily fixed. The hamburger navigation icon (at the top left) and the promotional image (at the bottom) are both a bit pixelated. This can be resolved by replacing icon assets with SVGs, and using higher resolution raster images. 

Columns & Guides

Whenever possible, there should be clear guides for columns, this allows a user to easily scan information. Within the homepage, you can see that the distance from the left of the screen to the content is inconsistent. By establishing and following a 4-column grid, the content will appear more organized to users. 

Region Settings

This React Native app serves several regions and switching between both regions and languages is done easily through the nav drawer. However, given the nature of the app, it is likely that once a user sets a region and language they will rarely change the region or language again. If those are moved to the app settings view, it would de-clutter the navigation drawer.

Prioritize Important Content

The location detail view makes displays all of the information a user might want for that location. This expanded information means that the auction list is pushed toward the bottom so that on a large device like an iPhone 11 the list is barely visible, whereas on a smaller device, the list is completely off of the screen. By condensing the location information to the most pertinent information and allowing the user to view the additional info in a dialog, for example, the auction list could be moved up so that it is always in view. 

Emphasize Calls-to-Action

It is nice that you are able to see all lots at a particular location, but the action is a bit hard to notice. Yes, it is up at the top, but being gray and rather small, it almost appears disabled. By increasing the contrast between the background and the text, it will be easier for users to see it as an action they can take. 

UI Polish

Throughout the app, there are a few minor UI fixes that if made would add to the existing polish. A prime example is in the search filters. You can see that the search container isn’t a consistent height, extends beyond the edge of the screen, and the placeholder text is not vertically centered in the field. 

Additionally, the bottom actions appear disabled. This can be improved by adding color to the icon and text: Green for apply, Red for clear all, and Black for cancel.

Combining Views

The calendar feature makes it relatively easy to view auctions for a particular date, but requires the user to move back and forth between the calendar and auction list. By placing the auction list for the selected date below the calendar, the user would be able to search for auctions within a single view. 

Conclusion

There’s a lot more to this React Native application that we didn’t review today. If you are interested in learning more about how FullStack Labs can help you with your React Native app, or if you’re looking to hire React Native Developers, please let us know and we’d be happy to arrange a free consultation.