User Experience | User Interface


Title: Packer Application

Packer application design for reminding users of what to pack for their days.
Method Used: Interview, Survey, Observation, Brainstorm, Persona, Scenrio
Tool Used: Low-Fidelity with Pen/Paper, Axure

Title: Dame Application

DePaul Art Museum application design for users to check upcoming activities around the school.
Method Used: Interview, Observation, Survey, Scenario, Persona, Brainstorm
Tool Used: Low Fidelity Pen/Paper, Axure

Title: True Car Application

Mobile application design of TrueCar website application.
Method Used: TBD
Tool Used: Axure

Title: Bank Responive Application

Bank application design to check breakpoint of screen using the web and tablet.
Method Used: TBD
Tool Used: Axure

Title: Nordstrom Mockup

Mockup design of Nordstrom existing site.
Method Used: Analyze
Tool Used: Axure

Title: Forever 21 Mockup

Mockup design of Forever 21 existing site.
Method Used: Analyze
Tool Used: Axure

Title: Photo Editor Application

Photo Editor application design to test selection of items on the screen.
Method Used: TBD
Tool Used: Axure

Title: Museum Application

Prototype of Museum application for user to plan their visit to museums.
Method Used: Interview, Observation, Persona, Scenario, Storyboard
Tool Used: Axure

Title: Information Architecture

Design of an Information Architecture to showcase a possible application for users to use for show watching.
Method Used: Interview, Survey, Observation, Heuristic Evaluation, Cognitive Walkthrough
Tool Used: Low Fidelity Pen/Paper, Low-Mid Fidelity Axure Prototype

Title: Blog Experience Mockup

Quick mockup design of a blog experience such as youtube.
Method Used: TBD
Tool Used: Axure

Title: Faced-In

Design of a request for proposal idea of Facebook and LinkedIn combined.
Method Used: TBD
Tool Used: Axure

Title: Koolie Mockup

Mockup of how IMVU group Koolie webpage might look like.
Method Used: TBD
Tool Used: Low Fidelity Pen/Paper Prototype, Low Fidelity Axure Prototype

Title: Gimp Deconstruct

Deconstruction of GIMP application using Design Principles
Method Used: Deconstruct and Analyze
Tool Used: Powerpoint

Title: Design Principle

Overview of the CONTROL design principle and its functionality within the real world.
Method Used: Deconstruct and Analyze
Tool Used: Powerpoint

Title: Amazon Deconstruct

Review of Amazon web set up using the design principles.
Method Used: Deconstruct and Analyze
Tool Used: Pen/Paper Prototype

Title: Forever 21 Deconstruct

Review of Forever 21 web set up using the design principles.
Method Used: Deconstruct and Analyze
Tool Used: Axure Prototype

Title: IMGUR Evaluation

IMGUR Usability Evaluation.
Method Used: Survey, Interview, Observation, Heuristic Evaluation, Cognitive Evaluation, Persona, Scenario
Tool Used: IMGUR

Title: Commuting Pathways

myBalsamiq Mockup of commuting design ways for students.
Method Used: Interview, Survey, Persona, Scenario
Tool Used: Low Fidelity Pen/Paper Prototype, myBalsamiq

Title: Showplace Mockup

Roosevelt Movie showplace mockup.
Method Used: TBD
Tool Used: Low Fidelity Pen/Paper Prototype, myBalsamiq

Title: Uptown Infographic

Picktochart infographic of Uptown Neighborhood.
Method Used: Research, Infographic
Tool Used: Picktochart

Title: Stream TV Redesign

Redesign of stream-tv3.me website.
Method Used: Heuristic Evaluation, Cognitive Walkthrough, Survey, Observation, Affinity Diagram, Flow Diagram, Persona, Scenario, Storyboard, Experience Map, Empathy Map, Priority Map
Tool Used: Pen/Paper Prototype, Axure (Low-High Fidelity) Prototype

Blog Experience



This project was a quick tryout for a layout of a blog such as Youtube, blogging site and much more. This layout is mimicking the layout of Youtube.

  • Role: Lead Designer
  • Design Tool Used: Axure

FacedIn | | LinkedBook




