Design Portfolio by Noah Levin

Design Portfolio

Noah L Levin

Information Systems & Human-Computer Interaction Carnegie Mellon University Class of 2010

Collaborative Shopping

Flow Model Cultural Model Sequence Model Artifact Model Physical Model

4 5 6 7 8

International Conference Review System Diagram Use Case Diagram

10 11

The Cut Magazine Website Kick-Off Meeting Planning Wireframes Final Product

Table of Contents Design Portfolio

12 13 14 15 16

Noah L Levin nlevin@cmu.edu | www.enlev.com

Example 1: Group Project The next few pages are excerpts from the assignment listed below. I worked on a team that included a computer science major, a communication design major, an electrical and computer engineer, and an industrial design major. With only a week and a half to complete the assignment, we met frequently to make sure that we had a solid understanding on the different types of models required for contextual inquiries. We sketched several versions of the models on whiteboards until we felt they were ready to render in high-fidelity. At that point, we snapped photos and then worked together in Adobe Illustrator, Adobe InDesign, and Onmigraffle Pro to create polished versions. Assignment Use the contextual interview video and transcript on group couch shopping. It is available on Blackboard. Model the data following both the description given in B&H reading and the additional rules described in lecture. Please do this as a group just like we did in class. You must include labels and numbering specifically linking your model components to the interview data. 1. Complete a flow model for the entire interview. (30%) 2. Complete a cultural model of the entire interview. Please remember that users can influence themselves and these influences should be marked inside the appropriate circle. (30%) 3. Complete a single sequence model. Just model the sequence describing how the user responds to her roommate’s email. (5%) 4. Create an artifact model for the Craigslist results screen. (5%) 5. Create an artifact model for each Craigslist ad (10%) 6. Consolidate the Craigslist ad artifact models (5%) 7. Create a physical model of the user’s living room as seen in the video. (5%) 8. Using the techniques in Part 4 of BH, Innovation from Data, come up with an idea for redesigning some aspect of this task in improve the quality of the collaborative shopping experience. (15%)  Describe your idea in 3 or 4 sentences and include a sketch to help communicate what it might be.  Describe how each idea comes from the models you created.

Collaborative Shopping Design Portfolio

Noah L Levin nlevin@cmu.edu | www.enlev.com

Friends Friends and Family Primary Search Person 36

Buyers

Graduate Student (U2) 35

gives opportunities

get opportunities

RETAILERS INVENTORY in stock implied

e-mail & chats 44, 117

Professional (U3)

OPPORTUNITIES

Grad Student (U1)

get opportunities 267

Primary Search Person 36

Sellers

265

CRAIGSLIST

get opportunities 41

Opportunities (Ads) 41

Has excess INVENTORY implied

Professional (U4) 37

Independant Sellers posts ads implied

e-mail

exchange followups about ads 263

removed couch 41

Former Roomate (F1)

Flow Model Design Portfolio

Noah L Levin nlevin@cmu.edu | www.enlev.com

“I’m allergic to cats” 251

“There’s not an urgent rush, but he would like to have his couch back.” 31

Friends and Family Buyers

Grad Student (U1)

Graduate Student (U2)

Professional (U3)

Professional (U4)

Sellers

Independant Sellers

“Something that will comfortably seat five people” 190

“I’ve heard of Swickley, I can look at this one.” 245

“It says semi-annual sale, so it might be a good time to b uy a new couch.” 270

“I trust Macy’s” 295

Retailers “If there was another site, I would just go there, so I just Google to see what happens”

“Getting a better deal than retailers” 142

265

Cultural Model Design Portfolio

Noah L Levin nlevin@cmu.edu | www.enlev.com

Sequence Model

Design Portfolio Noah L Levin

nlevin@cmu.edu | www.enlev.com

Sub-Intent

Discuss previously viewed links with U2 in person 293

To get di!erent ideas of other options in the market 264

No indication of what links the other roomates looked at 150

Searches Craig's list for options 128

No more links in email 127

Makes Decision(s) on couch 103, 111

