arjun mahesh ux portfolio

23
ARJUN MAHESH WORK SAMPLES

Upload: arjun-mahesh

Post on 13-Apr-2017

122 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Arjun Mahesh UX Portfolio

ARJUN MAHESH

WORK SAMPLES

Page 2: Arjun Mahesh UX Portfolio
Page 3: Arjun Mahesh UX Portfolio

“Everything in the world is exactly the same.”-Kanye West

Page 4: Arjun Mahesh UX Portfolio
Page 5: Arjun Mahesh UX Portfolio

NAME

EDUCATION

EXPERIENCE

HOBBIES

TOOLS

Arjun Mahesh

Bachelor’s of Architecture, USCMinor in Computer Science, USC

UX Design Immersive, General AssemblySeptember 2015 - November 2015I learned core design principles and methodology as applied to the UX design field. Skills gainedinclude Research Interviewing, Research Analysis, Sketching, Wireframing, Mock-Ups, andProto-typing. I also worked in and led teams of client-driven projects to meet deadlines andestablish proejct deliverables.

Consultant, Gehry TechnologiesMay 2014 - September 2015In addition to developing script-based solutions for the comples forms of Frank Gehry’s designs, I was in charge of creating presentations and interacting in client meetings. Much lilein UX, I had to communicate with different parties involded in the design process, such as thearchitects, clients, structural engineers, HVAC, etc.

AudioMy non-professional life is occupied by music production and break-dancing. I've been producing since high school under the stage name Creative License (Check my Soundcloud, bruhhhhh).

VisualOver the years I've adopted Creative License as the umbrella for my other personal Graphic Design, Animation, and other various creative endeavors. When I'm not working or in my studio, catch me at a Soulection show, rocking a circle, or running the magazine I co-founded: No Greater Good.

User Experience + Computer ScienceSketch, Adobe CS, Hype, Principle, InVision, Marvel, POPC++, Java, HTML, CSS, Javascript, SQL, VBA

Architecture + 3-D ModellingRhino, AutoCAD, Grasshopper, CATIA, Revit, Dynamo, ProcessingProject Miller, ZBrush, MeshLab

Page 6: Arjun Mahesh UX Portfolio
Page 7: Arjun Mahesh UX Portfolio

PROJECTS

Soundcloud Curate (Tablet)MOCA Shanghai (Installation)

Pratt Institute Re-Design (Desktop)Curate NYC (Mobile)

Page 8: Arjun Mahesh UX Portfolio

SOUNDCLOUD CURATE

How do we define the act of live, collaborative, DJing?

In a team with fellow UX Designers Amelia Ruslim, Stacey Zhou, we were asked to design an online, collaborative, DJ-ing feature for Soundcloud. Before delving into the specifics of what an online, collaborative DJ-ing feature could encompass, it was important for us to define the ever-evolving definition of a DJ. Amelia, Myself, and Stacey

Conducting User Interviews

Background Research

LIKE COMMENT SHARE ORGANIZE UPLOAD ANALYZE

“DJ-ing is telling a story, creating a narrative through a specific sequencing of tracks…”

“…but playing out a good transition fluently is a lot more interesting, and able to keep that flow going as well.”

“A DJ should be responsive to a crowd… and be able to take the mix up or down depending on the energy.”

6 Interviews Ages 19-34 DJs and Fans Soundcloud Users

Page 9: Arjun Mahesh UX Portfolio

From our user research, we determined a DJ needs to perform two primary tasks: respond to a crowd, and cleanly transition from song to song with no breaks. Given these criteria, how can we help Soundcloud build a platform that allows sound curators to perform these tasks within a digital realm?

ESTABLISHING A MINIMUM VIABLE PRODUCT

DESIGN STUDIO & TESTING ITERATIONS

Hand-Sketched First Iteration Digital Wireframe First Mock-Up Iterated Mock-Up

This first iteration was the primary hand-sketch we developed. Our primary focus was designing for an intuitive interface that provided the necessary features that Soundcloud DJs needed.

