jess moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · jess moss...
TRANSCRIPT
Product designer for native mobile appsExperience working in tech using agile process
512-787-2820
Jess MossMobile App Designer
Create moments for higher success Educating uShip
3 patterns were determined for the app. These patterns were built to support future educational needs.
Full Screen Dialog Card Education Fixed Education
Many apps have pain points in existing feature sets
With a little nudge confusion can be averted without overhauling the feature. Pinpointing these areas and
addressing them with education can immediately increase success rates.
Example: Welcome CarrierA carrier has successfully registered for an account. Wahoo! User interviews determined that many carriers
are not aware they have created a default search. They are informed about creating new searches.
Full Screen DialogAfter a user has completed a milestone a dialog
interrupts them, acknowledges their achievement and informs them on what to do next.
Example: Save Your SearchWhen the carrier views find shipments a card appears
at a specific position. This card highlights actions such as save search and filter. ,The user must press
GOT IT to dismiss.
Card EducationA card appears after the carrier preforms a new
search.The educational card informs the user of tools and features to help display relevant shipments.
Example: Ask Before BiddingShippers list a shipment and may leave out valuable
information or our API does not support. User research confirmed that carriers use response time and communication skills as the main reason to bid.
Fixed EducationWhen viewing a listing a fixed alert appears with
messages that include warnings or pertinent information to successfully match with the listing.
Replacing awkwardly placed buttons
uShip Listing Details Tabs
User research determined that relocating many of the tabs will lessen the touch errors. Icons were replaced with words and followed the Google
material guidelines. Localization for 8 languages was considered.
Eliminating tabs and solving click-able area issues
uShip’s Android’s tab system contained 4 icons located on top of the main navigation along with the OS 3 buttons. Above the tab was a persistent
button. The touch area was approx. 360 dp (mdpi) x 110 dp (mdpi).
Original Tab System
Before the shippers listing was booked the tabs displayed 4 buttons. The tabs contained icons.
After a shipment was booked a 4th button was added to the tabs. The icons shifted to the right.
A call to action button display on top.
Updated Tab IA and Icons
Google Material tabs contain words instead of icons. The space lends itself to localization. Testing was done to insure German (the longest languages) fit in the space.
Using the most important tabs the tabs were condensed to two and positioned under the photo. When toggling the photos appearance provided context to the listing. The questions button was moved into the profile area. Questions is associated with the person you are communicating with Transit status was embedded into the listing itself. It is positioned above now relevant content.
Disclaimer: The questions section is a button. The messaging system API is limited. The button is a place holder for the future overhaul of messaging throughout the app.
Tab Relocation
Details, Bids, Questions and Transit Status new locations.
Details Bid Questions
Transit Status
Simplifying and removing informationCard Update
Cards have one action. To click them. Determining what content was high level was difficult. Analytics were not available. After conducting user testing on the listing
details information architecture high level information determined.
Cards are a preview of whats to come next
Cards provide the user a glimpse of content. They entice and display the products highlights. They are scanned quickly. Providing too much
information can cause the user to be overwhelmed.
Original Cards
These cards packed a lot of information that was hard to scan. 2 1/2 cards were
visible on the screen.
Updated Cards
The transition of the card now matches the listing details. This provides the carrier familiarity and quick scanning of more details.
Analytics showed that cards with photos had a much higher match rate. If a shipper did not load a photo the commodity icons were vague and encompassed an extensive amount of shipment items. Photos give clues to the carrier to see if the shipment was listing correctly.
The carrier has performed a search based on a certain criteria. The information that was provided by the search was removed.
If a carrier wants to watch the shipment they must hard press the title. This function is not obvious.A recognizable eye icon now displays active and inactive states.
Disclaimer: Exploration of simplifying the cards further was conducted. The height of the card causes less to appear on the page.
Card Design
Updated card design reflects new design. Example of the transition to listing details.
The card information on the listing details was not located in the same order as the cards.
Production ArtistChaotic Moon
I worked at Chaotic Moon under Non Disclosure Agreements. As a production artist I received user interface designs. I worked client facing to make new changes, added new app features, and improved functionality. I created UI Kits, redlined screens, and built developer decks for iOS iPhone, iOS iPad, Android Handset, Android Tablet and Windows 8 platforms. I worked closely with the creative directors, project managers and off-site developers using HipChat, Con-fluence, and Jira.
GOT IT
Confidential Access
More samples can be providing including an apple watch app
512-787-2820
Jess MossMobile App Designer
Thank you!