UI/UX: Redesign of Final Summary Page

[KPHowley]

Overview

Design a new Final page for the calculations that displays project levels and points them at the top and includes a print or save to PDF option.

Action Items

• Review Design
• Make consistent with Current design
• Implement changes if needed
• Create New Issue for front end development

Resources/Instructions

Figma Wireframe Link:
https://www.figma.com/file/qNgPc5lttpf0SWSwkbbWyT/TDM-Calculator?node-id=0%3A1
Follows up issue #18

[entrotech]

Since Rosemary described what she wanted, I took a shot at it on Issue #143. We should probably solicit Rosemary's feedback and incorporate in any subsequent re-design, then create a follow-on issue which could be assigned to any developer.

[ExperimentsInHonesty]

This is how Rosemary's teammate wanted the boxes at the top of the page reorganized

[entrotech]

So is this the only change we want to this page? How about adding some of the other information, like Building Permit #, Case #, User who created the calculation, create date, last modified date, and anything else?

[ExperimentsInHonesty]

@rvsmith1
add Building Permit #, Case # and Version # under the address
add calculation created by: , created on: , last modified: at the bottom
Add a comment field
remove the forward navigation from bottom (there are no other pages)
add another button for "save and create new project"

[ExperimentsInHonesty]

eta by Rance is by 1/20 end of day

[ExperimentsInHonesty]

Current page view when logged in and looking at your own project

[rvsmith1]

I am still working on this! Not quite as up to speed on Figma as I'd like to be just yet, so I initially pulled elements from the Team's Figma Desktop documents. I also had some font conversion issues and am using Helvetica instead of Calibri here. I am mostly caught up on the meetings' notes and have implemented some recommendations from those in addition to some UI/UX choices I felt would be more user friendly including: hierarchal sectioning for readability, simplified displaying of the data sets and info labels (ie. name, etc.).

Questions:
I didn't understand the checks and arrows, what do those icons represent? I wasn't able to get into the Heroku app and still haven't yet received verification emails to either account I signed up with. My intent is to play around and see how the results are achieved and what information from inputs are represented on the summary page. This will help with usability and improve the final "view" we leave users.

@ExperimentsInHonesty is the comment field for notes/suggestions, general comments like social media or blog posts or for the account holders own reference?

Editable Document link:
https://www.figma.com/file/KtwrXRCgf0NQryP6YcsHBQ/Untitled?node-id=0%3A1

I will continue to revise and polish this tonight and tomorrow per feedback! Thanks and looking forward to officially returning tomorrow night!

@rvsmith1

[ExperimentsInHonesty]

@rvsmith1 please update this issue with the notes from the feedback you got from Kevin and a revised ETA.

The purpose of the comment field is currently for the people testing it (LADOT and Planning) to put in any details related to what might not be working about the calculations, or any other testing info. The future of the comment filed is for developers to put in any additional information they might want to add when they submit it for review, or potentially for their own information (TBD)

You don't need to be logged into the heroku to see the project and play with it. Only the Admins (Fang and John need that level of access).
Staging: https://tdm-calc-staging.herokuapp.com/
Live: http://tdm-calc.herokuapp.com/

[ExperimentsInHonesty]

@leopeng101
add Building Permit #, Case # and Version # under the address
add calculation created by: , created on: , last modified: at the bottom
remove the forward navigation from bottom (there are no other pages)
add another button for "save and create new project"

we are not currently going to mock up the comments field.

[leopeng101]

Newest version as assigned Bonnie, completed a few days ago. Awaiting feedback from Bonnie and Kevin to be done at next meeting.

[ExperimentsInHonesty]

Rose, Does this look better to you than the way it currently appears? Also the information at the bottom is the creation information for the current project that is created by the user. Is this where you want the information to go, or does it need to be integrated with the top section?

[dazainus]

@KPHowley @ExperimentsInHonesty - Sharing the design for the summary page.

Design

• Prototype: https://www.figma.com/proto/qNgPc5lttpf0SWSwkbbWyT/TDM-Calculator?node-id=1744%3A5810&viewport=-824%2C3%2C0.5112485885620117&scaling=min-zoom

Resources

• Figma: https://www.figma.com/file/qNgPc5lttpf0SWSwkbbWyT/TDM-Calculator?node-id=1744%3A5810

[ExperimentsInHonesty]

@dazainus can you update the mockup so that it says 25 points earned on the left panel? Right now it says zero.

[ExperimentsInHonesty]

@dazainus also, please add AIN 4239-016-006

[dazainus]

@ExperimentsInHonesty Got it. I will reflect those changes.

[dazainus]

@ExperimentsInHonesty @KPHowley - The design is reflected with the changes.

List of Changes Made

• Changed '0 points earned' to '25 points earned' on the left panel
• Add a time stamp at the bottom (and top) for when the project is saved
• Add the new Parcel # at the top (AIN 4239-016-006)

Design

Resource

• Figma: https://www.figma.com/file/qNgPc5lttpf0SWSwkbbWyT/TDM-Calculator?node-id=1807%3A3610