1. New Musahar Project (March 2013), presentation / report site

    The first version of the Musahar Project site never went live for a number of reasons, but with a need to refuel the budget for the program in Varanasi, U.P., it was time to solicit a new round of funding for the kids to continue learning and to expand operations. 

    To achieve this, I wanted to tap into previous supporters who have donated large amounts in our first round of funding, but I also wanted to conduct some grassroots campaigning. To achieve the latter, it’s key to introduce folks who aren’t aware of the program what it’s all about and where it’s come since inception. To achieve this, I changed the format of the site concept to more of a presentation mode. Using full width, vibrant photos, short text overlays, a clean information hierarchy, and clear copy pointing to what we’re all about, what has been achieved, and what’s coming next, I focused the new Musahar Project site on telling a store – and that’s exactly what this design accomplishes. It walks the user through everything they need to know to want to support the children. 

     

  2. Holstee (August 2012), campaign concept

    Before I worked at Holstee for six months, i put together a design concept for a landing page for a then-upcoming campaign. Holstee was releasing three interpretations of its classic Holstee Manifesto poster by artists TEKST, Ryan Hamrick, and Jonathan Calugi. 

    To promote it, I put together a concept to slowly release the series, where one poster would be announced and made public every week with a video sharing the story of the art. 

    To draw attention to the novelty of the Artist Series and focus on the content, I grayed out the header navigation bar. I wanted to channel user attention towards the posters, the purchase action and the anticipiation leading to the next week’s release.

    I used bold fonts and a captivating header connecting the release to the Manifesto that everyone knows and loves, and I then tried to direct the user’s attention towards that week’s poster by keeping it in line with the header and subheader. 

    Upon clicking the poster, a modal interface would slide up with more details about the art, the promo video and the Add to Cart CTA. I did this months ago, but if I went back, I’d probably invert the color scheme of the Add to Cart CTA to draw more attention to it.

    Visually, the page was designed to be as striking compared to the typical Holstee site as the new artist series was to the preexisting product line.

    Ultimately, the final design of the landing page was kept more in line with the Holstee website and is viewable at http://holstee.com/artist.

     

  3. Venture Prime (February 2013 – present), freelance, work-in-progress

    This is still incomplete, but it’s a freelance project I’m doing for a soon-to-be-launched company. I designed the logo, copy, and user experience of the landing page.

    Venture Prime has a two pronged marketing strategy, as their audience includes both early stage companies and early adopters of tech-enabled products, which called for a craft use of copy to make the value prop apparent to both audiences with minimal text. The challenge here was hooking the reader to get them to encourage them to delve into further information about the product and, obviously, engage with the CTA. 

    To accomplish this, I included the main landing page with the brief one liners and a CTA (email submission) for anyone who was immediately interested. For those whose interest was piqued, I created two routes (only one on display above) from the main page (using anchor links) with a clean explanation of the usage of the product – to make the simplicity evident – and the benefits of usage. 

    In each of these Step 2 pages, I highlighted the CTA with a key headline of the biggest value-add benefit emphasized to trigger action from the target audience. 

    In writing the copy of the usage steps and the benefits, I ensured the main point was organized to function on its own without the support text. I expect only a fraction of the audience to read further, but I didn’t delete it because elaboration upon certain points would provide a layer of comfort and security to the potential user. 

    The goals with the visual design and typography choice was to relay a sense of modern professionalism. The goal was to keep the look “young, modern, and techie,” without looking too childish or playful. I’m still toying with it, but I think the dark background either adds a level of seriousness to the page. Or it makes it look tacky. I’m not sure yet. 

    I’m still working out the color scheme and the iconography, and the UI post CTA engagement is still in the works, but it’s coming along. 

     

  4. Rap Genius (January 2013)

    The focus here was to focus on what most users are coming to Rap Genius for and how to give them what they want with the least mental investment from them (this design was done before Tom from RG mentioned in an interview at DLD 2013 that some of the capacities of RG were purposefully made difficult to create divisions in their user base). With this in mind, I focused less on completely starting from scratch and, instead, keeping key elements of the information structure and general aesthetic (color scheme, font style) as they are already. 

    Instead of using Bebas Neue and Helvetica, however, I chose two similar fonts that complemented each other better - Gotham HTF Condensed and Gotham HTF Book. I also used Gotham HTF Bold as a filler text for the Rap Genius logo, which was made with a custom font I didn’t have access to. 

    First, I hid information between the title of the work and its contents within an expandable section, viewable upon clicking the expand icon next to the title. I also created a “Published” icon to indicate that a user would need ≥600 Rap IQ to edit the song in question. This message would be viewable if the icon were hovered over. I imagine most users are not editing explanations, so this information isn’t always needed. 

    Second, I consolidated information on the right sidebar and made sections more digestable with (a) more whitespace, (b) section headers, (c) consolidated navigation bar and admin link bar (top and bottom of the sidebar, respectively), and (d) expandable sections. This keeps information beyond a certain threshold viewable to those who want to read that information, and it eliminates distractions for people who are on the page strictly for lyrics. The separation also reduces confusion for new visitors to RG and makes the information significantly easier to digest. Condensing the contributor list to 10 users also adds a layer of exclusivity to those users who add the most value to a set of explanations; this is consistent with the exclusivity of editing Published songs that’s assigned to those users with Rap IQ greater than 600. 

    Third, I attempted to improve the explanation interface. The current explanations swing up and down on the page as a user peruses the annotations of a set of lyrics on the site. This calls for the user to do more work in consuming the information, and, in some cases, forces the user to scroll up to see the beginning of an explanation after clicking a specific passage (e.g. http://cl.ly/MiDd). In my alternative design, I had the explanation interface roll out over the right sidebar and stay in one place no matter where the lyrics being explained were. This trades one set of information for another (i.e. the sidebar content for the explanation), and paired the passage in question being cited at the top of the explanation interface, this gives users less to digest and makes it easier to read explanations without having to swing their eyes up, down, right, and left every time they move to the next passage.

    Lastly, I inverted the color scheme for two main reasons: (1) as Rap Genius begins to become a bigger hub for longer form content — speeches, articles, plays, literature, etc. — readability is incredibly important. Having dark text on lighter backgrounds would improve the experience for long-form content consumers and would lead to longer lasting traffic and engagement; and (2) the internet is accustomed to dark on light. That might sound like a silly reason, but this creates a custom amongst frequently trafficked sites on the web. 

    From my understanding, the black background is one of the trademarks of Rap Genius, and it’s possible that a white background could turn off community members. This is meant as a humble proposal — more as a concept. The full design can be viewed here: http://bit.ly/YOjOrV. It shows the full explanation interface, social media engagement, and a header bar UX redesign.

    To work more within the aesthetic of the RG site, I created a darker variant of all the designs here — http://bit.ly/VEptQk

    Roles: product research, user analysis, redesign

     

  5. Playbutton (January 2013)

    At the PennApps Spring 2013 Hackathon, a few friends and I got together to produce a real-time collaborative DJ app. A laptop would be connected to a central audio source, and people could add to the queue of music by going to a room-specific link on their phones and searching across Soundcloud, Youtube and Spotify simultaneously. 

    I designed the desktop interface for the admin as well as the mobile interface for party-goers in what was my first stab at a music app or a mobile interface. 

    Role: product designer

     

  6. The Mushaher Project (June 2010 - present)

    In 2010, I traveled to a village hoping to effect some sort of tangible change. Over three months, I planted the seeds for a health and education program that now serves 50 children of the Mushaher community, an untouchable tribe, outside of Varanasi, India.

    The program has been running for two years now with resources I was fortunate to procure and a team I assembled during my time in India. I visit every year to monitor progress and administer operations from the states otherwise.

    A web presence is in development (preview above). 

    Roles: web design, administrator, fund raiser, operations manager, stakeholder relations

     

  7. ReWork Pamphlet (November 2012)

    ReWork, a social enterprise that connects professionals with companies that are making the world a better place, as part of a larger scale branding strategy, wanted to produce a pamphlet with common hiring mistakes they often found companies making.

    This was the first electronic publication I’ve ever designed. There was emphasis in this project on what the most important content was, developing a strong information hierarchy, and keeping the pamphlet in line with the brand identity. 

    Roles: e-pub design

     

  8. Tsunday (May 2012 - August 2012)

    Tsunday was an attempt at redesigning Patchberry with a few purposes in mind — (1) limiting content on the service, (2) optimizing readability of content, (3) better content organization within user pages and across service, (4) minimizing social interaction and maximizing personal utility (single user mode). 

    The inspiration behind Tsunday came from the NYTimes Magazine - a weekly publication dedicated to long form content with great depth, best suited for Sunday reading (in no rush). Tsunday was meant to host only content that one would want to consume with zero distractions. 

    Roles: product design

     

  9. Patchberry (January 2012 - May 2012)

    Patchberry was built as a web curation product. In the end, the goal was to collect the web’s best resources about specific topics that ranged far and wide.

    The guiding philosophy of the product was that the internet contained lots of noise and that much of social media was focused on a real-time, fleeting feed of content. However, none of it focused on timeless content worth several looks. In short, we wanted to build digital bookshelves that individuals could build for themselves and/or to share with friends.

    This gave birth to Tsunday, a second iteration of this product who’s user experience lent itself less to the propagation of excessive content. 

    Roles: product design, user research

     

  10. Alternote (May 2011 - May 2012)

    My first web project, Alternote, was a real-time conversation product for classrooms. The product encouraged a backchannel discussion around different events — lectures, homework assignments, exam reviews, office hours, etc. — in large classrooms with the goal of shaking up the status quo of how we learn.

    Alternote was piloted in six classes at the University of Pennsylvania and two classes at NYU before shutting down operations. The product didn’t do the most effective job of solving the problem, and it became increasingly apparent that in-class technology worked most effectively when teaching methods embraced the product instead of simply using it to supplement the preexisting methods. 

    Roles: product design, user research, user acquisition, managed team, monitored pilot user experiences

     

  11. Long Bowtie (December 2012 - present)

    With zero drawing experience, I decided to take up an experiment of conceptualizing ideas and philosophies with a few lines, and sharing one creation publicly every day. It’s a simple project, but has been an interesting experiment in expression. 

    More work is viewable at http://longbowtie.com

    Roles: drawer, scanner, witty-line-generator, blog poster, pen-buyer