Beacon Mobile and Web App Improvement Design Challenge

Challenge Objectives

• Update Beacon Mobile App on Tablet/Mobile screen size
• Update Beacon Web App on Desktop screen size

Project Background
About Beacon DAM App (Disaster Assessment Manager)
After a storm, technicians are assigned to an area within the client’s network to assess the damages. We are building an app so that these agents can document the problem, the location, the tools & materials needed to fix it, and submits a ticket or request for a partner contractor to do the repairs.

Tablet or Mobile application will be used by technicians in outdoor environments, sometimes in harsh conditions.  So be mindful of that when thinking about the overall user experience.

There will be an accompanying web app portal which shows number of issues on the system, and view field notes. This is only accessible for System Administrator

User Workflow

• After a natural disaster such as a hurricane, the client’s field agents are dispatched to locations that were affected by the storm to assess any damages.
• If there is an issue the user should be able to document the problem by adding notes, photos, and videos of the situation.
• The location of the fault should also be visually noted on a map.
• A shopping cart like tool allows the user to create a list of what is needed to complete the repair.
• When this work order is submitted, it creates a request for the client’s construction coordinator to send to their partner contract companies.

Round 1

Initial Beacon Mobile and Web App Improvement Design Challenge for these following features
1). Navigation UI updates
2). Hazard Reporting
3). Fiber Trace & OTDR trace
Notes:
- Feel free to submit more screens for early feedback
- Numbering your submission screens with 01-title etc to let us understand the flow

 

Round 2

Final Beacon Mobile and Web App Improvement Design Challenge for these following features on combined with Checkpoint Feedback
1). Navigation UI updates
2). Hazard Reporting
3). Fiber Trace & OTDR trace
4). Redlines
5). Tap Update
Notes:
- Feel free to submit more screens for early feedback
- Numbering your submission screens with 01-title etc to let us understand the flow
Design Assets
https://drive.google.com/open?id=1UgxBoSWjeqUvbupS3ch8YSjtjQXl2YtP
GDrive folder contains:

• Screenshots references mentioned below
• Tablet/Mobile App and Web App.
  • Click around on each screens to get familiar with the app, let us know if need some clarification.

General Requirements

• For this challenge we need you update Tablet/Mobile App & Web App storyboard design
• Create updated design on all Portrait and Landscape view for Tablet/Mobile
• Make sure updated design use same aesthetic design with existing Tablet/Mobile App or Web App
• All legends/icons/layers on map will remain like existing since we will re-use same engine on existing app.
• Do not create different layer design that look different than current screenshots
• All these features below need easily accessed when user view map, and not hidden under the menu navigation. Think about how you propose solution to solve that problem

Individual Requirements
1). Navigation UI updates
Tablet version: 00.-2-landing-page-menu.jpg
Mobile version: 00.-2-landing-page-menu@2x.png
Web App version: 029 Trace menu expanded@2x.png

• We need bring consistency design for both Tablet/Mobile and Web App
• How the navigation menu need designed? We can use the same icon for consistency
• Group OTDR and Fiber Trace into a single Trace option

2). Hazard Reporting

• Hazards are specific unsafe items in the field that we will also display on the main map of the app. The user will be able to view the hazards on their map and also add new hazards using the Hazard Reporting menu we added to both the iOS and web app designs.
• Hazard Reporting Updates need captured

Hazard Field Safety Options
Screenshot: Hazard-field-safety.png

• Client need us to redesign this screen essentially using the same icons but updating them to match the current Beacon app look and feel
• No need displayed the Field Safety header.
• The added hazards will be displayed on the map as pins. Note that we don't need to show the red circle - just the pin. (Screenshot: Hazard-details.png)
• Clicking a hazard should show the hazard details in the UI
• The hazards are shown on the main map

Adding a hazard

• When the user clicks the Hazard Reporting option in both the iOS and web app, in the menu, we need to allow them to:
  • Select what kind of hazard to add
  • After they select the hazard, we will show a form that they will fill out to add a specific kind of hazard.
• Each hazard has different fields that need to be filled out, so we need to make sure that we create a separate screen for each kind of hazard with the required fields.
• Fields for each type of hazard can viewed here: Hazard_forms.xlsx
• The user should be able to:
• Cancel before selecting a specific kind of hazard
• Cancel on the hazard input form
• After a hazard has been created, we need to ensure a success message is shown to the user.

Notes:

• We don't need to implement or design Low Open Secondary Hazard type.  
• For the form, follow the XLSX for the fields, not the sample screenshot.
• For severity, we will have a dropdown with values 1-3.  
  • 1 being High,
  • 2 being Medium,
  • 3 being Low,
• For Pole Owner, this will be a string that is typically a phone company name, like Verizon or AT&Ts

3). Fiber Trace & OTDR trace

• We need create new menu that will hold Fiber Trace & OTDR trace
• You need update the title on current design to Fiber Trace & OTDR trace
• Should have separate tab to access Fiber Trace & OTDR trace

Fiber Trace
Screenshot: Fiber_Trace_Parameters_.PNG & Fiber_Trace_Result.PNG
As a Fiber field technician, I want the ability to do a fiber end site circuit trace to hub within the Beacon app so that I can provide better customer service solutions while I'm in the field.

Fiber Trace Flow