No method of recording preferences 122, 123, 125, 126

U2 Comes Back 281

Sends an email to her roommates with links to the couches she wants to discuss 470

Cannot ďŹ nd the item she had viewed on craig's list earlier 400

Goes back to Craig's list to review the items she has seen before 362

Sub-Trigger

View the sale items of the ďŹ rst link/retailer produced by the search 278

Searches the web via google 266

Couches do not satisfy 264

Makes Decisions on couch 156, 167, 202

Analyze the value of the couch Checks the location 133, 241 Views the price 155, 188 Views the photo 157, 159 Reads the description i:98

Sub-Trigger

Check if location is near 133 See if price is reasonable 155 Check if decor matches 214 Learn what criteria to look for i: 231, 249

Find more opportunities to send to group 128

Follows links in email 86, 104

Receives email from U2 72

Analyze the value of the couch Views the price 87 Views the photo 98 Reads the description i:98

Trigger

Sub-Trigger

See if price is reasonable 45 Check if decor matches 214 Learn what criteria to look for i: 102, 156, 231

Review U2's suggested couches 45

Find a new couch

Sub-Intent

Main Intent

Search term; Also used for filtering by location (143)

Category filtering (141) Advanced search filtering (215)

SEARCH SECTION R E S U LT S

Number of results (137)

When the user hits previous, nothing happens (217)

Indication that a picture is in the ad listing (157)

The date when the ad was posted (184) Location of the listed ad (133) Purple text is used to indicate links that have already been visited (149)

Link to the ad with a brief description (155)

Great Couch - $125 -

Optional price listing (316)

This is the second listing of this particular item. There is no indication of the re-listing (35:54) No indication of which items were viewed collaboratively (152)

Artifact Model Design Portfolio

No place for personal notation (125)

(13:24)

Noah L Levin nlevin@cmu.edu | www.enlev.com

BAY WINDOW

00:48:47

00:49:04

00:00:04 LIGHT

LIGHT

00:49:01

COUCH

MINI FRIDGE

00:00:04

P TO

END TABLE

L-shape would be an ideal shape for the couch (233)

COFFEE TABLE

P LA

00:00:04 00:48:52

FIREPLACE

Couch should not block the fireplace. (231)

AC 00:48:51

U2 yells ideas to U1 from kitchen (454)

DESK

CHAIR

00:49:09 LIGHT 00:48:57

TV ON STAND 00:48:55

FRIDGE

00:48:53

LIGHT

DINING TABLE WITH CHAIRS

STOVE

COUNTERTOP

TOP

MICROWAVE

LAP

00:49:11

SINK

00:49:13

Physical Model Design Portfolio

Noah L Levin nlevin@cmu.edu | www.enlev.com

Example 2: Individual Assignment The next few pages contain models created for a classed called Fundamentals of Systems Development. I worked to help simplify and explain the process of a theoretical conference review system by creating a simple domain model outlaying the key actors of the system and their roles. The assignment actually contained a thorough use case analysis and project vision, but I chose to include the two visuals created in the document as excerpts because they demonstrate my ability to disect a business process and diagram it so that it is easy to understand. Assignment The research office at a renowned university yearly hosts an International research conference. The conference is growing, attracting an increasing number of papersâ&#x20AC;&#x2122; submissions. Managing the review process (submission of papers, review of quality and decision on papers acceptance) is becoming a daunting task. The research office hence decided to develop an International Conference review system (ICRS) to manage the papers review. You are appointed to take on the systems development of ICRS. The research office hopes to speed up the review process as well as reduce the mistakes and omissions that happened in the past: for example, some authors received their own papers for review; some papers were wrongly sent to reviewers who had expressed a conflict of interest with some authors; and some papers would receive one review only because the other assigned reviewer never returned his review. To improve the reviewing process, the research office hopes that the ICRS would allow the research office to at least: Accept online submissions of papers Keep track of reviewers, Assign submitted papers to reviewers, Allow reviewers to access and download the papers assigned to them through the system, Allow reviewers to upload their reviews Allow the authors to access their submissions and reviews the status of their papers Publish accepted papers, etc As for any development project, the wishes and hopes of the research office may change as the development progresses: new features may be added and others removed. Here is how a review process normally goes, with or without an automated system: the research office assigns a chair responsible to organize the reviewing process. The chair would create a committee of reviewers. Usually the information about the conference, instructions and deadlines for papersâ&#x20AC;&#x2122; submissions are then published on a website. Interested authors would submit their papers by a defined deadline. Two or more reviewers would be assigned to review papers. They read the papers, evaluate them and assign them scores. The authors would wait for the committeeâ&#x20AC;&#x2122;s decision. Decisions could be acceptance or rejection of a paper.

