Designing new rental experience - Agile Project Management, UX Research & Testing - Metro NZ Property Management
Role: Agile UX Designer | Timeline: December 2022 - January 2023 (4 weeks) | Tools: Figma, Miro, Azure DevOps, Trello, FigJam and Teams | Agile Methodologies: Scrum
​
The work: I was given a design challenge to create the new rental experience for the Metro NZ Property Management, Auckland during my "Certification in Digital Technology Product Solutions - Agile User Experience Design" in Mission Ready HQ, Auckland, NZ.
​
The Challenge: Metro NZ Property Management Ltd is a one-stop rental property management company. During the Auckland COVID-19 lockdown, Mary, a newly promoted personal banker in her mid-thirties, uses the Metro NZ Property Management website to search for a two-bedroom property. By taking the customers' feedback into consideration.
-
Redesigning its home page
-
Search page and feature pages
The Team: We teamed up as a squad (two designers and 2 developers) and followed the Agile Scrum methodology to manage the project.
​
Team mate's Endorsement: "You will find an empathetic, determined and meticulous designer in Rameez. She has been an absolute pleasure to collaborate with, is an analytical thinker and an absolute prototyping whiz. Her background in computer science allows valuable insights when collaborating with developers. She also demonstrates a comprehensive understanding of Design Thinking to inform her when identifying and solving complex problems. Rameez would be a valuable asset to any team as a UX Designer, not to mention a genuinely kind and thoughtful colleague too." - Chanelle Higgins, UX Designer
The Scope
Mission Scope
-
Applying Agile design thinking practices to contribute to the development of digital technology product solutions in specific contexts of practice
-
Applying industry standard best practices to contribute to the development of digital technology product solutions in the context of practice
-
Applying ethical decision-making principles when contributing to developing digital technology product solutions
-
Apply effective professional interpersonal and collaborative skills when working on digital technology product projects with internal and external stakeholders
Design Thinking Process
We followed 4 steps of the design thinking process - Double Diamond Approach. The methods I used at every step,
.jpg)
What I explain in this case study,
In this case study, I explain my Agile Project Management, collaboration experience within squad (developers and designers) , UX Research, the three level usability testing and Ethical decision making principles.
​
I explain my problem solving, responsive UI design, NN heuristic approaches and developer hand off in my another case study for this project. Check out my case study on problem solving.
Agile Project Management
Our Squad
We are four in our squad - 2 designers and 2 developers. We worked in the Agile way. We,
-
Created product vision together
-
Used burndown charts and sprint plannings
-
Frequent peer feedback sessions
-
Daily 15min stand ups
-
Worked together with developers during ideation
We used the following tools for collaboration & Agile methodology
-
We were practicing the Scrum method within a design team and the Kanban method with developers
-
Trello board (with developers - Tracking each others high level tasks)
-
ADO (with my design team mate) - For Sprint planning to achieve the task)
-
Teams for communication
-
Zeplin and Figma for design handover
-
Miro and Figjam for collaboration
Sprint Planning
As a first step, our design team created an ADO board to plan our sprints. Also, we updated our high level task in Trello to connect with our developers.
​
Throughout the process, we were self-directed to assign our individual tasks, plan our springs within our availability and shared them during stand-ups. Some of my tasks with user stories, acceptance criteria
.jpg)
Practicing Agile In UX Design
-
Iterative Development
We divided the project into 6 main features and we shared to concentrate on those features. We both (I and my design teammate) contributed reusable design components to our component library and we both shared them for our designs. During development, we handed over the components first and gave them the pages. We also prioritized the developer request for refinement or new requirements.
-
Daily Meetings
Everyday we had daily stand-ups to discuss our task flows. We had frequent peer review sessions. We also worked together with developers during the ideation phase to understand the feasibility of our ideas.
-
Using Professional Tools
We used Figjam and Miro for ideation collaboration
We used a shared Figma board for design
We use Teams for communication
We used Trello and Azure DevOps for project Management
We used Zeplin and Figma for design hand-off
Some of the Agile Mind Sets we followed,
-
Deliver working software frequently: We planned to deliver our designs on a regular basis to developers to reach the project goal quicker. We delivered the reusable components and sections like footers, headers at first, then we delivered our pages. The developers develop the product in the same way. We chose this approach to reduce the waiting time to deliver the complete prototype.
-
Motivate and help each other to get the job done: When anyone finds a blocker, we help each other with our knowledge. When I got stuck with Figma sliders, Chanelle helped me with her expertise. When Karan asked for the responsive menu at first to speed up his development, I prioritized that. I delivered it within hours. We chose this approach to speed up the process and avoid delays when looking for help outside.
-
Frequent face-to-face conversations: Instead of typing messages in teams and waiting until the stand ups, we chose this principle to make the communication faster and clearer. We also had frequent peer review sessions within the design team and also with the developer team.
-
Simplicity is the art of maximizing the work not done : Even though I created a clear flow of multiple pages in My Account portal, by considering the time, I minimized the number of screens and flows for the developer handover. We chose this principle, to create the minimal viable product within the time frame.
The Agile Practices we followed,
-
We were practicing Scrum Project Management within the design team by creating sprints. We chose this practice to create more sublevel user stories & use cases and track the backlog & product vision together. As it has very small level tasks, we felt that any changing requirements could be made easier at any stage. We used Azure Dev Ops boards for tracking our sprints. Throughout the process, we were self-directed to assign our individual tasks, plan our springs within our availability and shared them during stand-ups.
-
We were practicing Kanban Project Management within our squad (Developers + Designers) to encourage openness among the team and visualize and track high-level tasks of each other in the team. We chose this to enable better collaboration with developers. We used Trello for tracking our tasks.
.jpg)
Industry Standard Practices I applied,
-
User Experience Research: We did different research methods collaboratively and individually. We did customer journey mapping for current state, card sorting, dot voting, brain storming sessions with another design group. And individually, I did competitor research while solving the problems under UX research.
-
Accessibility: For UI design I carefully arranged all the colours more than 4.5:1 ratio. For the brand colour red, I used higher hues instead of the exact brand colour when it came with smaller texts. All the information bearing elements were clearly differentiated by more than one visual cue, not only by differentiating colours. The error states and help test were clearly identified. Empty spaces were used to give the visual cues for grouping the content (applied Gestalt Theory). Input fields border color and thickness is differentiated in different states.
-
User Testing and Feedback: We did three levels of testing. The testing plans were created with user story scenario tasks and also user experience questions to test the overall experience. I also did AB testing on the calendar styles and Multi-variate testing on the sign up users new menu to conclude the design decisions.
-
Offer Control and Freedom to the Users: While designing happy paths, I also design for unhappy paths. The unhappy paths like withdrawing applications, removing the favorites, saving the half-composed message in drafts were mentioned clearly at each stage. Even though these unhappy paths were given with less visual hierarchy to discourage the user to do that.
Collaboration
Collaboration within squad
We collaborated with our developers from defining project scope to developer refinements. We also had a frequent peer review with our developers to understand the technical feasibility of our solution.
Collaboration with my design mate and other UX Design groups
-
We ( I and my design team mate) collaborated throughout the Discover phase and some of Define phases
-
We also collaborated with another designer group for a brain-storming session during Discover Phase
-
Once we shared the problems, we started to work in our own space but we had frequent peer feedback sessions to give feedback on the work we did individually
-
We did our first two level testing individually and did our final level testing together with our combined prototype
.jpg)
UX Research
Discovering the problem
We were given a design challenge with customers' feedback on the current site as following,
“I can’t find a section where I can search for the properties to rent.”
“I would like to search around before I decide to be a tenant. The tenancy application button sounds like I have to make a commitment.”
“Do I have to call to book an appointment, or should I apply online?”
“The home page is too noisy. I don’t know where to start.”
“The services are loaded with too much information. I don’t feel like reading it.”
“I would like to see a clear process or steps to rent a property, preferably a call from the company to help assessing my needs before decision is made.”
​
Even the the problem is given as customers feedback we started our research to find out where the problem is happening in the current site.
​
Understanding Current Metro Website
As a first step, we tried to understand the current Metro website. For our first team meeting, I brought two of my insights to the team from my side.
-
I created the wire flow of the current Metro site to understand what Mary's journey would be at the current site
-
I also assessed the rental sections on the current home page. Metro has many opportunities for its customers but they are hidden in sliders and in unorganized links
.jpg)
As Is Journey Mapping
We created As Is Journey Mapping to understand where the problem is happening on the current site. And also to understand customers' current journey actions, touch points, pain points and also the opportunities we can improve in the different phases of their journey.
.jpg)
Brain storming session and card sorting
We collaborated with another designer team to find out the problems that happened on each page and the process of Mary's rental journey with Metro for collecting different perceptions. Then we grouped them together using a card sorting method. From there, we got a few problem groups to be solved.
.jpg)
Define
Proto Persona
With the given details in the design challenge, we defined a proto persona of Mary, expanding with a few other details to see what external features influences on her rental journey with Metro, like content type preferences, influencers in property management services.
.jpg)
Empathy Map & Dot Voting
We had a brain storming session within our squad to capture and articulate the aspects of the proto-persona Mary as currently understood and viewed by the team. Then we used a dot voting method with my design mate to identify the immediate problems to be solved. We used 6 dots per each.
.jpg)
To Be Journey Mapping - Ideal State Customer Journey Mapping
We created a future state customer journey mapping to find out a few more future opportunities that we can make at each stage to improve the future product.
.jpg)
Problems I chose to solve,
After the UX research, we found a few problem groups to solve to improve Metro's rental experience. We shared these problems to work on our own space. But we kept meeting to give peer reviews to improvise our solutions.
Problems I chose to solve,
-
Lack of structure on the home page & unclear information architecture in the menu
-
Unclear information about rental process and services
-
Lack of options for keeping records and tracking processes
Competitors Research
To solve the problems, I first did competitor research to understand how they solve those particular problems in their product and where they missed good experience. I thought about covering those in my solution.
.jpg)
I explained how I solve these 3 problems, the responsive UI design, NN heuristic approaches and the prototype in my another case study. Check out my Metro Case Study on Problem Solving.
Usability Testing
I did 3 levels of testing on my solutions. I did my first two level of testing individually only on my solution and worked together with my design team mate in my third level of testing for our combined prototype. We chose to do this way because we thought that we can do more intense testing in first two levels. My testing structure, I used 3 testers in each levels.
.jpg)
Testing Level 1 Usability Tasks and Observations
I added 4 tasks from my user stories and included DOD to confirm whether it was achieved by my testers. I also added a few more questions when they doing their questions. In my first level most of the task were easily completed within seconds. Some changes were in wording to improve the experience.
​
Some Other Questions I added in the testing,
-
Show me how you setting up a meeting with a property manager
-
What do you think about how information & features laid off
-
What do you like in the overall website exploring and My Account experience
-
If I give you three wish to change this website what are the things you want to change
-
Is my account portal easy to use?
-
I also added my different concepts to different people for the AB and Multi variate testing.
.jpg)
.png)
Usability Test Report - Jacob Nielsen's error severity rating scale - Catastrophe
When I ask my testers to contact the property manager, every person looks for contact in different places. It seems they couldn't find the contact in the first place. As it is one of the customer feedback given in the design challenge, I put that as catastrophe. I tried to fix it by adding contact links and meet manager links in the places where they are looking for
All the testers loved the animations I used on the static pages. They kept interacting on that and spent extra time on the pages. One of the comments was, "I don't usually spend time on information pages. But I didn't feel any tired looking at this website."
.jpg)
Testing Level 2 - Usability Tasks and Observations
I added a few more tasks in my second level of testing to test the new features I added to my solutions. This is my new experience that I did my User Experience testing on all the viewports (Mobile, Tablet and Desktop) on my solutions. I also tested the experience testing on the combined prototype's desktop version. I also took a note of my design mate's testers' feedback on the experience wise on my screens to improve the UX.
-
I also tested the scenario that they are looking for a house to check my upselling gateways
-
The unhappy paths like withdrawing applications, saving draft messages.
It was an interesting journey to understand different user behaviors in different scenarios, different design styles. I am so excited to learn a lot of user's behaviors on digital platforms in on hand experience (through testing) which I read and learned from articles.
​
Experience Testing on Mobile and Tablet
Two users used iPhone 13 and one user used Android. All devices the user said it is easy to read, the look and feel was very good. Only one user mentioned that FAB's text is too small.
For tablet, all the users found it was very pleasing to move around. I shared the Figma link for the tablet view.
.jpg)
Usability Test Report - Jacob Nielsen's error severity rating scale - Catastrophe
When I tested with my iterated solutions, again new users look for the contact information in different places. Now I got few other places that the people look for contacting manager. And also added at the menu bar to talk to us.
​
Other Insights: I also find the calendar's closed state to make the user to think about it is not available. I did AB testing with the different designs. I found the open state is clearer than the closed state. I also took this test to my level 3 too. In portal's menu bar, I tested from the new user's perceptions on seeing different ideas of showing the empty data pages(0 Favorites, 0 Applications) . I kept doing multi variate testing on this. (3 variations)
.jpg)
.jpg)
Testing Level 3 - Usability Tasks, Observations and NN severity report
In the third level testing, I checked all my test flows and also the experience testing on each screen to understand the edge case scenarios (upselling). I also tested the Mobile Version on my screens too. My intense testing on the second level prevented catastrophe on the third level.
.jpg)
AB Testing
Available dates in filled box vs open boxes.
-
First design was tested with 3 unique users. Just only one user said that she understood because she read the helping text mentioned "Select from available slots"
-
Second design was tested with another 3 unique users. Everyone can understand the calendar's available state. I also checked this with the first testing users again. They said now they can clearly understand.
​
My learning on this, even though giving the help text, it is very important to make all the visual cues clear.
.jpg)
Multi Variate Testing
While designing the My account menu bar for new users, I was thinking about how to show the new pages for the empty favorite application screens.
-
The first idea was to remove them instead of showing them (3 unique users).
-
Second idea. I think I should give disabled items on the top (2 unique users and 3rd user from the first group)
-
The third idea is to enable them and direct them to a new page or show an info text (1 unique user and 2nd user from the first group).
​
Testers Insights - First Design
It was surprising all of my users said they felt it looked very empty. One of them said, it felt like we couldn't understand when we would have all the features mentioned on the welcome screen.
​
Testers Insights - Second Design
Two of the users said they could understand but kept have feeling of when this would be enabled?
Testers Insights - Third Design
I chose to give the small help info when they try to click that and also enabled that menu items. My two users can easily understand, just one of them tries to click and understand from the help text.
​
.jpg)
Ethical Decision Making
I applied the different ethical lenses during the decision making of this project. The ethics for humane technology framework provides lenses to understand human rights in the digital age. From the six ethical lenses: Wellbeing, Inclusion, Security, Privacy, Accountability and Trust, I applied the following ethical lenses in my decision making on this project.
Well Being
By considering the right to independent thought and growth, I designed the password fields with clear error prevention. The errors and accepted information were given before the user submitted their answer. It gives them some time to recover from their mistakes. I also used a mega menu structure to give the user all possible gateways in the single step rather a hiding them in multi-level menus.
Inclusion
During testing I found most of the users didn't scroll until the end. By considering the different groups of users who want to read more and who just stop scrolling in half ways, I designed the pages to help them both. I moved all the concise elements in the first half, added in-page links, generic sections and then the explanations in the second half. I also thought about accessibility to create a design for everyone, I make all the information-bearing elements clearly differentiated with more than one visual cue. Example, the input field states were also distinguished by thickness and colour, to help the people with different colour blindness. The help text is added and the buttons were named with clear action words to help the people with different intellectual levels.
Accountability
I created pathways for when the user to change their decision. i.e., if the user chooses the unhappy paths, like delete records, removing favorites, withdrawing applications and save draft messages, I created a flow on that too.
Trust
By considering the right to know, I designed two pages for the onboarding process after signing up to explain the benefits and features of My Account portal. Even though I also give the user freedom to skip the boarding screens.