The digital wireframe begins to locate detailed components of each module contained in the Curate interface, including stats, queue, currently playing, and transition tools.

Our mock-up begins to capture the look & feel of this feature. We studied and incorporated Soundcloud’s visual and branding style - including their fonts and color schemes into the sketch.

After conducting some user tests, we re-organized the design to present users with more critical data first, as well as use color to introduce more hierarchy to the modules of the interface.

Page 10: Arjun Mahesh UX Portfolio

Soundcloud Curate Prototype

Page 11: Arjun Mahesh UX Portfolio

The listener interface for Soundcloud Curate would allow for listeners to not only see what songs the DJ has played through the entire set, but favorite and add them to their playlists directly from the interface. Also would be provided a feedback module for leaving comments and showing the DJ some love during any transitions or tracks the DJ plays. Both DJ and the listener can see the crowd response and number of people tuned in.

The DJ interface for Soundcloud Curate would provide a brand new method of not only queue-ing songs but mixing them together as well. Incorporating basic transition techniques such as fade, frequency, BPM manipulation, and reverb, a DJ can set cusom transitions directly from the Soundcloud Transition module. The DJ may also closely monitor their audience response to gauge the success of any new tracks they would like to test.

THE LISTENER INTERFACE

THE DJ INTERFACE

Page 12: Arjun Mahesh UX Portfolio

MINIMAL RELAXATION: MOCA SHANGHAI In the summer of 2013, I was chosen to be part of a team from USC to build an outdoor installation on the outdoor rooftop cafe of the MOCA in Shanghai. Due to exreme weather conditions, the space was highly under-utilized except at night when it cooled down, and the owner was looking for an art installation to help re-invigorate the space at night. In a team of 7, we designed, iterated, and constructed an installation over the span of 10 weeks.

Frei Otto & Netting Structures Shanghai Freeways

The work and research of Frei Otto was highly influential in our design inspiration. Frei Otto was a highly experimental and pivotal architect whose work with tensile structures in the early 1900’s informed much of parametric design today. He studied naturally occurring formologies that occurred when netting structures are pulled and pushed. The resulting curvatures are not only beautiful but structurally brilliant. Using netting structure was especially in our interest because of its high availability and ease of production in Shanghai. Sourcing local resources not only made it affordable and workable with our budget, but it made the transporation of materials a considerably easier task as well. Geographically, it would be relatively easy to bring the materials on site, and would also satisfy the constraints of the existing roof access without a crane or other construction vehicles.

One relevant cultural technique we also looked to incorporate in our design was the bright neon LED lighting that was so popular in Shanghai. Specifically, the freeways in Shanghai were all vibrantly lit at night time to give the otherwise drab city structures an exciting feel.

How do we incorporate Shanghai’s culture & the MOCA’s location to develop an experiential design that meets the owner’s needs?

Page 13: Arjun Mahesh UX Portfolio

DESIGN STUDIO & TESTING ITERATIONS

Digital Modelling & Tensile Structure Analysis Low Fidelity Visualization

High Fidelity RenderingsSmall Scale Mock-Ups & Detailing

On-Site Construction Final Installation

Page 14: Arjun Mahesh UX Portfolio

Minimal Relaxation: Final Installation

Page 15: Arjun Mahesh UX Portfolio
Page 16: Arjun Mahesh UX Portfolio

PRATT INSTITUTE : WEB RE-DESIGN

What are some of the existing pain points of the Pratt website, & how can we improve the site more intuitive?

In this exercise, we were given the hefty task of re-designing a college website of our choosing. In order to do so , I had to first understand the pain points of the existing website, and then propose a design that mitigates those pain points. Since the visual identity and organization of Pratt’s website were already quite strong, I chose to use the existing design elements and re-organize them to improve the navigation and interface of the site.

INFORMATION ARCHITECTURE

Existing Information Architecture Re-organized Information Architecture

The existing Information Architecture had three different tiers of navigations, of which the secondary was entirely repetitive and contained within the first.

