UX/UI Design

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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 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.

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).

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.