International Conference Review System Design Portfolio

Noah L Levin nlevin@cmu.edu | www.enlev.com

A A

pe pa

s paper

s ck

tatu

Authors Anyone who submits a paper to the conference

load

ch e

ex ch an g

Database Index of all of the submissions

fixes

bug s

de l eg at es

up loa

o rt

ICRS Web Interface Site where user logins are created and place to upload, access, and modify information

e ap

Administor Oversees technical issues of the system

ds w vie re

oversees and m onito rs a ll a cti vi

r ts r ep o l is ica hn t ec

R C

chooses committee

Chairperson In charge of facilitating a successful review process

Domain Model Design Portfolio

R A

R R

Reviewers Can also be authors, but cannot review their own submission

Noah L Levin nlevin@cmu.edu | www.enlev.com

International Conference Review System

System boundary U

<< extend >>

Authenticate User

unrecognized us

Authentication Failed

User View Conference Information

Appeal Decision

lud

ext

end

iew

Check Status of Review

Handle Database Failure

Admin

ude

rev

Update Conference Info

Send Error Notification <<

incl

air

inc

unf

Review Error Reports

Verify Paper Submission

Notify Failed Submission

Committee Chair

Authors Submit Paper

Request Extension

Use Case Diagram Design Portfolio

ten

<< include >>

Upload Review

Submission Flagged

Database

Read Reviews clude << in

bia

d >> xten n issio subm

Receives Paper Assignment

<< e

Reviewers

Download Paper

late

Authorizes Publishing

iew

Requests Assignment Change

View Submissions

Noah L Levin nlevin@cmu.edu | www.enlev.com

Example 3: Freelance Project Over the summer of 2008, I was hired to create an online presence for The Cut: Carnegie Mellon’s first music magazine. The magazine had only been around for about a year, and was in black and white because of minimal funding. The editor made the decision to have black and white carry over as a design theme for the magazine to demonstrate its roots and requested that the website stay consistent with this visual element. Creating a black and white website is certainly challenge for a designer as it makes the signal of clickable entities slightly more difficult to emphasize. Another restriction was that we were limited to technologies that school hosting would allow, which is almost strictly HTML, CSS, and javascript (no databases or PHP). I worked together with the magazine’s creator over a period of about 10 weeks and I am very pleased with the result. I feel that because we worked iteratively – that is, we made multiple revisions on initial wireframe designs until a final design and information structure was reached – I was able to maintain a solid understanding of what the client was looking for and implement that in the design. We began with an initial kick-off meeting where we tossed around her goals and motivations behind the magazine’s online presence, and I documented key concepts from our discussions on the next page. From there, I developed a timeline and shared my design process with the client so that she would have some transparency over how the web site was to be developed. Although we were never able to meet in person, frequent phone calls and online messaging lead to a successful virtual project. It’s worth mentioning that the dialogue is rather casual throughout the document because the client in this instance was a peer at Carnegie Mellon.

The Cut Music Magazine Design Portfolio

Noah L Levin nlevin@cmu.edu | www.enlev.com

The Cut Music Magazine: Online I put our the notes from when we met on May 13th here for reference. The rest of this document should start to get you familiar with how I work. Today, I outlined a timeline and started on the initial site map and wireframes. I am excited to get this thing going!

OVERVIEW

