Planning and ui Design
Phase-end project | Ronette guevara
Problem statement
The client, Anna, operates an Architectural firm called “mode.”
and required a client management system to handle her firm's weekly meetings and client interactions efficiently.
As a solution, we created a web application that consolidates
all meeting and client details for the firm. This application showcases a dashboard that highlights the week's scheduled meetings and includes a meeting intake form for scheduling
new meetings, as well as a client intake form to create new client profiles.
mode.
mode. is an architecture firm that excels in designing efficient, open spaces that embody simplicity and elegance. Embracing a "less is more" philosophy, they focus on natural light and meticulous details to redefine contemporary environments. Their expertise positions them as leaders in the minimalist design movement, where beauty emerges from simplicity.
Client-Focused Design
The firm crafts comfortable,
client-focused spaces by blending natural light, ergonomic design, and personalized touches to enhance well-being and functionality.
Efficiency
The firm prioritizes efficient space utilization, maximizing every inch of the client's space to create functional, expansive environments within minimalist designs.
Simplicity
The firm's designs elevate spaces with sophistication, showcasing elegance through simple lines, proportions, and a harmonious blend of elements.
Landing
Page
We designed the web application's landing page to align with the brand's clean and minimalistic aesthetic, ensuring a seamless user experience.
By utilizing a streamlined layout, subtle color palette, and intuitive navigation, we created an inviting digital environment that reflects the brand's commitment to simplicity and elegance.
Screenshot of the actual web application landing page.
EPIC & SPRINT
Our first step for this project was to set up a software project or Epic and Sprint in Jira using Agile methodology.
We created six user stories to complete the web application where we have defined the acceptance criteria for each user story.
Screenshot of the actual project once user stories have been completed.
USER STORy
Weekly Dashboard
A “+ New Meeting” button was added for users easily create new meetings from the dashboard.
Screenshot of the actual dashboard in the web application.
Screenshot of the actual user story from Jira.
USER STORy | Meeting
registration form
Screenshot of the actual form in the web application.
Screenshot of the actual user story from Jira.
USER STORy | CLient
registration form
Screenshot of the actual form in the web application.
Screenshot of the actual user story from Jira.
USER STORy
Meetings Page
A “+ New Meeting” button was added for users to easily create new meetings from the meetings page.
Screenshot of the actual form in the web application.
Screenshot of the actual user story from Jira.
USER STORy
Clients Page
A “+ New Client” button was added for users to easily create new clients from the clients page.
Screenshot of the actual form in the web application.
Screenshot of the actual user story from Jira.
USER STORy
CLIENT & MEETING
Management
Screenshots of the actual client and meeting tables in MySQL Workbench.
Screenshot of the actual user story from Jira.
angular Components
CLIENTS
MEETING DASHBOARD
The clients component can be accessed through the navbar option “Clients.” This component shows the full client list of the firm.
The meeting dashboard, located on the landing page, displays upcoming weekly meetings and allows users to add new ones.
NEW CLIENT FORM
The new client form component is nested within the clients component and can be accessed by clicking the “+ New Client” button.
UPCOMING MEETINGS TABLE
The upcoming meetings table component is nested inside the meeting dashboard component and displays the firm’s upcoming meetings for the week.
MEETINGS
NEW MEETING FORM
The meetings component can be accessed through the navbar option “Meetings.” This component shows the full meeting list of the firm.
The new meeting form can be accessed in the meeting dashboard and the meetings component by clicking the “+ New Meeting” button.
DAtabase | mysql
MEETINGS TABLE
Using MySQL Workbench, we created the meetings table to manage the firm’s upcoming and previous meetings. The columns in the database correspond to the form fields in the web application.
DAtabase | mysql
CLIENTS TABLE
Using MySQL Workbench, we created the clients table to manage the firm’s prospective and existing clients. The columns in the database correspond to the form fields in the web application.
VERSION Control
GIt & Github
Using the Git feature in VSCode, we were able to stage and commit our changes to GitHub easily. Using a public repository to store our code online, it is accessible to all who wish to review it.
Screenshot of the actual repository in GitHub.
Final Thoughts
In this project, we developed essential industry skills, including planning for efficient task execution, frontend development for user-friendly interfaces, model layer setup for database management, and using source code management tools like GitHub for effective version control.
Although the app is not fully functional given that we have not finished covering back-end development, we believe that the app was able to achieve the goal of the project.
Questions? Reach out to ronetteguevara@gmail.com
