[1/3] Become a Full-stack .NET Developer: Planning the First Iteration

View fullsize

Screenshot of Visual Studio Online were we planned our uses cases for the first iteration and organised them into a implementation order determined by their dependencies.

We began this module by taking the primary and secondary use cases identified in the previous module and organizing them into our plan for Iteration 1 of the app on Visual Studio Online.

We determined that "Add A Gig" is the most fundamental use case in our project which is why it will be the first use case to be implemented.

From here we discussed what the user experience for this first iteration should entail based upon the scope of these initial use cases. We were advised to keep the UI simple and to avoid perfection at this earlier stage. Later on, in subsequent iterations as we add more app features determined by the requirements document we could come back to our first attempt UI and tweak it accordingly.

View fullsize

UI mockup for our primary use case of "Add a Gig". In this first iteration users should be redirected to the View All Upcoming Gigs page (which will also be the home page). From here they will have the ability to click a Going or Following button beside each gig.

We quickly sketched out a UI mockup for the "Add a Gig" use case. There should be a dedicated page with a form for adding a gig. Upon filling this form out users should be redirected to the View All Upcoming Gigs page in this first iteration. In the final version of the app, we will actually want them to be redirected to a View My Upcoming Gigs page (for that specific user), but as we are not implementing that use case in the first iteration we will instead just redirect to the View All Upcoming Gigs page instead.

From the View All Upcoming Page, there should be two buttons beside each listed gig - one labeled Going? (signifying your intention to attend this gig) and Following (signifying that you want to follow that particular gig's artist for further gig notifications from them). Both of these buttons should change colour upon being clicked and not refresh the page (e.g similar to following someone on Twitter).

View fullsize

UI mockup of the navigation bar of our app in its first iteration. The name of the app GigHub is on the left while the user's name (when logged in is on the right) with a dropdown actions upon hover of Gigs I'm Attending, Who I'm Following and Sign Out.

To finish this module we produced one last UI mockup for the navigation bar. It follows general web usability standards of having the name of the app/website on the left with the user Login/Details on the right.