Portfolio Items

In my final quarter in the HCDE department, a team of 3 other women and I created an extensive, self-driven project demonstrating our skills in practicing the design process. Please check out the slide show and videos to see the work that we’ve done.

This slideshow requires JavaScript.

Product Demo

 

In Spring 2015, I participated in a Directed Research Group under the HCDE Department. In this research group, we researched the methods of teaching user-centered design to high school students by conducting charettes. We adjusted the timing and process for each high school class, depending on the length of the class period, type of class, and socioeconomic standing of the school’s student population, and collected data on their feedback for future iterations of the charette.

See the video below that I created for the HCDE end of the year Open House.

In my HCDE 498 Prototyping class, our class was prompted to create a smartwatch-smartphone application system.

The most difficult part about trying to come up with an idea for a smartwatch app is having no personal experience with working with or using a smartwatch. How is it different than a smartphone app? What would I use a smartwatch for?

I realized that, personally, I would use a smartwatch when it is inconvenient to take out my phone. I brainstormed ideas about smartwatch apps that show phone notifications, that assist you in instances where both hands need to be free, etc. Then, I came up with an idea that I decide to prototype. It solves the inconvenience of taking out your phone and was inspired by the frequent use of my One Bus Away App and Google Maps.

 

The Design

The purpose of the application is for the user to have all their Seattle Metro, or any general public transportation, needs in one place. The user is able to add their payment method to their app for easy paying without having to handle carrying physical cards. Additionally, the end goal was to have the feature of bus trip planning within the application as well, but I thought exploring the addition of a One Bus Away type feature would be a good preliminary step before adding the complications of Google Maps type trip planning.

 

Ideation

As a typical primary step to designing a solution, ideation and sketching are necessary. Here are my sketches and initial steps in creating my paper prototype.

BusSmartwatchSketches

Building

As tackled in one of my previous design projects, the public transportation system is such a fruitful problem space. I want everything I need for my bus experience in one place. I want to be able to see when my next bus is coming, pay for the bus, and know when to get off the bus all in one convenient solution. The smartwatch paper prototype does exactly this! The smartwatch application pairs with an smartphone application that allows the user to input their payment method (in the city of Seattle – a U-Pass, ORCA card, etc.) and have real-time public bus map directions. Additionally, it is assumed that the application has “My Location” services on, that determines if the user is at the bus stop or on the bus.

The Paper Prototype

Here’s a short demo of the paper prototype at work!

 

Testing

After creating this prototype, the prototype needed to be tested with users to ensure functionality and feasibility. Both with in and outside of class, I have gotten similar critiques.

  1. They did not fully understanding the icons on the home screen (the clock and dollar sign). I was suggested to simply add a label for the icons below (which would be time schedule and pay) to aid in the understanding of the functions.
  2. They had difficulty understanding the syncing with the phone functionality. After explaining that it syncs with the phone to receive map directions and payment options, it became clear to them. However, the time schedule coloring after syncing still remained confusing. What the coloring is supposed to be is that in the phone’s map directions, you have a planned route, which is highlighted in Green, and possible back-up routes to reach your planned destination in Blue. The Gray coloring indicates a route that runs by the bus stop the user is at, but will not take the user to their planned destination.

 

View more of my prototyping projects here.

 

In my INFO 498 class, my teammate and I created two apps using Sketch and Adobe Illustrator. We followed a Style Guide created by our class for a new OS. Our class designed the pre-installed apps that were to be on the OS. Our team created the Browser and Maps app. At the end of the quarter, our designs were scored on a 5 star scale from current app designers. Our Browser app received a 4.9 and our Maps app received a 4.7, which were two of the highest scored apps in the class.

This slideshow requires JavaScript.

housemebanner

User Experience Design: HCDE 418

University of Washington

January 2015 – March 2015

The Final Product

This slideshow requires JavaScript.

The Process