NAVIGATION

HELPFUL LINKS

Interesting site that uses mostly images to attract users rather than being text-heavy. Front page will be a ‘cover flow’, with possibly navigation on the top and then scrolling downwards to reveal other information about The Cut. People should want to click around and read things, not necessarily going to the site with a specific goal in mind or going and being overwhelmed with choices. Home page may include several ‘widgets’ (tools / side features) like a calendar, a search feature, tag cloud, etc,.

Articles • Functions sort of as the home page • Choose from a ‘cover flow’ where details appear on hover

http://www.faveup.com • Inspiration

Feedback • Drop down form About • Quick paragraph about company, (from myspace for now) • Maybe will include link to wikipedia Staff • Style guide • Suggestion forms • List of departments / descriptions / dept head • Staff calendar

http://www.webcreme.com • More Inspiration http://www.last.fm • Online Radio http://snipurl.com/2nquh • Very interesting use of left navigation http://www.grafikas.com/index.html • Some neat effects like the read more scroll down http://www.sroown.com • Very valuable site, nice stylistic qualties http://snipurl.com/2nqrc NEW • Great advertising media kit.

Forum • Using open source http://www.phpbb.com/ • Forum topics and organization to be decided

Kick-Off Meeting Design Portfolio

Noah L Levin nlevin@cmu.edu | www.enlev.com

Proposed Timeline I remember at one point you said you sort of live by a simple motto of “I don’t want things to suck.” I’m all for it so I think we should go all out and make sure this site not only looks hot, but is highly usable with the primary purpose of spreading the word about The Cut.

I think this can be done in 10 weeks. I used pretty safe estimates with a lot of breathing room; I hope to be done even sooner. I think the best way to move forward from here is to set up a phone call and talk about whether this document makes sense and hopefully start making revisions to the site map.

June 22nd

July 29th

6th

I’m sure you’re already thinking about it, but I think for orientation we should have 3x5” table toppers advertising www.thecutmagazine.com. I also don’t know how much you are looking to recruit during orientation, but it would be cool if you made different flyers for each department.

August 13th

20th

27th

3rd

10th

17th

24th

31st

Structure & Wireframes

High Fidelity Design

Implementation

3 Weeks

Planning Design Portfolio

3.5 Weeks

10 Weeks Total

The Bare Bones

The Sexy Exterior

The Brain

Hello World!

Developing a site map, figuring out primary navigation and IA, and creating low-fidelity design sketches of important pages.

Working in photoshop to create and develop a consistent style and theme for the website.

Splicing up and coding the high fidelity design into a fullyfunctioning website.

First day of Freshman Orientation is Aug 18th. The website should be online and fully running a week before, but I kept in an extra week to allow for last minute updates when we’ll be seeing each other in person.

Noah L Levin nlevin@cmu.edu | www.enlev.com

W IREFRAM ES

I think it would be helpful to start by identifying Everything scrolls downward, subnavigation the key content of each page, holding back provides direct access. Idea being people come elements like color and style in order to focus to the site without necessarily a speciﬁc purpose, more on pure function and usability.

andhttp://www.sroown.com/ a list of quick links pops up. Clicking Theabout website uses an on themeffect will provide a quick light-box interesting that we can utlilize for above when the page to get instantly without losing userthe highlights overdetail an issue cover.

FAQ

Staff

Forum

Sub-navigation

Articles : About Us

but rather they may want to just ‘scroll around’

On and the click homeonpage, we mentioned would be something they ﬁnd itinteresting. beneficial to have all relevant information shown on The one images page. People wantpage to just on the should top of each are‘look part of andwhat clickmakes around’ than tryingUsers to identify therather website unique. simple which section they may be looking for. mouse-over the issue they want to read more

Site Map

Upcoming events...

Feedback : Advertising

Check out some pages! April 2008

March 2008

Highlighting over the issue covers will provide a list of quick links. Example shown on p. 4

Static, does not move as you scroll down. Google Ads may be placed here if you’re looking to make a few bucks a month.

February 2008