Blog - Page 2 - saurabhr

Posted on

UX/UI Design — HearYe

project scope

Through Northwestern’s Interaction Design Studio were tasked to consult companies from Northwestern’s Startup Garage on UX/UI design.

We worked with HearYe, a mobile application that is designed to help friends plan casual group outings. At the time HearYe had not launched their app yet was looking for advice on user workflows and features.

As a studio, we followed the Google Ventures Design Sprint methodology.

process

The Problem

HearYe’s core issue was the tension around providing a platform for users to plan casual events, but events lose their casualness once they move into traditional planning platforms (Facebook, Eventbrite). Conversely, casual planning interfaces (texting, GroupMe) do not have the necessary features to facilitate event planning.

Initial Research & Insights

We spoke with college students and young professionals about how they define casual events (e.g. playing basketball, going to the local bar) and how they go about planning them.

The common tension with our users was this relationship between flakiness and co-dependency. Potential attendees have no accurate way to discern whether their friends are attending the event, so won’t commit to the events. Their friends act in a similar way leading to a lot of “Maybe Attendings” where no involved party (host or attendee) has a strong sense of the event.

Through that insight we were able to map the different scenarios of co-dependence that lead to commitment to events.

Scenario 1: Co-Dependant Mutual Attendance

Scenario 2: RSVP Change

Scenario 3: Co-Dependant One Way Absence

Scenario 4: RSVP Attendance Disconnect I

Scenario 5: RSVP Attendance Disconnect II

Prototyping & Testing

Initial testing was done paper prototypes. In earlier sprints, we presented open-ended prototypes and co-created features with our users and then tested fleshed out versions of those features in later sprints.

Through testing, we realized we can’t eliminate co-dependance in event attendance, but we can facilitate communication among co-dependant invitees in order to make for an overall more efficient process.

Since paper prototypes would not suffice for testing features that are dependant on social dynamics, we leveraged the chat platform, Slack, and had individuals plan real casual outings through those channels while our team facilitated their interactions.

Final Design

Finally, we presented our designs in a digital medium that built upon the visual identity that HearYe developed.

Key takeaways include a feature to afford the minimal co-dependence communication required, features that accounted for the logistic fluidity of casual events, and these features delivered in a linguistic and visual medium that fostered the informal planning environment users needed.

selected work

Posted on

Messed Around & Tracked a Triple Double

How can we design a dashboard to allow users to easily track Russell Westbrook’s stats?

R • d3 • Data Analysis • Data Visualization

Project Overview:

A triple double is when a basketball averages 10 points, rebounds, and assists. The only player to accomplish that over the course of an NBA season was Oscar Robertson, roughly 50 years ago. Russell Westbrook, currently a point guard for the Oklahoma City Thunder, has a been close to that milestone all season — a feat that has been talked about greatly in the media this year.

I wanted to create an interactive dashboard that would allow users to explore and analyze Westbrook’s historic season. This intially entailed using R to query data off NBA’s API and generate a probabilistic model for Westbrook’s chances of averaging a triple-double. From there I used Javacsript’s d3 library to deliver an information rich, interactive interface.

The project can be found here, and will continue to live update through the rest of the NBA season. A screenshot is below.

Posted on

Pacific Die Cut Industries | Project Engineer

role overview

I spent the first two years out of undergrad as a Project Engineer at Pacific Die Cut Industries (PDCI) — a contract manufacturer servicing the automotive and medical industry. I started supporting engineers on medical and automotive projects and eventually became the lead engineer on medical projects.

As a Project Engineer at Pacific Die Cut Industries, I was the technical point of contact from the initial client request for quote until the client’s product was at full-scale production.

This first entailed costing out the project so the sales staff could present a quote. For larger clients, such as Stryker or Boston Scientific the focus was on developing an optimized manufacturing process based on requirements given. Conversely, with startups, I would co-develop the product with them (product drawings, material sourcing). For projects that moved forward, I would work with the production and quality assurance staff on implementing the manufacturing process. Once the process was finalized and documented, my role on the project would come to a close as production staff took on project ownership.

tools used

Process Overview

My workflow for the typical project can be described as such:

Step 1 — Review customer drawings, provide design feedback, and cost out the project

Step 2 — Work with operators to implement manufacturing process

Step 3 — After determining quality and manufacturing capabilities from pilot runs, formalize manufacturing protocol and start full-scale production

selected work

Posted on

CAD/CAM: Art to Part

How can we injection mold a toy based on a 4th grader’s sketch?

Skills

Injection Molding • CNC • Design for Manufacutirng/Assembly • CAD Modeling

Project Overview:

This project is currently in progress. I, along with 3 other students, are working designing and manufacturing a child’s toy from a 4th graders sketch. This initially entailed modeling the part. From there we created a CNC program via Nx to machine out the molds. We are currently machining out the molds to be injection molded.

Personal Responsibilities:

My main responsibility was a subassembly of the final part – this entails modeling the part and designing the corresponding mold taking account DFMA principles.

Project

Process

