Ideation

In the initial stages of development, our team held a few ideation sessions to dissect the project description into concrete components. By the end of this phase, we came up with a list of required screens and its functionalities. We also created rough sketches of how the UI will look like and thought about possible names for the project.

Establishing Navigation Flow

Since I was the only one on our team with design experience, I had the primary responsibility of coming up with the system interface design, creating assets and designing the navigation flow. Here, I condensed all of the established screens into a low-fidelity flow chart which shows how each screen interacts with the other.

Architecture Diagram

During the project, our team was able to get hands-on experience working in an AGILE environment and designing system architectures. We decided to approach the project with a layered architecture style. Not pictured here, we also made use of SCRUM boards and had weekly meetings to distribute our tasks.

High-Fidelity Designs

Later on in development, I created high-fidelity designs and wrote the app's CSS files. Although our final application was more simplified due to time constraints, it did not differ too much from our original design.

Registration

Main Menu

Profile

Edit Profile

View Reports

Create a Report

Historical Report Graph