We have been a assigned into a group of four for this project. We are currently in the project proposal and research stage. We have proposed to create an “eco”-system that helps individuals track their “green” actions via financial purchases. The individuals would be rewarded for performing “green” actions through online rankings and competition with the community/people they know and a point system that gives them coupons or other tangible rewards for reaching certain milestones.

1. Web Research

We started off our design process with some web research. Each team member did their own, finding articles to give us further background information about the topic.

See my web research here: Web Research

Through our web and competitive research, we came across a mobile app company that created the exact same idea that we created. We met and decided to re-brainstorm for new ideas.

2. New Topic

One of the group members suggested to take one of the ideas he made in the past during a hackathon that didn’t develop. Our new idea is to create a website and mobile app duo system where seasonal interns or new hires are able to connect with each other to set up temporary housing together.

3. Personas

After re-doing our research due to our change of topic, we created personas to further understand the target users we will be designing for. We came up with two, Nathan and Caryn. Defining their needs and characteristics with some infinity diagramming.

See the persona process here: Personas

4. Persona Expectations and Scenarios

Following the creation of the personas, we went dove deeper into the world of the personas by analyzing and determining their expectations in the product. We also individually created scenarios of how our product will intertwine in the lives of our personas.

EcBanner

Special Topics, Mobile App Design: INFO 498

University of Washington

January 7th 2015 – January 17th 2015

With 10 hours total split into 4 days, we were assigned to create a design language to propose to the class. This design language with the most votes will be used for the rest of the quarter for our class’s overall project. The approach used in the course is an Agile approach with quick, short design processes. Our group had no inspiration to begin with, so we decided to do research.

We researched what design language is, what does design language consist of, and what different types of design languages are currently out there. From that, we began to discuss what each of us likes and dislikes about all the examples we discovered. Currently, we are working on creating a design document to present our ideas and fine tune the details.

Our main concept is Less is More: Don’t Show More Than You Need To. We want to keep users on their home screen. To do so, we will put everything they want to see when they go to their phone: their notifications. We also want these notifications to be viewed in a Card Stacking manner. All content that isn’t needed immediately is tucked away, but still very easily accessible.

Our teacher, Brian Fling, specifically told our group that our concept was very realistic and marketable. And, in his opinion was the best concept in the course.

Here is our Design Brief: Sprint 1

Here is our presentation: Ev_Presentation

QManBanner

QManager Mobile Application

Mobile Queue Technologies

August 2014 – June 2015

This was a half-year long project for http://www.QuickQueues.com, which involved weekly check-ups and submissions of design ideas along with presentations.  I helped with redesigning the current app by manipulating the flow of the app and the information architecture, following an Agile approach. This involved quick and short design processes, which ended up turning into presentation of wireframes. These wireframes posed to be a more effective component because the changes to the app had to be done gradually, rather than a complete redesign. Additionally, I tried to implement the app’s new features. The applications I used in this process were Illustrator, Photoshop, InDesign, and Microsoft Powerpoint.

I will now soon carry on the task of helping to improve the company’s website.

 

Parent App UX Work

Background:

This app was the parent end of a system that organized and tracked the signing in and out of children when they arrive and leave school. The target audience are private school students’ parents.

 

How the App Looked Prior to My Internship:

 

 

First Submission:

The first stab I had with the app was an attempt to completely redesign the app. After receiving feedback from this submission, I realized that the changes I made is to large of a change for the company that wanted to work on making UX improvements immediately.

See the submission here – QManager App

 

Second Submission:

This submission involved working on a greater incorporation of the map aspect of the app.

See the presentation here – Map Ideation Presentation

 

Third Submission:

This week’s work involved the involvement of social media and a few ideas regarding their rebranding.

See the presentation here – Social Media Integration Presentation

 

Fourth Submission:

User Feedback and a messaging system were the suggested features to be implemented for this week.

See the presentation here – Feedback and Messaging Presentation

 

Fifth Submission:

This presentation implemented multiple design ideas regarding the preferred user feedback form from the previous submission, the flow of the signature page, and some other additional ideas.

See the presentation here – Signature with Features Presentation

