- 1.
UX Case Study & Redesign: Website of Suzanne Collins*
- 2.
Usability Evaluation: BCLC.com (BC Lotto Corporation)*
- 3.
Web Development:
SeeRem (SEEDA) - 4.
Data Visualization:
Sexual Orientation Laws
UX & Design
This page contains a few projects which showcase my skills in creating user-centric designs, based on methods such as: Research, Persona Development, Journey Mapping, Wireframing, Prototyping, User Testing, and more.
* Disclaimer:
The case studies included here may contain copyrighted material, the use of which has not been specifically authorized by the copyright owner.
These case studies have helped me to promote my capabilities and advance my education specifically in the area relating to user experience (UX) research and include my personal opinions, satire, criticism and review. I believe this constitutes a ‘fair use/dealing’ of any such copyrighted material.
UX Case Study: Website of Suzanne Collins
For this case study, I performed a usability evaluation on and created a user-centric redesign of suzannecollinsbooks.com, in an academic/learning context. This website showcases Collins’ works alongside critical reception and reviews, as well as a short interview/bio page. On the side here I've embedded the final redesign, or it can be found via this link.
As a quick summary, this case study began with researching the website’s users to establish a realistic Persona. From there, I designated a set of User Goals, and used this context for Journey Mapping. This allowed me to narrow down the scope of my eventual redesign to the key areas that needed improvement, which in this case were the Navigation, Layout, and Content.
As a quick summary, this case study began with researching the website’s users to establish a realistic Persona. From there, I designated a set of User Goals, and used this context for Journey Mapping. This allowed me to narrow down the scope of my eventual redesign to the key areas that needed improvement, which in this case were the Navigation, Layout, and Content.
Bearing in mind that the website is meant to give insight on the author and her overall body of work, I created wireframes of my redesign. I found that I was struggling with the clarity of navigation labels and subheading, so I performed a Card Sorting test to see how users would categorize the sections of the website. Using my learnings from this test, I finalized a high-fidelity prototype of the website in Figma and prepared a semi-formal report which can be read here as well.
Case Study Document
Usability Evaluation: BCLC.com (BC Lottery Corporation)
In a team of 4, I conducted a thorough usability evaluation of bclc.com, which is the website of the BC Lottery Corporation. The report attached here details our process and findings more thoroughly. Each member of my team conducted a Usability Test with an individual participant; the test itself consisted of four parts: a pre-test questionnaire, usability tasks, think-aloud testing, and a post-test questionnaire.
Outside of shared responsibilities, I was responsible for creating the tests for the usability tasks and did so using Treelly and Lyssna. The usability tasks began with a 5-second test to see which elements of the homepage stood out to users. Next was a first click test, to determine whether essential tasks on the website could be found intuitively. Next was a preference test. Lastly was a Tree test which maps out the entire navigation structure of the website, and allows us to evaluate where users expect to find certain interactions based on labels.
During our individual user tests, we guided our participants through each stage, following a moderator script we had put together as a group. For analysis, I set up a spreadsheet for us to compare and summarize the qualitative results of our individual tests, and then we used the results of the post-test questionnaire to conduct a SUS (System Usablity Scale) evaluation. We proceeded to organize and analyze our findings, and finished off with brainstorming possible solutions.
Outside of shared responsibilities, I was responsible for creating the tests for the usability tasks and did so using Treelly and Lyssna. The usability tasks began with a 5-second test to see which elements of the homepage stood out to users. Next was a first click test, to determine whether essential tasks on the website could be found intuitively. Next was a preference test. Lastly was a Tree test which maps out the entire navigation structure of the website, and allows us to evaluate where users expect to find certain interactions based on labels.
During our individual user tests, we guided our participants through each stage, following a moderator script we had put together as a group. For analysis, I set up a spreadsheet for us to compare and summarize the qualitative results of our individual tests, and then we used the results of the post-test questionnaire to conduct a SUS (System Usablity Scale) evaluation. We proceeded to organize and analyze our findings, and finished off with brainstorming possible solutions.
Usability Report
SeeRem.com Landing Page
Web Development: SeeRem (SEEDA)
In a team of two, I worked to develop an informative website for potential customers and investors for SeeRem which is a subdivision of SEEDA, an Alberta-based company that specializes in sustainable land development.
This project initially began in an academic setting, and we continued to work with the SeeRem team afterwards to expand on our initial deliverable. My partner and I began by creating semantic HTML pages and a stylesheet that was cohesive with existing brand materials. We divided the work for implementing responsiveness by working on different CSS breakpoints, with myself being primarily responsible for the tablet and mobile versions in addition to JavaScript/JQuery interactions.
While testing the responsiveness and making changes to the stylesheet, we managed our files using GitHub. As the application was still in development, I also created some UI diagrams with the approval of the SeeRem team to utilize on the website. Lastly, we initialized the SEO/SEM through metadata and the Google Search Console before launching the website via Google Cloud.
This project initially began in an academic setting, and we continued to work with the SeeRem team afterwards to expand on our initial deliverable. My partner and I began by creating semantic HTML pages and a stylesheet that was cohesive with existing brand materials. We divided the work for implementing responsiveness by working on different CSS breakpoints, with myself being primarily responsible for the tablet and mobile versions in addition to JavaScript/JQuery interactions.
While testing the responsiveness and making changes to the stylesheet, we managed our files using GitHub. As the application was still in development, I also created some UI diagrams with the approval of the SeeRem team to utilize on the website. Lastly, we initialized the SEO/SEM through metadata and the Google Search Console before launching the website via Google Cloud.
Data Visualization: Sexual Orientation Laws
As the final project for my Visual Analytics course at SFU, I created a data visualization aiming to explore sexual orientation laws across the world, in synthesis with religion. I chose to do so in a map visualization as it is familiar to most audiences and would also provide some insight on regional patterns.
It is important to clarify that the course context was about designing tools for data analysts rather than analyzing the data itself, and as such we were recommended to frame our explorations through the research questions without explicitly finding ‘answers.’
I began by parsing the dataset available for relevant information, and then began prepping them in Excel such that I would be able to link different datasets together in Observable (D3 JavaScript). This involved a lot of testing, and I eventually found that the most feasible solution was to add the numerical country codes. This allowed me to combine the Laws data and the Religion data first, and then map these to the JSON map dataset supported within Observable. The full report including data visualizations can be found here.
It is important to clarify that the course context was about designing tools for data analysts rather than analyzing the data itself, and as such we were recommended to frame our explorations through the research questions without explicitly finding ‘answers.’
I began by parsing the dataset available for relevant information, and then began prepping them in Excel such that I would be able to link different datasets together in Observable (D3 JavaScript). This involved a lot of testing, and I eventually found that the most feasible solution was to add the numerical country codes. This allowed me to combine the Laws data and the Religion data first, and then map these to the JSON map dataset supported within Observable. The full report including data visualizations can be found here.
Screenshot of the Data Visualization for Research Question 2