In order to increase the navigation efficiency, I experimented with simplifying the Inofrmation Architecture down to only two tiers of navigation, and experimenting accordingly. The primary navigation is focused on prospective students, while the secondary is for existing students.

Page 17: Arjun Mahesh UX Portfolio

DESIGN STUDIO & TESTING ITERATIONS

Picking Apart the UI

Home PageAcademics Page Schedule Page

Shuffling the Elements

As a design exercise, I chose to isolate the existing graphic, navigation, and informational elements on the existing home page.

The re-designed page now only consists of a header and sticky footer.

The Academics page contains general information about the programs offered.

The Schedule page allows users to quickly find the dates in which courses and seminars occur.

Once I isolated the elements of the home page, I experimented with creating different possible layouts. This allowed me to quickly visualize the pages, and move forward with more formal wireframes as well.

Page 18: Arjun Mahesh UX Portfolio

HIGH FIDELITY PROTOTYPE

After creating high fidelity mock-ups, I utilized InVision and Marvel to build different iterations of prototypes for testing and performance analysis. The final re-design did not incoporate any new features or visual elements, but rather re-structured the existing the content for a simpler and clearer design. When performance of the prototype was tested against the original site, the re-design proved to be far superior in terms of ease of navigation, thanks to the new Information Architecture of the site. See the following page on specific testing methods and data.

Page 19: Arjun Mahesh UX Portfolio

PROVING IMPROVEMENT: TESTING RESULTS

Task 1: Task 2: Task 3:You’re interested in taking a look at the upcoming courses for the semster. Find the course catalog.

As a graduate student, you’re interest in Continuing Education for your career. Find some Professional Studies offered at Pratt.

Find out what other seminars, courses, and activities are upcoming at Pratt.

To test the measure of success acheived with the design, I had six users perform the same three tasks on both the existing website and my prototype (three users each), and recorded the time it took for each.

Page 20: Arjun Mahesh UX Portfolio

CURATE NYC: APP DESIGN Curate NYC is a startup led by Kenneth Kuo which aims to help men dress better and cut down on time getting ready on the morning. Using propietary algorithms that allow users to rapidly build their closet in the app, the app recommends outfits to wear based on weather, local styles, and pairing techniques. Kenneth asked us in team of 3 to not only re-design the app, but specifically asked for a stylish and cohesive on-boarding process with a brand identity.

What motivates men to dress well, and what are

there key behaviors when getting dressed? How

can this inform the functionality offered by Curate

NYC?

“The right balance would be something I'd totally go for. But haven't found it yet.” - A.K.

“My biggest pain point is finding clothes that fit my existing wardrobe. I'm not gonna buy a whole new wardrobe at once.” - B.C.

“The stylist experience can be insightful, because you discover how people might be able to see a different side of you merely by a change in the way you present yourself.” - N.R.

12 Interviews Ages 21-37 Finance/Design Fashion Conscious

Page 21: Arjun Mahesh UX Portfolio

DESIGN STUDIO & TESTING ITERATIONS

Existing On-Boarding

Existing Curate Page

Weight Input Sketch

Curate Page Sketch

First Iteration

First Iteration

Low-Fidelity

Low-Fidelity

High Fidelity Mock-Up

High Fidelity Mock-Up

The existing on-boarding lacked character, usability, or any unifying graphic elements. Additionally, the button sizing did not take into account the user’s ahnd, and was not easy to set. Our re-design introduced separate screens for each input, and the idea of the “measuring ticker” as a graphic element to input data.

The current page for outfit curation is extremely hard to read and poorly proportioned. Too many categories of clothes are inserted into a single screen. For our re-design, we took a look at nNetflix’s presentaiton strategy, and introduced a much more versatile and proportioned interface for the user to set their outfit.

Page 22: Arjun Mahesh UX Portfolio

HIGH FIDELITY PROTOTYPE

High Fidelity On-Boarding

High Fidelity Curate Pages

Page 23: Arjun Mahesh UX Portfolio

Request for a short Interaction Design Gif!