SecondKeys offers a user-friendly online property management platform that redefines property maintenance and management. This client had a very clear idea of what they were looking for, by bringing to the table the wireframes already designed in Balsamiq.
We held meetings twice a week: one to groomed every card with the client about the scope of work, features, and expectations. The other meeting, for us to showcase our work, share updates, and get feedback. The team was composed by a Scrum Master, a Developer, and a UX/UI Designer.
These are some of the features I was able to create Hi-Fi Wireframes:
SecondKeys project included three User Personas: Property Manager, Tenants, and Vendors.
The client had already created the low fidelity wireframes in Balsamiq, with all the data points that were needed in the High Fidelity Wireframes. Here are some of them:
There were multiple sprints throughout this first round of UI Web App Redesign. As every planning card was groomed, I was able to start working on the High Fidelity Wireframes. Every Hi-Fi Wireframe was reviewed and approved by the client, and discussed if needed on the Weekly Updates Meeting.
Here are the matching Hi-Fi Wireframes for all the Low-Fi Wireframes shared above:
At the beginning of this round I was able to help the Developer speed up his process by building the Property Manager Dashboard using HTML, CSS, & JS.
The client realized that I was able to get the work done: from Hi-Fi Wireframes up to Front-End Development, including Responsive Web Design. So, I received Balsamiq wireframes for some of the features required, design the high-fidelity mockups following cards priorities, and once approved, code them in HTML, CSS, & JS. Then, meet with client to showcase for feedback or approval. I delivered the code via Github to a third-party developer team that the client was already working with.
For this round I was able to design and code the following features:
The toughest assignment for this round was the design of the Insurance Module. It consisted of a 7 multi-step form that a Tenant should filled out to Purchase an Insurance Policy via SecondKeys. Here are some Hi-Fi Wireframes:
As every High Fidelity Wireframe got approved, I was able work on the Front-End Development. This is how the previous Insurance Module look like:
The last round of work consisted only on High Fidelity Wireframes. This is a list fo the screens required:
The client delivered cards for each feature needed via Notion, and then we were able to discuss them on a weekly meeting, as well as communicating via Slack for follow ups.
