jess moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · jess moss...

9
Product designer for native mobile apps Experience working in tech using agile process [email protected] 512-787-2820 Jess Moss Mobile App Designer

Upload: others

Post on 27-May-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

Product designer for native mobile appsExperience working in tech using agile process

[email protected]

512-787-2820

Jess MossMobile App Designer

Page 2: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

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.

Page 3: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

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.

Page 4: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

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).

Page 5: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

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

Page 6: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

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.

Page 7: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

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.

Page 8: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

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

Page 9: Jess Moss - storage.googleapis.comstorage.googleapis.com/.../jessmoss_mobile_deck.pdf · Jess Moss Mobile App Designer. Create moments for higher success ... uShip’s Android’s

More samples can be providing including an apple watch app

[email protected]

512-787-2820

Jess MossMobile App Designer

Thank you!