3GTBanner_02

Directed Research Group with Sean Munson

University of Washington

September 2013 – June 2014

In a directed research group at the University of Washington under the direction of Sean Munson, we researched the concept of Three Good Things.

The concept is that sharing or logging three good things a day will boost one’s overall mood and emotional well-being. This research also involves using this knowledge as a possible treatment for chronic pain patients, being that one of the causes of this particular pain is depression. In the previous year, this research group created a website called Three Good Things for a social media approach to observe and practice this concept.

 

Fall Quarter

When I entered the research group, the tasks I needed to take on were to familiarize myself with the concept and site and brainstorm suggestions for improvements and additional features for the site. It was towards the end of the quarter, in fact the last week of the quarter, where I learned how to use Photoshop for the first time; I used this new program to view and create alternative color and design of the site. I made very basic changes, while trying to learn the different commands and tools within the program. My approach to the redesign was to add a more positive and uplifting feel to the site, along with adding a series of empty check-boxes to encourage posting three times a day.

 

Before

Screen Shot 2014-02-23 at 3.20.24 PM

 

After

Screen Shot 2013-12-03 at 4.28.22 PM

 

 

This quarter I also created a short video to quickly explain the concept and goals of the Three Good Things website.

Note: I did not create the images shown in the video. I only assembled the slides together to create a video. These images were created by a previous research group member.

 

Winter Quarter

This quarter was all about usability testing. We tested with users throughout the duration of the quarter. We had them user the site for an extended period of time and had them fill out surveys throughout. Being inexperienced with usability testing, I relied on the graduate students in the team to help me learn the different steps and process of usability testing. The process of the usability study included: screening for participants, contacting eligible participants, conducting a pilot test, conducting the studies with a script and survey, analyzing and discussing the results, and reporting the results.

The results of the usability test can be viewed here – 3GT Usability Test

 

Spring Quarter

The spring quarter involved splitting into teams the further explore and find solutions to some key features and capabilities of the Three Good Things website. I teamed up with a partner to brainstorm ideas regarding the topic of incentives: what will make the user want to post three times a day?

Additionally, at the end of this quarter, the team proposed new possibilities for future projects that also lie under the topic of technology with health and wellness because the Three Good Things website ended up crashing and we didn’t have any programmers on the team to fix it. We all came up with about 50 ideas as a group in one sitting; afterwards, we each took one of the ideas and flushed it out a bit more and presented it to the team for the following week.

Here is my presentation – Good Feed

footprint banner

User Interface Design: HCDE 455

University of Washington

September 2014 – December 2014

I had a quarter-long project for my HCDE 455 course, User Interface Design. We were assigned a team based off our interest and skills. Our team consisted of 5 people. The professor provided us a project prompt: to design an interface/product/service that will be used in 2020 when everyone will have a budget of how much carbon they can emit, if they exceed that limit, they will need to pay a tax. This project consisted of stages and weekly deliverables. This project helped me practice the continuous design cycle: Problem or Project Characterization → Design → Prototype →  Evaluate

 

Week One: Team Identity

This assignment involved our assigned team getting to know each other, providing contact information, and just assembling ourselves as a team. We created a team name, logo, mission statement, motto, team values.

See the deliverable for this week here – Team Identity

Week Two: Prospectus of Project

This week involved creating a prospectus, Phase 1 of the Design Process. Here, we discussed our team identity, product functionality, preliminary features, target audience/user population, what resources we have to create the product, constraints, and project schedule.

See the deliverable for this week here – Project Prospectus

Week Three: Project Characterization

Week three consisted of the team understanding our problem scenario deeper. We did literature reviews of the study and conducted surveys using Google Forms to research and refine our target user groups. Through this, we were able to come up with potential design issues and preliminary performance requirements, along with some questions and unknowns we had.

See the deliverable for this week here – Project Characterization

Week Four: Persona

We then created a persona to create a user-centered product where we defined a specific target user. A few of the qualities we defined were: name, gender, personality, occupation, hobbies, a day in the life, etc. Additionally, we created a short presentation to briefly present our persona.

