Showing 3 Result(s)

LTSA Web Form

During my 8-month internship as a UX designer/researcher at Landsure Systems Ltd. I helped research, design, and test a new web form service for the public to submit land title-related forms online rather than needing to download, print, and mail in applications.

*please note that some confidential information in the images below have been blurred

The original form was downloadable from the LTSA website and despite providing guidance on how to fill out the form, applicants still made mistakes that could be avoided with form validation.

The Change of Mailing Address on Title application is used when a customer wants to update the address at which they receive important notices about their property, such as their BC Assessment notice and Speculation Tax Notice. For example, a customer who owns a rental property may wish to receive notices at their home address instead of their rental address.

The goal of the project was to convert the current paper-based form into a web form that users can submit online. The shift towards a webform not only makes it easier for customers to fill out online but also reduces common errors such as missing fields and unformatted data as well as decreasing the need for manual filing internally using automation.

I was responsible for compiling discovery research into a customer user journey map, designing and updating wireframes based on stakeholder feedback, participating in user testing, and debugging the application.

1 – Filling in the gaps

As part of the UX discovery research, I participated in discovery sessions with internal stakeholders and was primarily in charge of creating the customer journey map which included revising content, designing documentation, presenting to teams across the organization and implementing feedback.

During a 3-hour brainstorming session with Jenny, UX Team Lead, we collaboratively created a rough draft of the user journey map in Miro based on the discovery sessions with stakeholders.

As part of the UX discovery research, I participated in discovery sessions with internal stakeholders and was primarily in charge of creating the customer journey map which included revising content, designing documentation, presenting to teams across the organization and implementing feedback.

Unfortunately, we were not able to hold discovery interviews directly with users, and as a result, our team had a difficult time gauging customers’ emotional states throughout the journey. After receiving feedback, I lowered the emotional path needed to more negative because customers expected the application to be available to submit online and were frustrated to find out the process was so manual which impacted their overall mood.

I explored many different visual representations of the customer map trying to find the design that would be easiest for stakeholders to review.

I presented my first draft to my manager Jenny Lee, UX Team Lead, and captured her comments in sticky notes addressed after the meeting.

The final journey map was shared with multiple teams across the organization and was well-received. It helped not only the design team but also the policy and customer support departs empathize with users and start to visulze how we might aid customers during the new process.

2- Designing the MVP

We started by designing a MVP (minimal viable product) which we used as a first draft milestone to share with stakeholders and customers for feedback. My manager created the initial draft of the MVP wireframes and handed them off to me to progress and update. I was in charge of presenting the wireframes to internal stakeholders and holding discussions on the design. I captured the feedback during these meetings using the comments feature of the prototyping soft Axure. To ensure that stakeholders felt their concerns were being addressed and I consistently updated the wireframes based on the latest discussions. I also collaborated directly with the developers walking them through the designs, writing technical documentation and explaining the functionality.

Our team used the comments feature in Axure to communicate about the designs offline. I was responsible for monitoring the comments and updating the designs.

3- Usability testing… with Microsoft

Myself, UX Team Lead Jenny Lee, and LTSA Contractor Tracy Rawa conducted a usability study with public customers to identify any changes needed before launching the service. I was the primary observer and notetaker during the session. After the study, I consolidated all the notes from the sessions and calculated the quantitative data. I also collaborated on a slide deck outlining the key findings of the study for stakeholders.

The biggest challenge was addressing technical difficulties with participants connecting to Microsoft Teams, accessing the chat, and being able to screen share. We spent over 30 minutes in the first session troubleshooting before needing to reschedule. I was able to support the facilitator, Tracy, during sessions by providing troubleshooting resources and helping with ad hoc solutions, such as emailing participants instead of using the chat feature.

Participants often mentioned having difficulty accessing the chat feature in Microsoft Teams. I discovered it was because we had sent links rather than email invites to the meeting.

During LandSure’s monthly company-wide meeting the Product Owner, Duncan Fraser, gave us a shoutout for our work on the usability study.

4- Back to the drawing board

A PID is a number that uniquely identifies a parcel in the land title register of British Columbia. Every PID has a matching legal description, a text description that may include lot number, plan number and others.

The MVP required users to manually enter a PID.

My manager’s initial design of the PID look-up used a table to display results.

My new PID look-up design utilizes cards to display the PID and Legal Description results.

One of the most challenging parts of the application for a member of the general public is finding their Parcel Identifier (PID) and Legal Description, which identifies a parcel of land. The usability study indicated that most people were unfamiliar with the terminology and concept of a PID/Legal Description.

I made the original MVP based on the team’s decision to require users to manually enter their PID and the Legal Description of their property. This put more onus on the user to ensure they entered it correctly, as any spelling mistakes will cause errors.