This project was a created as an example to a proposal of applications. The title of this project gives a little insight about how Facebook and LinkedIn could be combined and form a new layout. This proposal was visited twice under different cases to be revised. The linked proposal have the documented process of what the design will contain.

  • Role: Lead Designer
  • Application used: Axure | Pen and Paper
  • Link to Prototype: Click here
  • Link to Proposal: LinkBook PDF

Responsive Mock




This mock up project was created to test the breaking size point of a browser. I have chosen to make a mock of a fake bank by creating a web version of the prototype and what it would look like if the use decide to move to a different device such as a tablet. This prototype can be tested at full screen then the user can play with the prototype by moving the screen to see how the prototype respond.

  • Role: Lead Designer
  • Design Tool Used: Axure
  • Link to Prototype: Click here

Group Information Architecture




This project was team based. The team was placed based on similar topic that we wanted to explore. We wanted to work on easier way for people to have all their streaming application in one place.

  • Role: Working Team Member
  • Design Tool Used: Axure | Pen and Paper

Low Fidelity Design



High Fidelity Design



Koolie Layout




This project was created for my own use to test out how I wanted to create a website for my offline virtual game program. I was designing a group page for an IMVU group name Koolie. This project is still on going.

  • Role: Lead Designer
  • Design Tool Used: Axure

Forever 21 Mock




This project is a mock up of Forever 21 site. I had to analyze how Forever 21 presented their information in order to play mock up with it. The layout of the site is similar to the layout of the prototype when it was created.

  • Role: Lead Designer
  • Design Tool Used: Axure

  • Link to Prototype: Click here

Nordstorm Mock




This project is a mock up of Nordstorm website. The site was analyze and its data was mocked to create this following prototype. The prototype is interactive with the clothing change like the site would be as well. The prototype is closely related to the original site.

  • Role: Lead Designer
  • Design Tool Used: Axure

  • Link to Prototype: Click here

Museum App




This project was a team project that was developed with 4 different members. The team decided on this application that would make museum visitation easier for users. The team have interview several users about their experiences and what they would like if an application would be created for it. The team took the interview notes and create portfolio for type of users that could use this application. This project was a three week long project so it was to be quick and dirty. The prototype that came out of this project is a low fidelity prototype that the team would have like to bring to high fidelity after few more testing.

  • Role: Lead Designer
  • Design Tool Used: Axure

  • Link to Prototype: Click here

Packer



This project is a team based project where the team decided on creating an application that will remind users what to pack before leaving the house. The user will have the ability to check off items that they have already packed and what was not packed. Below is a link to the profile page of the project posted on one of the team member's website, as well as the web and phone prototype of the designs. The website contain the step from interview, low-fidelity prototype with pen and paper and how the information was digested in order to create the current design.

D.A.M.E (Design Art Museum Exploration)


Art and music are a large part of the community within Chicago and DePaul, however it is very difficult to find out when these events will take place. My team and I ventured out to discover how students around DePaul find out about art and music around the campus and also around Chicago. We were trying to find out if students know how or where to obtain information about what is going on around the school regarding art and music. Our goal was to figure out if students have an easy way to access art, music and design through DePaul.

  • Role: Designer and Researcher
  • Design Tool Used: Axure | Pen and Paper

User Study

My team and I decided to dive into the art and music challenge. We wanted to explore the options that the students have to gain access around school. We prepared questions together and did the first interviews together as a team before going our separate ways to get other interviews. We tried to ask both questions related to who they are before getting into what they know about the art and music and what they have done around DePaul. We were stuck on which way we should approach. It was either finding out how they access the art and music or gathering informations and showing them how to get the information. From the look and the feeling of our question, we have leaned toward how they get the information. Learning about how students get their information would inform us of what we might possibly do to improve ease of access and make the experience quick.


For our first interview we worked as a team to get the interview done. We have done three in total as a starter so that everybody would at least have one interview. The other interviews are done individually. We have done seven interviews in total. We cast our net toward DePaul students only and students of any school year because this issue is across all class level and across all the whole DePaul campus. We have divided the team into three and each of us have taken a location to observe. There was the AIGA, Student Center and Art Museum. We chose those three locations because we believe they had wide range of student populations and these locations had access to advertising for events for music, art, and design. We observed each locations and report back on what we saw.


Low Fidelity Design

Click to explore the Low Fidelity Prototype.

Evaluation

