8 UX Projects


Published on

iiD does UX design as a key part of our strategy phase of website and app
design and development projects. In this deck, we’re presenting eight UX design projects as samples of our thinking and creative process.

Published in: Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

8 UX Projects

  1. 1. 8 UX Projects
  2. 2. What is UX?User experience (UX) design is a broad term used to explain all aspects ofa person’s experience with a digital system, including the interface,graphics and physical interaction. It also refers to the application of user-centered design practices to generate cohesive, predictive and desirabledesigns based on holistic consideration of users’ experience. To iiD, UXalso includes information architecture (IA), the art and science ofstructuring and organizing the information in products and services,supporting usability and findability.iiD does UX design as a key part of our strategy phase of website and appdesign and development projects. In this deck, we’re presenting 8 UXprojects as samples of our thinking and creative process… 2
  3. 3. 8 UX Projects1.  Health Catalyst – UX, content and visual design2.  Gallo Wines –UX and build for responsive design3.  ADP My Aline –UX & visual design4.  Visa Offers – UX for desktop and mobile5.  Yammer – Social Profiler UX and visual design6.  Visa goConnect – UX for intranet site7.  Avengers Facebook App – UX and visual design for app8.  yurbuds Go Beyond App – UX and visual design for mobile app 3
  4. 4. Case Study #1:Health Catalyst UX for B2B WebsiteiiD collaboratively developed a website UX, design and build that reflects thestartup’s mission to transform healthcare. 4
  5. 5. Health Catalyst –UX and Visual Design Health Catalyst is a leader in the transforming healthcare data analytics industry. With a quickly emerging market and competitors both large and small, the firm decided it needed a rebrand across all channels. iiD began with a brand platform to establish a clear identity and differentiation. iiD then collaboratively developed a website, collateral and brand story that reflects their mission to transform healthcare. Health Catalyst president Dan Burton explained, “I love the new web site—it is an absolute order of magnitude improvement from where we’ve been! So exciting, so well done, so professional. It’s brilliant.” 5
  6. 6. Health Catalyst – Homepage Wireframe Home Page Created a UX for a dynamic B2B marketing approach that allowed the carousel to feature strong visual promotions while case studies gave the firm credibility. Important to the UX was a clear call-to-action to drive sales leads through scheduling a demo. 6
  7. 7. Health Catalyst – Why Catalyst Wireframe Why Catalyst As a first stop on the global navigation, “Why Catalyst” gave prospects concise but strong messages about why the firm was the right partner. A brand movie, demo banner and case studies were key drivers on the page. 7
  8. 8. Health Catalyst – Company Page Wireframe Company Page An extremely important UX challenge was to define what would be the key components and layout of the company page. Highlighting the leaders of the firm and the history of the company was first on the list. Supporting content on the side bars helped give the page a richer story. 8
  9. 9. Health Catalyst - Website BEFORE AFTER 9
  10. 10. Health Catalyst - Website (BEFORE) BEFORE Prior to working with iiD, the firm had a text-heavy, static website that did not capture the innovative, dynamic nature of the brand nor clearly explain the benefits they deliver to their IT clients in the healthcare networks. The website was also lacking in design, copy and functionality to drive leads and sales. Home Page Value Team 10
  11. 11. Health Catalyst - Website (AFTER) AFTER iiD developed a branded website that better positioned the company and gave the innovative design to match their vision for healthcare. We carefully considered user flow from consideration to conversion (request a demo). Text-based content and brand essence movie built a compelling story around benefits-focused messages. Home Page Why Catalyst Team 11
  12. 12. Case Study #2:Gallo - Responsive Site & Wine TooliiD conceived a UX design and site build to make the world of Gallo wine more accessible to a variety ofwine drinkers and levels of wine know-how. We created an interactive wine tool to navigate wines bycolor, taste, occasion and food type while designing as responsive web design for all devices. 12
  13. 13. Gallo – Wireframes for ToolUser Experience Captured Through Detailed Wireframes• Used the wireframing (UX) process to identify core features of the innovative wine tool• Collaborated with brand team to iteratively produce a UI before moving on to visual design phase 13
  14. 14. Gallo - Responsive Wine Site Desktop Mobile Website and Tool User Experience • We created the UX and developing the brand website for Gallo Family Vineyards • Strategically, we designed special interactive tools to allow users to search for the right wine to suit their lifestyle • The demographic uses mobile heavily so we are developing a responsive layout to allow one site to be accessed on any device. 14
  15. 15. Gallo – Before & AfterBEFORE AFTER (responsive – desktop & mobile) Home Page About Gallo Wine Tool 15
  16. 16. Gallo - HTML5 Interactive Wine ToolThrough the use ofHTML5, we created The mobile view ofan interactive the site allowsexperience for users touch-based swipingof various wine interactivity to giveknow-how to to the website a nativeintuitively choose app feel .the right wine. Desktop Mobile 16
  17. 17. Case Study #3:ADP UX & Design for WebsiteADP asked iiD to design a user experience and visual design to motivate payroll and cash card membersto fully leverage ADP Aline services through a simple and interactive experience. Top priority was totake advantage of ADP’s unique financial data to help people save and plan their finances. 17
  18. 18. ADP My Aline – Website Website and Tools Experience • We created the UX and visual design of ADP member website • The site UI was designed to help members after login make the best use of their payroll statements and cash card activity through interactive graphs and simulators. • The visual design system gave ADP a fresh and friendly human feel to invite members in to the site experience. 18
  19. 19. ADP My Aline – Site Map Site map was created to clearly show the user flow and site structure to inform the navigation of the site 19
  20. 20. ADP My Aline – WireframesUser Experience Captured Through Detailed Wireframes• Used the wireframing (UX) process to identify core features of home page, simulation tools and statements• Identified different UI conventions to be used in the visual design and development 20
  21. 21. ADP My Aline – Home Page Variations iiD delivered 3 look & feel directions as seen in these homepage designs 21
  22. 22. ADP My Aline – Simulation Tools The site used simulation tools to visualize a member’s payroll statements and cash card activity intuitively. 22
  23. 23. Case Study #4:Visa OffersVisa tasked iiD with providing a pre-login and post-login UX designs for their new Visa Offers marketing site.The goal was to make the experience device agnostic by providing both desktop and mobile views. 23
  24. 24. Visa Offers UX for Desktop iiD provided two possible UX directions for the pre- login home page, simple and focused approach with icons and a long scrolling style page for contemporary Facebook-style scrolling. 24
  25. 25. Visa Offers UX for Desktop The post-login page UX was designed to give Visa Offers members a great deal of information on deals and their own offers usage. The map interface was used to drive local offers in a more visual way. 25
  26. 26. Visa Offers UX for MobileThe results of our user experience design work was a fully flushed out navigationand layout system that was smoothly implemented and has proven a great greatsuccess for member conversion across devices. 26 be smart
  27. 27. Case Study #5:Yammer Social Profiler & Lead Gen ToolThe challenge put forward to iiD was how to help Yammer educate company managers on the value of socialmedia engagement to company while generating new leads for the Yammer sales team. 27
  28. 28. Yammer – WireframesSample form wireframe Sample profile results wireframe 28
  29. 29. Yammer – Social Profiler and Lead Gen Tool Yammer is a social network platform built for companies to collaborate internally. The challenge put forward to iiD was how to help Yammer educate company managers on the value of social media engagement to company while generating new leads for the Yammer sales team. iiD’s solution was an engaging interactive survey and advice platform called the Social Media Engagement Profile that helps managers produce a unique “profile” mapped to industry best practice for the level of social media engagement of their company. After completing the survey, a customized report is generated showing areas that company can improve their social media engagement. Users are asked to give contact information which combined with the data collected in the survey is used by Yammer’s sales team to communicate with the new prospect. 29
  30. 30. Yammer – Social Profiler and Lead Gen Tool Visual feedback was given through color bars as usersHTML5 interactive UI modules toggle yes/no switchescreated an experience well creating a fun interactivebeyond a simple form. experience driving users toIllustrated visuals (kite in the end of the form process.cloud) move across thescreen as slider is interactedwith. 30
  31. 31. Case Study #6:Visa Go Connect IntranetThe Visa Marketing Capabilities and Engagement team’s top UX objective forgoConnect was to make the site the central portal for all Visa Marketing. 31
  32. 32. Visa goConnect Intranet The Visa Marketing Capabilities and Engagement team’s top objective for goConnect was to make the site the central portal for all Visa Marketing. •  The destination site on the Visa intranet for all Marketers, new and long-term •  Supportive of the overall objectives around engagement, inspiration, and capability development •  Flexible and scalable to support a growing and changing Marketing organization 32
  33. 33. Visa goConnect – Site Map The Visa Marketing organization required a fairly complex intranet site structure in which to easily house a variety of useful marketing content to be accessed by a global marketers. Color coding and icons were used to help the Visa team easily grasp the depth of the site hierarchy and indicate which pages would need to be added after launch. 33
  34. 34. Visa goConnect – Homepage Wireframe The structure of the homepage needed to be flexible to allow different levels of prioritization of Visa Marketing news from highest importance (“First Feature”) to lowest (“Second Feature”) and “Latest News. The UX design can easily scale up or down depending on the volume of content. 34
  35. 35. Visa goConnect – 2nd Level Wireframe The Second Level page wireframe explained the layout and hierarchy of content for various pages at this level. Variation occurring in the hero area were called out and explained in the side notes. 35
  36. 36. Visa goConnect – Regular Content Wireframe For Regular Content, a full set of UI elements were developed to cover any possible content page variation. These UI elements included subnav, tables, image + paragraph, video module and large image. This scalable approachable proved useful during design phase when the visual designers drew from this wireframe. 36
  37. 37. Case Study #7:Avengers Super Awards Facebook AppThe Visa Marketing Capabilities and Engagement team’s top UX objective forgoConnect was to make the site the central portal for all Visa Marketing. 37
  38. 38. Avengers Super Awards – Welcome Screen Fans first entered the app through the welcome page which explained how the app worked. The app gave users the choice of picking the awards to give their friends OR have the app make recommendations. 38
  39. 39. Avengers Super Awards – Let Us Pick ‘Em The app UX explained how we would use the Facebook API to scrape peoples social graph including which pages they liked which can be anything from other brand pages to musical artists. 39
  40. 40. Avengers Super Awards – You Pick ‘Em In this wireframe, we showed how users could choose from “strengths” of their friends and choose certain people to have the app recommend specific awards such as the “Alpha Driver Award” from Iron Man. 40
  41. 41. Avengers Super Awards – Visual Design Images of actual design and development of the app 41
  42. 42. Case Study #8:GO BEYOND mobile training appThe Go Beyond app was created by iiD from UX to code by considering the motivations ofhighly motivated and social athletes. We developed this app combine competitive exercisewith social sharing behavior. 42
  43. 43. yurbuds GO BEYOND app UX Wireframes and app flow for Go Beyond training app 43
  44. 44. yurbuds GO BEYOND mobile appA super inspiring athletics app that focuses on pushing athletes to go “beyond the wall” by providinginstant gratification of receiving badges for achieving "Walls" (sports challenges) while being able to sharethese moments on the spot through social media. Built for iOS and Android.Walls menu User profile GPS stopwatch Wallers community http://bit.ly/appgobeyond 44
  45. 45. iiD (“ideas in digital”) puts brands in people’s lives by creating meaningful experiences that help people live well, besmart and have fun. We counsel our clients on how to leverage digital channels such as the Web, mobile devices, socialmedia, and other emerging media to engage people, build brand loyalty and build brands for the digital age. Thecompany was founded in 2007 and is located in San Francisco. iiD maps out, designs and develops digital products andservices to delight consumers and achieve clients’ business goals. The agency blends the four key elements of successin digital media: strategy, creative, social design and technology. We are an innovative team of strategists, designersand technologists who are extremely passionate about creating forward-thinking brands for a digital world. want to meet us? ideas in digital, LLC 1620 Montgomery St. #250 San Francisco, CA 94111 ph. 415-738-0738 info@ideasindigital.com www.ideasindigital.com 45
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.