Our team later discovered we could leverage an internal registry so that customers could use their PID and have the Legal Description pre-populated for them. My manager, Jenny Lee, mocked up a draft design based on similar functionality in the style guide that used a table.
However, I voiced my concern that using a table to store only one or two rows of data could mislead users into thinking they needed more data.

I took the initiative to mock up a new potential design of the PID look-up and pitched it to the team. My design was to use a single text entry field and cards to display the results because it would take up more real estate on the screen. The team liked my designs and the service was launched using the card-style look-up.

5- Bug testing

We used Jira to communicate and track any issues with the application during the Quality Assurance testing. While I was primarily responsible for testing the offline and rainy day scenarios, I also contributed to the testing of the overall application.

I created numerous tickets in Jira describing the behavior of bugs and the expected functionality of the application.

6- Let’s launch!

After rigorous quality assurance testing and debugging, the new online Change of Mailing Address on Title service went live to the public on July 15. Since going live the new web form has performed very well with members of the public.

As we worked on the next two webforms we have continued to improve the design and experience of the Change of Mailing Address webform post-launch. I have added several Jira tickets for sustainment items that may be pushed in the next release. Just because the web form is public doesn’t mean the work stops.

7- What’s it like to work with me?

8- Moving onto the next web forms

Over the course of my co-op, I was able to complete two more customer journey maps for other paper-based forms. I felt more confident in taking more ownership and control over completing the deliverable and improved my delivery/facilitation of the meetings.

During the MVP design of the next web form, I became the primary designer creating and updating the web form. My manager was less involved in the day-to-day design work as I took charge but was still available when I had any questions. Having gone through the experience of the first form and learned more about the domain of land titles, I found I was better able to voice my opinion and contribute to discussions.

At the tail end of my co-op, I was able to facilitate two sessions of a usability study for the next web form, which I had worked closely on designing. The entire UX team shared their tips and tricks for facilitating as well as giving lots of valuable feedback during my practice session. The biggest learning curve with facilitating was to think on the spot and make judgement calls when participants were struggling to complete tasks.


As part of a 24-hour hackathon, I helped design Streamline, a fictional app that allows users to search the databases of streaming services and cable providers to find where to watch specific movies and shows.

Design of Streamline’s main search functionality.

On February 20, 2021, I participated in StormHacks hosted by SFU Surge, a virtual 24-hour hackathon competition to build a project on the theme of “connection” using design and programming. I chose to make time for Stormhacks during a busy semester, to practice designing under time constraints and geek out with fellow creators. 
For our project, my partner Alex Grant and I created Streamline, a fictional app where users can search where to watch their favourite content. The concept for Streamline was inspired after personal frustration searching multiple streaming apps trying to find Marvel superhero movies. 

I was responsible for the organization, wireframes, and prototype, while Alex worked on branding.

Turning Concept into Design

I started by listing the app’s features and categorizing them (Figure 7). For the app to be realistic, I thought it was important to include extra features such as creating and editing profiles. Next, I sketched the interface to visualize the content on-screen.

Sketch list of Streamline features organized into categories of use and hierarchy.

Sketches of Streamline’s visual interface and user flow based on four sections; 1) Application on-boarding which describes Streamline’s features, 2) creating a custom profile tailored to user’s streaming and cable services, 3) Main search functionality to find where to watch specific content, 4) Bookmarking feature to save content and profile settings to edit services

Putting Together the Pieces

I designed a set of low-fidelity wireframes in Figma, a digital design and prototyping software, focusing on how users would navigate the app. For example, Figure 10 highlights the flow of navigation for search functionality. I wrote the copy for Streamline to provide an understanding of the features. The wireframes were handed off to Alex for branding.

Wireframes for searching (left), browsing results (middle), and viewing details (right). Users first search for content by pressing return on the keyboard which brings up related results and immediately shows available platforms. Click on content for a detailed view regarding purchase options, synopsis, and cast, click back to browse search results.

Making it Interactive

I created an interactive Figma prototype, which makes design elements such as buttons clickable, allowing judges to fully experience the app.

I ran into a technical challenge when trying to use multiple prototype overlays on a single screen, which place a design on the top of the existing screen. I realized this option is not available in Figma, and alternatively used a pre-defined user path meaning users must select specific options for the prototype, unlike a real app.

Figma overlay to organize saved content. When the bookmark is clicked, a pop-up overlay appears, over the screen.

Close up of Figma prototype illustrating pre-defined user path. Users must select Netflix, Prime Video, and then Apple TV in that order instead of selecting any available app. This is because the overlay with a purple border, which indicates an app has been selected, can only be applied once per screen.

We Won!

We recorded a pitch for submission and were judged on five criteria: technological proficiency, real-world impact, intuitive interface, presentation, and wow-factor.

