This was an individual project for a Web Design & Development course. The goal of this project was to apply user experience design principles in building a responsive company website.
Project Description
OpenBook is a responsive website which allows users to easily browse and purchase books on any device of their choosing. By creating an account, users can seamlessly start a transaction on one device and finish that transaction on another device.
Beginning with ideation & branding development, I came up with user task requirements and basic wireframe sketches before creating a medium fidelity wireframe mockup using Axure RP.
Website sitemap
Medium fidelity wireframe
To make the website as user friendly as possible, I conducted usability tests with three potential users. This involved asking users to complete two specific tasks of creating an account and purchasing a book as well as providing feedback on some of the issues which needed to be addressed. I then translated all the webpages into HTML and CSS code and used grids which automatically adjust to the device screen size.
Website screenshots on an iPad
Website screenshots on an Android smartphone
Through this project, I was able to gain familiarity with user experience in a web design context and improve my wireframing and programming skills from the prototyping process.
This project was completed in a team of five for a Human Computer Interaction course. The goal of this project was to re-design an existing app by using an iterative design process and applying interaction design principles.
Project Description
The Cineplex mobile app is designed to allow users to easily purchase tickets, browse movies, and read the latest entertainment news however; due to its many inconsistencies such as poor button mapping, the app is quite frustrating to use. The re-design of the app is intended to address many of these inconsistencies and to improve on the overall usability experience.
Design Process
In order to fully understand the extent of the issues, I conducted a heuristics evaluation and usability tests on the original app. This involved five users completing several tasks such as purchasing movie tickets, locating the nearest theatre, and finding a synopsis about a movie and having them provide feedback on some of issues and their severity through open ended questions. From the results of this user test, we came up with user task requirements for our re-design.
Heuristics violation and recommendations chart
Based on the user task requirements we came up with, two prototypes were developed. Prototype A was designed to address the issues of the original app. Prototype B was designed to explore beyond addressing the issues of the original app. Both prototypes were then evaluated through usability tests to determine the extent of the improvements compared to the original app.
Prototype A
Prototype B
Through this project, I was able to learn and understand more about human computer interaction and its many benefits in improving usability and user experience.
This project was completed in a team of three for a Materials in Design course. The goal of this project was to design and build a tangible product which uses alternative energy sources such as solar and wind power.
Project Description
Drippler is a night lamp designed for users living in developing countries with no electicity. It is self-powered with a solar panel which charges an internal battery and with the weight of water which turns on the night lamp. Besides providing a light source, the blue LEDs shining through the water adds an aesthetically pleasing dynamic element to the simple function of the night lamp.
Design Process
I came up with an initial idea to use water as a timer and magnetism to power up a light source. When water drips from the top container to bottom, the scale tips which forces the magnet to make contact with the motor which then generates electricity and lights up a bulb.
Initial sketch
From the initial idea I came up with, we made several revisions to simplify the mechanisms. At the beginning, the magnet would make contact with a spinning motor plate which would generate electricity to light up the LEDs inside the tank. When water dripped from the tank into the container, it would then tip the scale and prevent the magnet from making contact with the spinning motor plate turning off the LEDs. From this concept, I built a prototype to understand the interaction and a magnet motor to test the mechanism however; upon testing, this idea failed.
Initial prototype
Rather than using complex mechanisms, we came up with the idea of having the weight of water to push down on a button. When water drained into a separate container, the weight on the button would decrease and eventually turn off the LEDs. From this concept, I built a button circuit, integrated it into another prototype to test and it worked.
Revised prototype
For the final prototype, we built the water tube and container out of clear acrylic and the base out of wood.
Final working prototype
Interaction diagram
Through this project, I was able to learn and understand more about material selection in product design and the importance of iterative prototyping and refinement in creating a finished product.
This project was completed in a team of three for an Information Design course. The goal of this project was to apply information and interaction design principles in building an interactive prototype.
Project Description
The Blue Mountain Park wayfinding tablet app is designed to help people find information about available facilities and to assist in navigation. Due to its abundant amenities and complex trail systems with a lack of signage, the park can be difficult to navigate through. Besides addressing the issues of navigation, this app also has a dayplanner feature which allows users to plan their day and a car finder feature which allows users to locate their vehicle nearby through GPS pinpointing.
Design Process
In order to fully understand the issues within the park and address them accurately, we studied how people interacted within the environment and created a set of user personas intended for the app.
Primary and secondary personas
Based on the user personas we came up with, we then sketched out possible wireframe layouts for the app. Once a final layout was agreed upon, we translated it into a medium fidelity prototype.
Sketch showing final layout of the app
For the prototype, I designed the info-graphics and some of the icons in Illustrator which were then imported into Flash. We then created a demo which shows how the dayplanner and car finder features work.
Sample icons for facilities and landmarks
In order to determine if the app was designed intently for our users, I conducted usability tests with three potential users. This involved asking users to complete two specific tasks with the app's dayplanner and car finder features and to provide feedback on some of the issues which needed to be addressed in our final prototype.
App screenshot with dayplanner feature
This was my first experience developing an app prototype which allowed me to learn and understand more about user experience and interaction. Additionally, I was able to further develop my technical skills and design knowledge.
This project was completed in a team of six for a Spatial Design course. The goal of this project was to apply new concepts such as parti and program in designing an architectural building.
Project Description
Vision Pavilion is a center for local filmmakers located in Seattle's Olympic Sculpture Park. It incorporates three connected spaces which allow for public dialogue and exhibition and private creation and exhibition.
Design Process
Before coming up with any design concepts, we first visited Seattle's Olympic Sculpture Park and chose a site to work with. The site was chosen from its many benefits and affordances it has to offer such as an uninhibited cul-de-sac, future residential development, and design firms located nearby.
Site location
After choosing the site, we then came up with a main parti concept: a diagram/drawing or statement that encapsulates the building's intent. With the targeted audience in mind, we came up with the concept "Framing Three Sequences" which showcases the three spaces creation, exhibition, and dialogue.
Parti statement
Parti statement detailed
Based on the main parti concept, we then designed a program: the experience of the building. In order to visually communicate this, we created info-graphics and perspective renderings of the different spaces. I did some of the post-production, added in scale people into the renderings and created the presentation slides.
Heart of the building
Dialogue area
Exhibition area
Creative area
Through this project, I was able to learn how to apply spatial design concepts and skills in various ways including modelling, post-production, and creating presentation slides.
