xwing
swapi-v3

Design & Code Exercise

Star Wars API

Star Wars API

This was an exercise utilizing the latest Android architecture & libraries available as of Summer 2019.

The requirement was to build an app to search and display resources using the Star Wars API while demonstrating advanced UI/UX design skills.

Categories browser

swapi-category-cards

Category pages were organized using a View Pager with a custom Tab Layout. Each page was a Fragment with a View Model w/ mutable live data and RxJava using composite disposable observables.

The thumbnail cards are built with Glide using an early alpha Material Card View with auto-sizing text. Cards are arranged using a Recycler View with layout animations and variable grid size.

Advanced search

I put most of my effort into customizing the search experience to follow the best practices for autocompletion.

I used bold text to highlight matching words. Queries include an input delay, whitespace vs space detection, and minimum query length.

Sorting priority was based on full-word match, word position, and substring/position in both title & model values.

Finally, I used recursive de-pagination to grab all results, because sometimes the best match would be on page 2.

swapi-search-results

Material 2.1 toolbar

I wanted to add my own twist to the Android Toolbar. The Tab Menu starts flat on the page and the Status Bar has an accent color. The Toolbar is colored and elevated only when collapsed.

When the user scrolls down the page, the layout collapses. The Search Toolbar component is hidden and the Toolbar gets elevated and colored to match the status bar.

swapi-iso-categories
swapi-iso-collapsed

Detail view

Detail view

I wanted this view to feel like the old school trading cards.

I used custom UI code to overlay the hero image over a Collapsing Toolbar. Stats are displayed using Material Cards and Recycler Views.

Autosize text was used for the hero title and stats. Episode numbers were converted from digits to roman numerals.

swapi_details_screens_array2_cropped

Selected works

Omnicell: Figma libraryModular design library

Obvious: MVP designHigh-fidelity design specifications

Obvious: wireframesMulti-device strategy for a solo developer

OmnicellSketch design library & developing interactive kiosks

Starsky RoboticsUX research & design for a remote-driving system

Disney Movies AnywhereMaterial Design & Development

Star Wars APIAndroid design & code exercise

Fitness goals appProduct design exercise

DayframeAutomated photo frame for social media

HD WidgetsTop 10 Android app 2011-2014

App StatsPlay Store app tracking & metrics

CloudskipperFree music player

Flash / FlexBack when the web was fun

Elemental DesignOld school rave flyer designs