I am thankful I made the time to attend the hackathon as it taught me to focus on the big picture rather than pixel perfection. Also, I received my first ever design achievement so that was super exciting!

Streamline won Best UX/UI out of 60 submissions and 410 participants at StormHacks. The judges commended our effort to solve a relatable real-world problem and use of Figma interactions.

Announcement of Streamline winning Best UX/UI at Stormhacks closing ceremonies over Youtube Live by SFU Surge Vice-President, Praneer Shrestha.

Spotify Collections

As part of an academic UI/UX project, I researched and designed a new feature for the music app Spotify that allows users to organize their library by grouping playlists into a collection.

The goal of this project was to create an additional feature for an existing mobile app, by utilizing research to make a strong case for the feature. The project was completed individually over 3 weeks, where I was responsible for conducting user research, analyzing the current design and interaction systems, and designing the new feature. I created high-fidelity visuals and prototypes in Figma (check out the prototype at the end of the project).

Uncovering Frustration Through User Research

Over 3 weeks in May 2021, I conducted user research to gain a better understanding of the listening habits and frustrations of Spotify users. I used a Google Forms survey to collect initial research regarding different pre-existing features of Spotify and later selected 4 participants for in-person and remote user interviews to walk through the steps of how they navigate Spotify.

Quotes from Google Forms survey by Spotify users and research synthesis of goals and frustrations that came from user interviews

Getting to the Problem

The majority of Spotify users listen to music by using playlists, either that they make themselves or find pre-made. But with an abundance of playlists available, users struggle to organize and find their music within the long scrolling library.

A New Feature: Spotify Playlist Collections

Playlist collections allow a user to select playlists from their library and group them in a collection. Essentially a collection is a playlist of playlists.

Design of new Spotify Playlist Collection. Group tile shows up in user’s library with an arrow icon. Once clicked on it reveals a list of playlists

A Collection allows users the control to categorize their library in a way that makes sense to them, rather than relying on Spotify’s sorting filters such as recently played. For example, collections can be based on the genre of music (pop), the time period (summer through the decades), by friends (all playlists by Kyle), or by mood (party playlists).

Collections to organize playlists are meant for music fans, and avid Spotify users, since they may have over 20+ playlists accumulated in their library. In this sense organizing a library can be seen as a shortcut for expert users to tailor their experience to speed up their interaction.

Working Within Spotify’s Design System

The first step in the design process was to analyze Spotify’s existing design system and interaction patterns, to ensure any new designs would fit appropriately within the application. By leveraging the already existing design and interaction patterns, users can rely on their past experience with the app and know what to expect. It is not only about the aesthetics of the application but also about creating a consistent experience.

Swipe Bottom to Top

Swipe Right to Left

Tap on Elements

Tap on Elements

Analysis and recreation of Spotify’s design system including colours, typography, icons and interactions

Implementing Designs; From Paper to Prototype

I started the design of the Spotify Collection by sketching the user flow for a possible interface. While this was still a brainstorming stage, I worked to incorporate previous research of Spotify’s design system to re-use existing patterns that users would be familiar with.

Rough sketches of user flow, interface designs, and Figma mockups

I made high-fidelity mockups of the layout in Figma, utilizing Spotify’s existing design system and analysis from my research. This stage was about finalizing the visual design to replicate Spotify. Once the layouts were completed I populated the designs with real content from Spotify to better visualize the prototype in its context.

Design Key Moments

Selecting Playlists

While most mobile grouping patterns are drag and drop (such as iPhone folders), I deliberately chose a simple checkbox method to avoid complex interaction while scrolling through the library. The selection interaction is based on the selection for adding songs to the queue because it has the option to tap to select with visual feedback.

Edit a Collection

Since the function of editing a collection is similar to that of editing a playlist, I choose to re-use the same interface patterns and icons that users would already be familiar with. Because the functionality is the same, it doesn’t make sense to re-invent the editing options.

Open a Collection

Opening a collection to view and listen to playlists is based on a simplified version of the playlists layout. In order to streamline the process of finding a playlist there is minimal options available so that the user can get straight to the playlists without any interruptions.

Library View

There are two options to view collections in a users Library; either the general view for recently played or by filtering to display all collections. A collection will appear in recently if a playlists in the collection has been recently played. Collections are primarily meant to group together playlists, but users also have the option to add podcasts shows for further flexibility.

Check out the Figma Prototype!

Reflecting on the Research Process

Throughout this project, I gained practical experience conducting design research to inform and validate my design concept.

This was my first time conducting user research by using survey and interview practices. The biggest consideration when conducting user research was to pay attention to any bias or assumptions we have as a designer as they can harm the quality of results.

I continued my research by analyzing Spotify’s current design and interaction systems and incorporating the research into my new designs. Working within an existing design system was a fun challenge, especially to see how closely I could replicate Spotify’s interface.