Project Goals
TO CREATE A NATURAL DIALOG BETWEEN USERS AND THE APP
- Research and redesign a convenient app with the least amount of cognitive effort
- Redesign the filtering, sorting, and conditional interactions, targeting the understandability of the experience
- Develop a new "Submit Report" interface for Field Inspectors to input their reports, along with picture upload
- Deliver a product, with documentation, that the developers could utilize for future expansions of the app
Parameters
Each page of the new Periscope app had to include all of the information presented in the existing app. The client provided screenshots of the most important pages, and for security reasons, could not share access to the existing app in order to interact with it.
Design Process
Research & Components
Preliminary information collected to identify key interactions from the users, user goals, context, and interface interaction.
The User
Two main user were identified: Field inspectors and IRS' internal team.
- App to use on iPad screen-size interface
- Intuitive design to take photos inside of the app for immediate upload
- Input required information in a standardized format
- Underwriting reports to be submitted in a visually standard fashion
- Simple interface to view, assign, quality check, and process the submitted underwriting reports
Factors of Interaction
FACTORS OF INTERACTION BETWEEN FIELD INSPECTORS AND INTERNAL TEAM
- Emotions: The existing app lacked an understanding of the process' of Field Inspectors. This would lead the Field Inspector to collect information to such an extent that the reports they submitted were vague. Ultimately, Field Inspectors would upload reports without a template or standard, making the processing of the reports a difficult task for the Internal Team.
- Motivations: Conducting 3-4 inspections a day, Field Inspectors' motivation was to be quick and efficient in every location they visited. This would result in a lack of attention paid to the details when writing their report. On the other hand, the Internal Team's motivation was to put the pieces together to process the underwriting report quickly and without error.
- Confusion: It was found to be unclear whose responsibility it was to curate and organize the information collected. There was also no incentive for any of the users to do so.
Synthesis
CONTEXT AND INTERFACE INTERACTION
Because the Field Inspector's main tool of work was an iPad, the design and information hierarchy was kept in the parameters of this specific devise. Due to the constant physical movement and disruptions of Field Inspectors, special attention was kept in mind in order to accommodate for this type of context. Here are some other interface aspects kept in mind when creating the prototype.
Analyze
Collected data was analyzed and separated into different user/task flows, types of interfaces, and user journey.
User Flow
Based on the screenshots provided by the client, an app teardown was conducted where a few main task flows were identified. Labeling this type of differentiation allowed the simplification and congruency of future design decisions.
- Log In
- Grid View of all submitted reports (for Internal Team)
- Filter Customization (for Internal Team)
- Create New Filter (For Internal Team)
- Detailed Report View (for Internal Team)
Employee Journey Map
Once the main task of the user were identified, an employee journey map was created to outline the various pain points and opportunities to improve the experience.
The main opportunity arose during this step: including the report submission process inside of the app. This process would mirror the order of operation that is portrayed in the Report Detail View.
Information Architecture
Visualizing the information architecture of the app in a three-dimensional spatial model. This was done to help the developers and key decision makers understand where each component and pages live within the app environment.
Define Scope
Summarize and define the assets for the app, including color scheme, iconography, typography specifics, and interface.
Visual Guide
A visual guide was created to summarize the assets used to create the app, including color scheme, iconography, and typography specifics. The visual guide also included certain assets that weren't used in the prototype to future-proof the app. This was done to give the developers the liberty to add certain sections in the future, if need be.
Design System
Error Prevention
Pre-Determined Options
A restricted and/or pre-determined form options design allows the Field Inspector to fill sections out quicker and reduces their margin of error when submitting an underwriting report.
Defensive Layers
When creating a new filter, a defensive layer was introduced that asks users to confirm their action if they haven't saved the filter.
Motion Design
Introduction to some of the digital choreography ideated to add a new level of depth to the interaction design. The goal of introducing animation was to align with the users' goal and help them understand the expectations of the interface.
State Transitions
The most important state interaction incorporated was the drop down sections. Including two or more states allowed for the changes between states to look smoother for users to understand and provided a clue to what is going to happen next.
Visual Cues
Due to the newly introduced "Submit Report" section for the Field Inspectors, a slide effect was included as a visual cue to make it clear where to look and what to do next. When the user navigates from the "Inspection" page to the "Submit Report" the line under (representing the active state) slides over to the page clicked. The sliding line serves as a cue to direct the user's focus to the new page.
Visual Feedback
To provide a visibility of system status to the user-interface design, reactive feedback was included. When looking at the Grid View and selecting a specific report(s), the report line will highlight itself to show the user their current context.
High Fidelity Prototype
Provide final prototype file to client and development team. Final prototype with interactive states.
Sign-in Flow
Specifically for Field Inspectors, an app icon was designed for a more recognizable view and access in the tablet interface.
A functional interface that allows finding and navigating the data in Periscope faster, easier, and more intuitive.
Report Selection & Map View
The Grid View of reports now includes a map function that allows inspectors to easily obtain a geographical view of one, two, three, or more properties.
Detail Report View
Organized and expandable dropdown menus, categorized by detail section.
When the drop down menu is expanded, each section is visually separated by staggered light backgrounds for easier legibility.
Field Inspector Feedback Application
The prototype was sent back to the client for more clarification on how to better cater to Field Inspectors (an identified opportunity during the research phase).
Submit Report
The visuals and information organization of the "Submit Report" page mirrored the original "Detailed Report View" page.
Error Prevention
The dropdown selections and radio buttons decrease the amount of errors.
A restricted and/or pre-populated form options design allows the Field Inspector to fill sections out quicker and reduces the margin of error.
Upload Pictures
One of the main pain points for Field Inspectors was the upload of the pictures to the app.
In the new app, the camera feature was built in to the interphase. With a click, the camera opened, picture was taken and uploaded immediately.
Extra - Before & After
Here are examples of a few before and after screenshots.