.svg)
1. Research
The research portion of this UI design project involves a comprehensive analysis aimed at understanding ProSentry's overall branding, their target audiences' needs, and behaviors to create an intuitive and effective user interface. Quick user personas are developed to ensure that the UI design is tailored to meet the specific requirements of ProSentry's target audience. This thorough research foundation will inform design decisions, ensuring that the final product not only meets but exceeds user expectations, providing a seamless user experience for the new structured site.
A Quick Look at Brand Guides
User Personas
Robert Levine
Position: Building Owner
Age: 52
Income: $250K/ year
Hi, I am Rob, a building owner and the last thing that I want my building to end up with is any violations of safety. It is not only a loss to my building but most importantly the safety of my tenants. I have hired a security for my building but it’s not enough since he is one person after all and cannot take on too many tasks at once.
Lauren Arya
Position: Building Manager
Age: 40
Income: $82K/ year
Hi! I am a building manager at a service apartment in new york city. I overlook all the issues that tenants have for their apartments as well as any maintenances in the building. Since I have a lot of responsibilities to carry on, I want to make sure that I am organized and is well alert of all the activities happening in our service apartment.
2. Information Architecture
This step involves creating a clear and logical hierarchy that ensures users can easily navigate and locate information within the website. One key step is to create a site map to organize the order of importance of ProSentry. The client at ProSentry requested a few pages to be designed and developed which include: Home Page, About, Services, Platform, Knowledge Base, FAQ, and Contact Page.
3. Iterating Designs with Figma Wireframing
Since ProSentry’s new branding has been developed, I have started with the Hi-Fi wireframing to give the client a better sense of the visual layout of the refreshed site.
Feedback and Iterate for Round 2
The ProSentry client chose to proceed with option 2 and saw the potential in creating custom icons for their services page. Consequently, I have taken on the task of designing a custom set of icons for the company, giving the site a more personalized touch. Their feedback provided clearer direction, leading to another iteration of the wireframing phase.
Iteration R2 Changes:
- Shorter Hero Section
- More subtle color palette
- Incorporate icons
- Include numbers statistics
- More concise section structure, providing a header follow by description text and CTA.
Develop a Custom Icon Pack
4. Final Designs & Hand Off
My final design for the home page has established a template for the rest of the website. The final UI for ProSentry aligns with the brand guide, embodying themes of simplicity, expansive architecture, technology, and modernity. After all designs are final, I also designed mobile responsive wireframes, packaged all files, component library and grouped all sections to be sent off to the web developer.
.svg)
.png)
.jpg)
.png)
.jpg)
.png)
.jpg)
.jpg)
.jpg)
Package Components and Annotate Wireframes for Consistency and Ready for Hand-Off
Next Steps
When taking on this project, I was told that it was under NDA, therefore there is a limited user testing portion of this project. However, with feedback from the client as well as a few rounds of iterations, we were able to finish the build of the new site and have successfully launched on ProSentry.com. For next steps, I would definitely like to monitor the success and gain web traffic statistics regarding to this new site.
