UI / UX Designer
Year
2022
Tools
Figma, Zoom, Jira
UX Skills
Requirements Gathering, Wireframes, Prototype, Project Management, Visual Design, Agile Methodologies
Background
Symple is a SaaS platform that helps landlords manage property certificates and other services required by law. Their platform provides an easier way for landlords to book gas safety, electrical installation, and energy performance certificates.
Overview
I was the UX/UI Designer tasked to design their mobile app according to their brand guidelines. The team composed of myself, a business analyst, a product specialist, a QA tester and developers.
Problem
My task was to create a mobile version of their platform. It needed to cater to two user types: landlords and service providers, and it needed to adhere to the new design system.
Problem statement
How might we optimize the website for mobile devices, so that landlords and service providers can access information and perform tasks seamlessly on smaller screens?
Target Audience
There are two user groups identified:
- Landlords manages their property certificates at Symple. They can add their property and tell them when the next inspections are due, get notifications, order the inspection and receive the certificate via the platform.
- Service providers offer their services at Symple. They can register with Symple, inform them of their accreditations, pick jobs they want and arrange them with key holders, upload the property certificate and get paid directly.
Approach and strategy
The following approach and product strategies were accomplished:
- Agile Methodology – Agile methodology helped the team manage work more efficiently. Requirements gathering, sprint planning and sprint retrospectives gave us the ability to work iteratively.
- Information Architecture and Flow Diagram – Used information architecture to organize content and help users find relevant information and reach their goals quickly and efficiently. Created flow diagrams to visualize use cases and to ensure that no scenarios are missed.
- Wireframes, mockups and prototyping – Created wireframes, mockups and prototypes as solutions to solve user needs and goals.
- Usability testing – Usability testing was conducted by the product specialist and QA tester to identify usability problems, collect data and determine the participant’s satisfaction with the product.
Information Architecture and User Flow Diagram
Information architecture helped me organize, structure and label content in an effective way. This provided the foundation as I proceeded to creating my prototype. User flow diagrams helped me visualize, analyze and map how users will interact with the product as a whole. The diagram included paths and journeys that help understand patterns users will take. It allowed the team to gather feedback, make adjustments, and identify and fix user issues ahead of time.
Low fidelity wireframes and prototype
Low fidelity wireframes and initial prototype helped stakeholders visualize the concept and idea. It also let the team resolve basic questions about the content, layout and product requirements before committing to a higher fidelity prototype.
Solutions for landlords
The first user type are landlords. Some of the user flows identified were:
Ordering services
“As a landlord, I want to order services due so that I can comply with regulatory requirements.”
Services due
Landlords can view a list of services due, including an “order” button.
Cart
Adding the order leads to the cart being updated.
Review order
Landlords can review their order details then checkout.
Confirmation
This leads them to a confirmation message and further instructions.
Adding properties
“As a landlord, I want to add properties in my account so that I can have manage my listings efficiently.”
Property listing
Landlords can click on “New Property” in the properties page.
Add property details
Adding a new property lets them input their property details.
Keyholder details
They can also input keyholder details.
View details
Once they have added their property, they can edit their input or go back to the property listing.
Viewing invoices
“As a landlord, I want to view my invoices so that I can settle my balances.”
Orders
Landlords can view orders and payments made within the app.
List of orders
They can scroll down to view a list of their orders.
Invoice
Invoices can be viewed directly in the app or downloaded as a PDF.
Breakdown
They can scroll down to view a breakdown of partial payments and refund (if any) and their outstanding balance.
Solutions for service providers
My second user type are service providers. Some of the user flows identified were:
Register for an account
“As a service provider, I want to register for an account so that I can be an accredited service provider in the platform.”
Create an account
Service providers can register for an account with Google, Facebook or manually inputting their details.
About you
They provide information about themselves in the process.
Documentation
They upload the necessary documentation needed to complete the process.
Confirmation
Once they have successfully signed up, they will receive a confirmation message with follow up instructions.
Booking jobs
“As a service provider, I want to book jobs so that I can create a steady source of income for myself.”
Available jobs
A list of available jobs including property address and distance.
Taking jobs
Showing job details and agreement of terms and conditions before taking job.
Confirmation
A confirmation message including instructions about next steps.
My jobs
Service providers can view a list of their current jobs.
Completing jobs
“As a service provider, I want to upload required documentation so that I can receive my payment.”
Next steps
After the labor work, service providers can check what to do as a next step to complete the job order.
Upload certificates
They can opt to take a photo of their certifications or browse files to upload it.
Verification
A notice to let the service provider verify information prior to submitting.
Confirmation
A confirmation message received with follow up instructions.
Outcome
⭐🏆 Shortlisted by National Landlord Investment Show for Proptech Company of the Year 2023.
⭐🏆 Featured on Greater Manchester Tech Climbers 2023.
Reflections and learnings
- Designing for mobile – Some of the key considerations in ensuring an optimal user experience when designing for mobile are: having a mobile-friendly navigation by using intuitive icons and collapsible menus, prioritizing essential content and actions as mobile screens have limited space, and having touch-friendly elements such as designing buttons, links and interactive elements with touch in mind.
- Working with an agile team – I appreciated planning sessions because it kept the entire team aligned. I also appreciated how retrospectives kept the team spirit up and listed points of improvement.
- Remote collaboration – One of the greatest lessons I learned with remote work is how to stay connected with the team. Staying involved is important to ensure you stay part of the progress.