This process was quick and because we wanted to find what the needs of the users are through the app we started designing, we generate these few questions. Our goal are to observe how the user interact with the product we are creating. Their feedback on what they are thinking was successful and given us insight on what we could possibly add to the app. We want our users to be able to have quick access to these information. These question that are generated to test the prototype are on point and require little effort from the user.

  • Imagine you are a new student on a budget and would like to find an event under $10 close to campus, how would you do this?
  • Imagine you find yourself unexpectedly free one Tuesday night and would like to check out an art related event. How would you find this type of event?
  • Imagine you would like to plan on going to a music event on a specific date in the future. How would you find out your options using our app?
  • Imagine you have RSVP’d for an event but have forgotten it’s basic info, such as time, date, location and price. How would you attain such information?
  • Editing profile
  • RSVP to an event
Through doing this, we found that users could easily filter out events they were interested in, find saved events through the calendar and narrow down the events they were interested in. There was a confusion though when the user was attempting to browse through the event description and whether or not the highlighted stars (meant to show a bookmark) where to represent popular or that the user had saved it.



Mid - High Fidelity Design

Click to explore the Mid - High Fidelity Prototype.

Prototype

  • As a student, I can browse events in chronological order so that I can learn about upcoming DePaul art, music and design events.
  • As a student on a budget, I can search events based on a price range so that I can go to events I know I’ll be able to afford.
  • As a student who doesn’t want to travel far, I can search events based on location in order to be able to enjoy an event without having to travel far.
  • As a student who is only interested in music events, I can narrow down DePaul events by category in order to only view music events.
  • As a forgetful student, I can bookmark events I am interested and easily find their basic information.
  • As a student who is interested in how popular an event will be, I can easily look to see how many people have bookmarked and decided if I would like to go.

Evaluation

User story one:

  • Imagine you have RSVP’d for an event but have forgotten it’s basic info, such as time, date, location and price. How would you attain such information?
  • Since students can often be forgetful, it was important for us to include an easy way for them to recall event details. This was very effective through the use of our calendar section of our application. While testing, the users seemed to access this information with ease. Due to this, we decided to enhance it with features like phone syncrantion and the ability to share through social networking.

User story two:

  • Imagine you are a new student on a budget and would like to find an event under $10 close to campus, how would you do this?
  • We tested users for this particular user story in order to see if they could easily locate events they were interested in. At first it seemed that users had a difficult time navigating due to unfamiliarity with the chosen icons. After clicking through them and discovering the filter events section, they had an easy time filtering events they were searching for. Due to this we decided to change icon images in order to make it easier for the user to discover the events they would like to filter.

TrueCar




This project was completed with a goal of a mobile site redesign of TrueCar website. This is a prototype generated as a possible mobile application if the site were to have a mobile view. Currently the site carry over the full layout even when it is being view on small devices. This practice is to determine what possible ways we can design the site if it were given as a real project. This prototype was not testing.

  • Role: Lead Designer
  • Design Tool Used: Axure

  • Link to Prototype: Click here

Photo Editor




This prototype was generated in order to test some design functionality of Axure.

  • Role: Lead Designer
  • Design Tool Used: Axure

  • Link to Prototype: Click here

Gimp Deconstruct




GIMP is a free open source graphic editor that is used for image retouching or edition. Gimp contain free form drawing, resizing, cropping, photo-montage, conversion between image formats and much more. GIMP which stands for General Image Manipulation program, is a great program to use for beginners - experts who are into art creation or manipulation but does not have the mean of buying PhotoShop or a more advanced program.

  • Role: Lead Researcher and Analyzer

  • Design Principle Used:
    • Control
    • Layering
    • Good Continuation
    • Iconic Representation
    • Mimicry
    • Flexibility-Usability Tradeoff
    • Aesthetic-Usability Effect

  • Design Tool Used: Powerpoint

  • Link to Review: Deconstruct Review

Design Principle : Control




The level of control provided by a system should be related to the proficiency and experience levels of the people using the system. Related to the level of experience the user has.

  • Role: Lead Researcher and Analyzer

  • Design Principle Used:
    • Exercising Control
    • Level of Expertise
    • System Accommodation
    • Expert Shortcuts
    • Complex System
    • Level Switch-Over

  • Design Tool Used:Powerpoint

  • Link to Review: Control Review

Amazon Deconstruct