• Both Web App and Tablet/Mobile app allow the user to fill out the following:
• Auto-populate the schema based off of user GPS location or allow the user to select from drop down. (See Fiber Trace Drop Down List below)
• Drop down for Select End Site/Splice Case or ability to select from map
• Search based off of above end site/splice case selection
• Drop down of available Node Receiver ability to select from map
• Select Fiber
• A button that allows the user to do a real time trace (start)
• A button that allows the user to clear the form (clear)

OTDR (Optical Time-Domain Reflectometer) Trace:
Screenshot: OTDR_Trace_Parameters.PNG & OTDR_Trace_Result.PNG
As a field technician, I want to determine the fiber breakpoint upstream or downstream from a given fiber splice or fiber endpoint (by using my OTDR tool) so that I can determine where the break is located along the fiber circuit and mark that breakpoint on my Beacon app so that I can track where the network breakpoint is located.

OTDR Trace Flow

• Both Web App and Tablet/Mobile app allow the user to fill out the following:
• Select a based off of my GPS coordinates or provide a drop down option. (See OTDR Drop Down List Spreadsheet)
• Select Start Device Class from map or drop down list
• Select available device from the map or Search
• Select Incoming or Outgoing Segment
• Select Fiber
• Select Trace Type: Upstream or Downstream
• OTDR Length (In feet)
• Once the user fills out the information the user should be able to select a button called "Real Time Trace" and have the results show up on the map.  A list of components along the trace should be listed out.  The "Real Time Trace" button should be grayed out until all necessary information has been filled out.

Drop down options
Fiber Trace Dropdown List: https://drive.google.com/open?id=10iEiLGYxTw83fsKCfeL_bS6EdAiMPHUA_ABQffp0N4c
OTDR Trace Dropdown List: https://drive.google.com/open?id=1nvlGLr3U7550ohdk5ZH5wo9SyMbHJ8eezgpUKjwPdWU

Notes:

• Create preloader design displaying while a trace is running.
• Create how the Trace results designed
• The trace result shows a few different things - lines, circles, and a red triangle / exclamation point. Re-use existing graphics.

4). Redlines
The red line functionality will be drawing of elements based on a pallet of available features.  Red line just means it’s not official and that it’s being drawn up over the documented items.  The actual red line will need to be approved by an official cable technician / designer in order for it to get implemented.

The user should be able to:

• Add lines, points, and text to the map
• Add Blocks, which are visual icons representing different features of the network, like nodes, taps, splices, etc.. You can see some of these already on the map.
• Tap on things existing on the map to update their features
• Save data that was updated locally
• Submit data that was updated locally for approval

Existing Flow
https://drive.google.com/file/d/17sOCdX0H29VChqVrvmy-YkftBf6Nu_jo/view?usp=sharing

Red line examples
Screenshots: DrawLine-1.png & DrawLine-2.png

• Mockups above are examples of how red lines are currently drawn by hand. They are over a map, using stencils. We want to make sure that our example elements match what are shown in the stencil.
• Check complete Stencil graphic on attached stencil.jpg
• We need create how design look with all those stencil graph / sample.
• Drawing on map with stencil is out of challenge scope

Notes:

• Polygons are not in scope
• The actual blocks that will be added are not known at this time
• Submitting local data for approval can be designed, but we don't know specifics at this time
• For Update Component, currently we’d want to update name for any component with a name, for poles the pole number, pole company and distance.

5). Tap Update
Screenshots: Tap_Traps.JPG
Tap is a hardware that may be a box on the ground.  It's the place where houses connect to the intermediate network.  It's placed either on a pole or in a box near the street

Tap Update flow
For this Tap section we need you capture the flow based on https://drive.google.com/open?id=189W4YwgCPO3Ti7FyiZUZHQa0IOztK2ng

Capturing Tap to Home: Design Walkout Scenario

• Field agent is conducting design walkout
• User launches Beacon app
• App recognizes the user is near a tap
• App need give suggestion about need update on the closest tap.

Ask In-Home Tech to check Tap nearby

• In Home Tech Finishes Servicing A Home.
• We should have some sort of Thank You message, like Thank you for updating this information.
• In Home Service Tech Is Walking to His Car
• App need give suggestion about need update on the closest tap.

Notes:

• Only need this designed for Tablet/Mobile app
• How the app alert user once they near the Pole/Tap
• Create design how the IOS notification look when devices not open the Beacon app.

Design Submission Formats:
a) Screen Sizes:
- Tablet Portrait Retina Screen Size: 1536px(w) × 2048px(h)
- Tablet Landscape Retina Screen Size: 2048px(w) x 1536px(h)
- Mobile Portrait Retina Screen Size: 750px(w) × 1334px(h)
- Mobile Landscape Retina Screen Size: 1334px(w) × 750px(h)
- Desktop Screen Size: 2732px(w) × 1536px(h)

b) Design theme, colors, typography.
- Design Branding: Follow existing storyboard look and feel

c) Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- You MUST create Hotspot click flow on your MarvelApp
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes

Target User
- Client’s field agents
- System Administrator

Judging Criteria
- Think creative of any possible screens to build for the app to meet challenge requirements.
- How well you update  Beacon App Tablet/Mobile Application and Web App
- Consistency between Mobile and Web app
- Cleanliness of your graphics and design.
- User Experience.

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback

Source Files
- Current Tablet/Mobile app source files of all graphics created in Sketch
- Current Web app source files of all graphics created in either Adobe XD
- You may use another design software like Adobe Photoshop, Illustrator, Sketch or XD. But make sure you recreate the graphic as vector graphics

Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.