The project started with this beautiful sketch by Anna, Keyon and Mack — three 4th graders at a local elementary school.

Based on their drawing, we modeled the above cupcake. It has three distinct parts — the candle, the frosting & the base.

Before modeling the molds, we 3‑D printed our part to visualize and verify it.

After verifying out CAD models CNC molds were created.

Finally the parts were injection molded

Posted on

IDI 24 Hour Design Challenge

How can we design an interaction to prepare patients for Post Operative Cognitive Dysfunction?

Project Focus

User Research • Interaction Design • Service Design

Project Overview

This past Fall I participated in IDI’s (Integrated Design Innovation) 24-hour design challenge. IDI is a collective of design students from Northwestern, MIT, Carnegie Mellon, and UPenn. Over 24 hours I, and a group of 4 other students, were tasked with designing a solution to prepare post-surgery patients to the threat of Post Operative Cognitive Dysfunction (POCD). Based on the research our team proposed Doc Dougie, a chatbot that provides caregivers the necessary tools to recognize POCD.

Skills Used

The main focus of the competition was design research and interaction design. The interaction design went through two quick iterations from a paper-prototype to the looks-like prototype showcased in this video. The design research entailed user interviews, environment walkthroughs and secondary research.

Process

Though the competition was short (24 hours), teams went through all the steps of the design process.

Initially our team scoured secondary resources to really understand POCD. Once we developed a better background in regards POCD, we interviewed patients, caregivers and medical professionals to get a deeper, contextual understanding of the problems POCD patients face. Having gained a better understanding of those issues, we did literal walk through of the out-patient process to understand the different user touchpoints.

Synthesizing our research we developed a basic paper prototype (below) to illustrate the type of interaction we wanted to user to have.

Finally, we fleshed out that prototype via the below chatbot, as illustrated by the video below.

Overall, Doc Dougie provides an interface that gives caregivers the instant, personal feedback and assurance they need when taking care of their loved ones

Posted on

Proctor & Gamble | Packaging Design & Engineering

Project Details

Procter & Gamble has decided to pursue Intellectual Property Rights on the final project we designed. Consequently, details about the specific P&G product and the final product are under a confidentiality agreement.

Through Northwestern’s Product Design Studio Proctor & Gamble asked student groups to tackle their long-term innovation projects. Myself and 3 other Engineering Design Innovation students were tasked with designing eCommerce packaging.

process

ethnographic research

Initially, my team and I conducted in-home interviews with consumers to get a contextual understanding of their experience with P&G’s current packaging solutions. The insights gleaned from those interviews were synthesized into succinct themes from which our team teased out our initial design imperatives

initial prototyping

From there my team and I created low-fidelity prototypes that corresponded to our initial analysis of user needs. Prototypes at this juncture consisted of foam-core and cardboard to illustrate proof of concept.

User Testing

The low fidelity prototypes were shown to users to get more pointed feedback on the direction our team had taken. The user feedback was analyzed in a similar way to the first user looks, and that feedback allowed our team to define our design direction more clearly.

final design

With a more defined design direction and understanding of user needs, my team and I designed and prototyped a higher fidelity, human-centered packaging solution

outcome

Our group pitched our final design to Procter & Gamble and the company decided to pursue Intellectual Property Rights on the final project we designed.

selected work

Posted on

Comparallel — Knight Lab | Data Interaction Design

About the Project

Comparallel is a project in conjunction with Northwestern’s Knight Lab.

Our team was tasked with making “open data” (e.g. the data the US Government freely releases) more accessible and actionable for journalists.

Comparallel can be found here.

The product page is here.

Personal Impact

My main impact was in the initial human-centered design research and product development. Being the only person on my team with a design-thinking background, I designed and conducted most user tests/interviews. That research was used by our team to design features that would resolve the tensions uncovered. At the tail end of the project, I developed the script to find sub-correlations in data (via R). Additionally, I and another teammate developed the actual concept in JavaScript.

Process

User Research

Our team first reached to journalists of varying levels of data literacy — from FiveThirtyEight journalists that do deeper data dives for their stories to local economic reporters that report basic economic indices.

We were able to map out a journey point and identify a clear tension point for newer journalists.

Design & Prototyping

Based on the tensions identified, we created an ideal journey that we wanted our product to afford.

Using that information we tested different ways to display data. First starting with a paper prototype to get initial formative feedback from users, then later moving to a static digital screen to get more UI feedback.

A second series of prototypes (via Tableau) were used to test interactive features with users before moving to development.

Final Design

Our final design was made via JavaScript’s d3 library in conjunction with R.

selected work

Posted on

NBA Hackathon | Data Viz & Analysis

About the Project

I was one of 200 students out of 1000+ applicants to participate in the NBA’s first annual hackathon. Over an entire day of coding, myself and two teammates developed a new metric to quantify how well NBA players are able to defend shots. Our metric was well received — particularly to do the cohesive presentation of the information (scope of the work, usefulness, and use of data visualization) and lead to a top 5 finish in the hackathon