Overview: Amazon is a site that has been used over and over again. Amazon supports the buyers and sellers alike. The site is updated whenever new items are posted. People turn to amazon because amazon offer items that is cheap and easy to acquire. Amazon also affords lot of resellers with lower price than the original price. Amazon gets a daily product movement from sellers and buyers. If the user were new it will customize their homepage with items they would think that they would like to view. But if the user is not new, their homepage will be customized with what they have been searching.

  • Role: Lead Researcher and Analyzer

  • Design Principle Used:
    • Hierarchy
    • Alignment
    • Consistency
    • Similarity
    • Legibility
    • Proximity
    • Serial position effect

  • Design Tool Used: Powerpoint | Pen/Paper Prototype

  • Link to Review: Amazon Review || Pen/Paper Design

Forever 21 Deconstruct




Overview: Forever 21 is one of shopping stores around here is our lovely Chicago. I have actually never try shopping online for clothes so this was eye opener. Its design is like any other shopping shite design. Most clothes sites have similar design when it comes to checking out. Each online store is unique with what they showcase as their front page or their welcome page. As I was moving around through the site, the items that they are selling are easy too see and recommendation to other products are visible.

  • Role: Lead Researcher and Analyzer

  • Design Principle Used:
    • Entry Point
    • Garbage In, Garbage Out
    • Errors
    • Forgiveness
    • Constraint
    • Confirmation
    • Visibility

  • Design Tool Used: Powerpoint || Axure

  • Link to Review: Axure Mockup || PDF Review

IMGUR Evaluation




Commuting Pathways




  • Role: Lead Designer
  • Design Tool Used: myBalsamiq

Showplace Mockup




  • Role: Lead Designer
  • Design Tool Used: myBalsamiq

Uptown Infographic




  • Role: Lead Designer
  • Design Tool Used: Photoshop

Stream TV Redesign




Abstract: Stream TV is a free online streaming site that offers updated shows as soon as they have premiered on their network. The layout of the design is not eye pleasing as it could be for a site that offer shows. They have all their shows in the alphabetical order which can get tedious for the user to go through to look for a show they want to use. A lot of methods were accomplished to gain more insight about possible users that would use the site. The goals that were set in place pave the way to the prototype which was completed with the results from surveys and observations.

Project Goals: This project is weighted toward the redesign of an existing site called “stream-tv2.to”, which now changed it name to “stream-tv3.me”. This site contains television shows, whether it is currently playing on a network or if it is something that have been played years ago. The major problem the site is having is that it needs a big update and a cleaner layout. I have taken on this project because I see that this site can be popular only if the have a cleaner layout design and also keeping one simple name without changing it frequently. Sometimes users lose track of the current URL that the site is on. When I first encounter this site, it was basically “stream-tv.com” and the site changed, testing out its URL every once in awhile, but they still have all the shows. The site is weighted toward users such as teenagers, young adults or adults. The users have the opportunity to find a show from its first episode in the first to its current one. The site is free of charge which draws more users to it but they are presented with Ads before the show begins. The users do not need to be connected to their providers in order to watch any show they desire.

For this project, I planned on redesigning the entire site and give it a simple update that it needs. I want to be able to design for all type of users, mostly those mentioned, as well as design for all type of devices such as laptop, tablet and phones. I have worked toward the following goals by completing the methods which can found below and a closely knitted schedule.

• Goal : Measure user satisfaction with streaming services.
• Measure : Conduct survey with users to determine how they are feeling about their current service and what they would like to change about it.

•Goal : Identify type of users to use streaming services.
• Measure : User survey feedback will provide for persona to be made as well as determining the type of users that the application might be cater toward.

• Goal : Create a layout suitable for different device dimension such as laptop, tablet and phone.
• Measure : User satisfaction with the functionality and breakpoint of the designs.

These goals have helped pave the way of how the redesign of the new site would be and what type of data to collect from the methods.

  • Role: Lead Designer

  • Design Methods Used:
    • Heuristic Evaluation
    • Cognitive Walkthrough
    • Survey
    • Observation
    • Affinity Diagram
    • Flow Diagram
    • Experience Map
    • Empathy Map
    • Priority Map
    • Persona
    • Scenario
    • Storyboard

  • Design Tool Used:
    • Pen/Paper Prototype
    • Axure Low to High Fidelity Prototype

  • Link to Prototype: Mid Fidelity | High Fidelity

  • Link to Project PDF: Click Here