See the deliverables for this week here – Persona ,    Presentation

Week Five: Storyboard

To further understand how we want our persona to interact with our product, we created a narrative and a storyboard presentation of this interaction. We knew a few details of our product, such as it being a wearable, but we wanted to know exactly how the product will serve the user before beginning to design the actual interface of the product.

See the deliverables for this week here – Narrative ,     Storyboard

Week Six: Task Analysis

Using the narrative and storyboard from the previous week’s assignment, we created a task analysis which defined three tasks we wanted the user to be able to perform with our product. After defining these tasks, we broke each task into steps and created a flow chart of how each task should be accomplished through our product. These tasks were then combined to create an overall system map.

See the deliverable for this week here – Task Analysis

Week Seven: Flipbook and Field Test Report

Using the system map, we created a paper prototype of our interface. This was the first time we started to design our product’s interface. We met for several hours creating the paper prototype, combining the prototype with an app called Pop, and creating an outline and script to conduct field studies with the paper prototype. As a group, we tested the product with five users, unfortunately due to the constraint of time, we were unable to test the product with users that matched our persona exactly. We recorded their findings and created a presentation to reveal the results to the class.

See the deliverable for this week here – 1st POP Prototype,   Field Test 1 Report Presentation

Week Eight: Mock-Up and Field Test Report

We then took those critiques, discussed them, revised our interface, and made the prototype digital. During this week, we also created a physical prototype for the band portion of the product, using a 3D printer. Again, we conducted field test studies with this new prototype on Pop and presented the results to the class.

See the deliverable for this week here – 2nd POP Prototype ,   Field Test 2 Report Presentation

Week Nine: Final Presentation

We again used those critiques to further improve the prototype. After these improvements, we briefly presented our design process and prototype to the class and a panel of accredited judges.

See the deliverable for this week here – Final Presentation

Week Ten: Final Report

We wrapped up the project by assembling a final report, which included a final discussion and review of our successful design, revisions of past documents to reflect the final designs, reflections of the process, a few snippets of our communication, and pictures. This final report grade proved to be very professional and successful, earning a perfect grade of 100/100.

See the deliverable for this week here – Final Report

417

Usability Research Techniques: HCDE 417

University of Washington

September 2014 – December 2014

In this course, we assembled a team of 5 members, including myself, named UXCORP. As a team, we planned a usability study on Seattle Police Department’s Community Online Reporting Program. This project consisted of multiple stages listed below, along with weekly updates submitted to the teacher. Throughout the project frequent communication was needed, which was done via emails and a Facebook group.

 

Stage One: The Project Proposal

In this stage, we established our project goals, target user population, key tasks, key usability questions, and a plan to handle accessibility issues.

The submitted deliverable can be viewed here – Preliminary Proposal

 

Stage Two: The Usability Test Plan

The plan for the usability test study was drafted and revised. The resulting deliverable included descriptions of the study’s purpose, research questions, participant profiles, method, task lists, test environment, equipment, logistics, facilitation approach, what data will be collected, and how the results will be reported.

The submitted deliverable can be viewed here – Test Plan

 

 

Stage Three: The Usability Test Kit

These items are all the physical documents needed for the testing session. The documents within are divided by the different roles each person will take on during the study.

The submitted deliverable can be viewed here – Test Kit

 

 

Stage Four: The Final Report

The final report was put together after the usability studies were conducted, the data was analyzed, and possible solutions were formed. This document gives an overall summary of the whole process and study.

The submitted deliverable can be viewed here – Final Report

 

 

Stage Five: The Final Presentation

A final seven-minute presentation was given to the class about our results. We were to present an even briefer summary of the study and highlights of our findings and recommendations. Despite a technical difficulty during the presentation, the team was able to successfully give a concise and informative presentation that was within the time limit. We also had a successful Q&A session and the end of the presentation.

Although there was no recording of the presentation, the presentation slides can be viewed here – Final Presentation