Personal Impact

In my team of 3 I had the most technical experience, consequently handled the majority of the analysis (via R) and the data visualization (R/ggplot2) while my teammates focused on the presentation and quick data analysis (via Excel).

Tools Used

Project Detail

Background

Our team developed a new defensive metric — contest quality, to gauge how well NBA players were at contesting shots, independent of the defensive sequence before that.

Intro

We chose to tackle the following prompt:

Develop a new method or tool for evaluation of defensive performance in the NBA.

Currently, there are robust ways to detect shot quality, such as the Quantified Shot Metric (qSI)developed by ESPN. The idea behind qSI is that value of a given shot can be determined by shot distance and the distance of defender(s) to the shooter. The metric we developed, Contest Quality, looks at how well players are contesting shots independent of shot quality.

Process

A shot 15 ft away from the basket with a defender 2 ft away from has an expected Pts/FGA of 0.74 (eFG% = 0.37). The eFG% under different circumstances is defined by the heatmap below:

Shooters under those aforemtnioned conditions, defended by Kevin Durant have an Exp. Pts/FGA of 0.68, creating an expected points difference of ‑0.06. By taking that expected points difference for every shot a player defended over the past two seasons (14/15 & 15/16), averaging that amount of shots they defended. Shots Durant defended the past 2 seasons had an expected 1.000 Pts/FGA, but in reality Durant only allowed 0.839 points.

Analysis

To better visualize how players performed their charts have been stratified by role (guard, wing, & big).

A player’s presence in quadrants II & III indicates they’re forcing low percentage looks. Their presence in quadrants I & IV indicates they’re contesting shots well.

Guards: Redick stands out as a player that both forces poor shots and contests those shots well. Contrast that with Conley, who does an excellent job in forcing lower percentage looks, but does not do a great job of contesting them. This doesn’t necessarily mean that Conley is a poor defender, but that he might be doing a poor job of contesting shots, despite doing everything else well.

Forwards: Durant is an enormous outlier. While he isn’t doing the best job of forcing bad shots, his ability to contest turns would-be good shots into bad ones. Jabari Parker is the worst of both worlds — allows good looks, and does a poor job of contesting them after the fact.

Bigs: The big men pass the eye test as well. Draymond ranks as one of the best at contesting shots, while someone like Randolph scores poorly.

Secondary Analysis

Our initial instinct was a correlation between anthropomorphic wingspan, height, standing reach) and contest quality, and initial analysis. However, breaking out the data into player roles (guard, wing, big), the correlation is more dubious.

Outcome

Our work received a top 5 finalist award and was particularly lauded for our visual storytelling approach.

Posted on

Small Scale Bioreactor | Product Design Engineering

About the Project

For my senior capstone at UC San Diego, I, along with 3 other team members (1 engineer, 2 biotechnologists), partnered with a local biotech company, Histogen, to engineer a small-scale bioreactor. Histogen, interested in conducting stem cell research, needed a solution that allowed them to conduct multiple tests under conditions that mimic physiological conditions (bioreactor), but in small volumes to keep the volume and consequently of stem cells down.

From Histogen’s technical benchmarks, our team designed a solution, created a prototype, and finally carried out experiments to validate the design. The project was featured at UCSD’s annual Bioengineering Day.

Tools Used

Personal Impact

While I helped develop the initial design along with the biotechnologists, my impact was largely in prototyping and testing. After our team came together on a final design, I was responsible for modeling, creating and designing the prototype bioreactor. I also designed the test protocol to validate the fluid mechanics of the device and sourced the material for prototype creation.

Project Details

Background

For my senior capstone project, I, along with 3 team members (1 other engineering student, 2 biotechnology students), partnered with a local biotech company, Histogen, to design a small-scale bioreactor. Histogen’s smallest bioreactor was 50 mL. Consequently, the cost of running multiple stem cell experiments in parallel was cost-prohibitive. Our goal was to create a sterilizable, small-scale that would cut down experiment cost for the company.

Process

This initially started with exploratory sketches to identify different bioreactor forms and designs for maintaining solution agitation.

The two biotechnology majors on our team conducted initial research on the minimum technical parameters (fluid levels, flow speed, etc.) required to still be useful for the type of experiments Histogen would be conducted. From there our team ideated on potential solutions, eventually narrowing down to a few solutions that were fleshed out in CAD

Based on the feedback from Histogen’s scientists, we proceeded to flesh out a single design, highlighted in the video below.

From the above design, I, along with the other engineer in the group created a working prototype. Material choice was largely dictated by it’s ability to sterilized via autoclave and cost.

We then designed a series of experiments to test actual fluid flow in the device. The main areas we sough to address were the water tightness of the device, the speed at which fluids could be effectively ran through the system, and the level of agitation we were able to induce to potential cell cultures.

Outcome

In conclusion, our final design was able to cut Histogen’s experiment material cost by 33% and the parallelized 6‑channel bioreactor allowed for quicker turnaround on experiments.

selected work

Posts navigation

Previous page Page 1 Page 2