300dtd-finance-website

Sprint 3 - A Refined and Complete System

Sprint Goals

Develop the system until it is fully featured, with a refined UI and it satisfies the requirements. The system will be fully tested at this point.

Final Implementation

The web app is fully implemented with a refined UI:

Landing page The landing page

Account registration Making an account

Logging in Logging in

Account Verification Admin verifies a user

Making a post Admin creates a post with an image and video

Making and deleting comments User makes and deletes a comment

Deleting a post Admin deletes a post

User without adequate tier User logs in and does not have a high enough tier to see some posts

User Interface Changes

Just having the text “delete” looks a little bit unrefined, common website conventions would use an icon. During my latest meeting with my client, I asked about whether or not he felt an icon would be better.

“Well I think having the delete text is fine, but for accessibility and icon would be beneficial as well. Could you put a bin icon next to it?”

Posts without delete icon

I then followed this sentiment and added an svg icon next to the delete text. I will follow this convention through out the site, to keep things accessible for everyone.

Posts with delete icon

I also realised that whilst posts had a readable date and time, the comments did not.

Comments without readable dates

This would not fit with the rest of the site and it is not very friendly for users to read, so I added a format that is consistent with the rest of the site.

Comments with readable dates

Another piece of feedback I got from my client was:

“It would be good if it also said the name of the tier next to the tier icon, just so I can easily read it”

Admin dash with just icons

To resolve this, I used a jinja filter to add the text next to the icon.

Admin dash with text and icons

Sprint Review

This sprint went very smoothly and quickly. It just consisted of me styling the site and making slight adjustments and tweaks to things. I already knew what the site was supposed to look like because of my figma mockup that I made for my client.