up
left
down
right
Up & Down to navigate individual projects. Left & Right to explore their content.
  • About the project: A three week design sprint to re-imagine key functionalities of Macys & Bloomingdale’s iPhone apps in a pre-purchase, in-store and post purchase scenarios.
  • My Role: As a product designer I worked with the Tigerspike team to explore a multitude of opportunities in the mobile retail context. Through user-testing and stakeholder interviews we designed user stories and delivered it through high-fidelity working prototypes. For this project, I mainly utilized Illustrator, Photoshop, Invision and HTML5, CSS3 with Middleman.
  • A clutter free Home-screen with a clear eye path and a digestible overview

    • Full-screen advertising to allow a thematic experience
    • One tap access to Search, Scan, Shop and other prioritized CTAs
    • Personalized content based on the users bio and shopping preferences
  • A flat hierarchy that provides a more intuitive navigation

    • Breaks content into bite-size pieces to prevent disorientation
    • Contextually aware content for a richer in-store experience
  • Neatly organized Product Display Page with a focus on imagery and functional personalization

    • Incorporating a full-screen image gallery with embedded videos
    • Elevating key information outside of accordions for easy access
    • Indicating in-store availability and product suggestions
  • The home screen introduces look-books, a more editorial approach to m-commerce. Highly personalized content keeps the user coming back to the app.

    • Search/scan is minimized in an editorial and look-book experience
    • Each content block is a link to a campaign, look-book, PDP or editorial content item
    • Use of large full screen visuals with color, depth, clarity, and visual detail
  • Conclusion The design strategy and prototypes was very well received by Macy's stakeholders and we were subsequently engaged into the next stage of the project. It also inspired an array of new functionalities within the product road-map for the next few releases.
  • Learnings & Footnotes: By conducting stakeholder interviews, additional line-items were identified for the project scope. Its very important to plan back-up resources for high profile projects to avoid any adjustments to the overall timeline.

    Thanks to Pauly Ting and his moppy hair-do for all his help.
Alexander Calder, Double Gong, 1953; metal and paint; The Doris and Donald Fisher Collection at SFMOMA; © 2010 Calder Foundation, New York/Artists Rights Society (ARS), New York; photo: Ian Reeves | Image Credit: sfmoma.org
  • About the project: Create an adaptive micro-site to describe and celebrate the new San Francisco Museum Of Modern Art. It should translate and highlight particular elements within the museum's transformational story and take the user on a digital journey.
  • My Role: As the lead product designer, I collaborated with the Head of Digital and Art Director from SFMOMA. After the initial product and market research phase, I created the IA, wireframes and prototyped multiple art directions with After Effect and Invision. Later on I used Illustrator and Sketch to wrap it up.

Homepage Intro Prototyped in After Effects

  • Conclusion The site went live immediately after launch and it was very well received by all the SFMOMA stakeholders. We noticed great increases on visitors and engagements by the site users.
  • Learnings & Footnotes: Client education matters, a project needs be bundled properly with the right set of documents to facilitate any future updates from the client. We managed to patch it up by co-working with the client post launch but a great lesson learned.

    Thanks to Kier Winesmith and Bosco Hernandez for all their support.
  • About the project: The Innovation and Research group at Al Jazeera wanted to challenge storytellers, developers, and designers to come up with the most innovative nonlinear storytelling application.
  • My Role: In response, I created Arc. Its built on the principle that each narrative should have complementary stories that focus entirely on the humans involved or impacted by the main narrative. Further, it enables nonlinear storytelling to interweave these stories and create a truly compelling read.

    We won the second prize.
  • Pinch anywhere on the homescreen for a more condensed view of the story feed.

    • Swipe left on an individual story to reveal bookmarking and the ability to share the story.
  • Press and hold anywhere in the app to access the navigation panel

    • Removing bars and navigation buttons preserves more space for content.
    • From here, the user can easily navigate to the home page, search field, profile page, *share, *bookmark and the *Reading Control Center.
    • *(only on story page)
  • This will keep track of the user’s reading history and lets them access any bookmarked stories or notifications.

    • When a user creates a profile, their reading history can be tracked to enhance the logic of Compass cards. The more data we get, the smarter the suggestions will be.
  • All the components of the story housed in one cohesive narrative.

    • Each story can contain any of the following: Social API component (Twitter, FB, Soundcloud, etc), image gallery component, interactive map, discussion board, etc
  • Lets the user customize the reading experience to their preference. The user can only access it from a Story view.

    • The user can adjust screen brightness, pick a serif or sans serif font or resize it, pick a color themes and turn on tilt to scroll
  • Conclusion Winning the hackathon was a good validation of my design process. Taking an extremely time sensitive project through all the steps in the process was challenging but definitely rewarding at the end.
  • Learnings & Footnotes: Its important to properly assess a side project and fully understand the amount of work it takes, from ideation to actual conception. We had difficulties allocating enough time for the project with all our prior engagements.

    Thanks to Hari Ananth, Lauren Willey and Justin Megahan for all their help.
“A relic of a bygone time.”, “The uncoolest show on TV.” “Inexplicably never-ending, like a Cher farewell tour.” — 
  • About the project: The No. 1 “family co-viewing” show on any broadcast network, America's Funniest Home Videos wanted to overhaul their existing Android application, increase engagement and drive more uploads.
  • My Role: As the lead product designer in the project, I worked with the Tigerspike team to strip down the app to its core functionalities and advocate for a better experience that will be enhanced incremintelly as the legacy systems at the back-end ramp up to a better standard.
  • About the project: I was the 7th employee at Moovweb for about 2.5 years. Being part of a rapidly growing startup that scaled to 120 employees and closed two successful rounds of investment was a humbling experience.
  • My Role: I wore many hats at Moovweb. Started off as a Mobile Web Developer but promoted to Lead Mobile Developer a year later. Soon after I was the Interactive Designer with the brand and marketing team which led me to the Creative Director role to take ownership of the brand.

Web & Mobile Design Different projects from across the board

Harlem Shake Bookmarklet When Harlem Shake was a thing, a co-worker and I built the bookmarklet as a Valentine gift for Moovweb's blog. It went viral and drove about 26k of traffic on the same day with additional 16k on the following day. It was featured on Techcrunch, The Hufftington Post, Hacker News, Reddit and others.

  • Learnings & Footnotes: At Moovweb I became a multi-disciplinary designer with production level coding experience and knowledge. I gained a tremendous amount of insights on how design can influences different parts of a business. And how important of a role design plays in the company's overall culture.

    Thankful for all the great people I worked with and credits to my team for making all of this possible: Moly Yim, Sarah Rudder, Bruce Sullivan and Melanie Pavao.