Janet Lau's Portfolio

Download Janet Lau's Portfolio

Post on 01-Nov-2014

65 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

Janet's portfolio

TRANSCRIPT

  • 1. DESIGN PORTFOLIO Janet Lau
  • 2. I am a knowledgeable and insightful user experience designer, who enjoys designing products that are technically viable whilst fulfilling the user and business needs. My achievements include: The first person to receive the Citrix Design Hero award for excellence in practising and advocating user-centred design methodologies Led the interaction design of both new and evolving Citrix products across web, mobile and desktop under challenging timescales Delivered intuitive designs by collaborating with key stakeholders including User Researchers, Content Strategists, Product Managers and Engineers Collaborate with Stakeholders BRIEF INTRODUCTION Deliver End-to-End Design Solutions Me Lead Interaction Designs Influence Product Strategy
  • 3. Analyse business and user needs Understand technical requirements and limitations Gain inspirations from competitors and role models Identify use cases Focus on the 80% case first Create user flows and wireframes Build storyboards and prototypes Include stakeholders from the outset Communicate design rationale and foster discussions Ensure mutual understanding Gather Data Solve User Problems Validate Early DESIGN APPROACH
  • 4. Designing for BYOD users Introduced a new self-service IT model which benefits both the users and the organisations. Examples of personas, user journey, wireframes and mobile design. Designing for IT administrators Designed a tool to create and manage enterprise app stores. Examples of card sorting, heat mapping, heuristic evaluations and UI documentation. Solving a real life problem Applied design thinking to uncover the needs of recent graduates in the workplace. Examples of empathy map, needs statement, paper prototype and user testing. RECENT PROJECTS I III Designing for doctors and nurses Provided secure access to enterprise apps on any device. II IV Examples of user flows, wireframes, storyboards and mobile design.
  • 5. I : DESIGNING FOR BYOD USERS Motivation With the rising popularity of bring-your-own-device (BYOD), users demand to run enterprise apps but without IT taking control of their device. Actions Partnered with the CTO and the product manager to develop a new self-service concept Mapped out the anticipated user journey and brainstormed ideas along the way Engaged users and iteratively refined the user experience. Results Introduced a new self-service IT model which benefits both the users and the organisations. Users have the freedom to run enterprise apps on their own devices without contacting IT. Increased employee satisfaction and productivity as well as a reduction in IT support calls.
  • 6. Personas: Captured the characteristics of BYOD workers with a particular focus on Gen Y and executives. User Journey: Developed through brainstorming meetings with CTO and Product Manager I : DESIGNING FOR BYOD USERS
  • 7. Wireframes: depicted the key screens and states. The Home screen shows the users subscribed enterprise apps. Special attention was paid for handling the first use scenario because the user doesnt have any subscribed apps at this stage. User Testing: the wireframes were tested with users. First time use Home screen another design First time use Home screen an early design Home screen after user has subscribed to some enterprise apps I : DESIGNING FOR BYOD USERS
  • 8. Wireframes: The Store screen show the list of apps user can subscribe to. Special attention was paid for the transition between the Home and Store screen. Animations considered included sliding, flipping, paper curling. User Testing: the wireframes were tested with users. Store screen an early design Store screen another design Store screen showing the search results I : DESIGNING FOR BYOD USERS
  • 9. Home screen initial state final design A large inviting visual to indicate where the app catalogue is. Home screen with some subscribed app final design I : DESIGNING FOR BYOD USERS
  • 10. App catalogue Changed from a dedicated page to a pullout menu. The new design provides better context Search Embedded in the pullout menu I : DESIGNING FOR BYOD USERS
  • 11. II : DESIGNING FOR DOCTORS + The Brief Doctors and nurses from a top U.S. hospital needed a secure way to access patient records on their iPads. Actions Citrix partnered with RSA for a secure solution I was the design lead, not just on Citrix but also on the RSA interactions Created an end-to-end design that worked on iPad but also future proof for iPhone and other platforms Results Created a solution that is secure yet doesnt compromise on usability Product shipped with all the design recommendations Doctors and nurses dont need to worry about exposing sensitive patient data The user experience design became the foundation for other platforms
  • 12. II : DESIGNING FOR DOCTORS User flows: depicted the main steps involved in each user scenario. Also a critical tool to see how the new interaction fits into the overall product. Wireframes: depicted the key elements in the main steps of each user scenario. Also used to illustrate how the screen should be presented in different states.
  • 13. Storyboard: brought the user scenarios to life. A vital tool to validate design and gather feedback from stakeholders. As the team was located in multiple countries, we relied heavily on virtual meetings. Having something we could all see and follow during meetings meant we had productive design reviews. The storyboards were also used for presenting the end-to-end solution to our client, the U.S. hospital. New user on a new device 1. User taps on the Worx Home icon and opens Worx Home for the first time 2. User enters an UPN, server or email. 4. WH prompts for location service. This covers both the RBA and published apps. 3. WorxHome prompts for user credentials to sign on to NetScaler Gateway. II : DESIGNING FOR DOCTORS
  • 14. The Brief Citrix Web Interface though hugely successful was aging. The team was tasked to build a new product, Citrix StoreFront, using the latest technology. Customers are always reluctant to change, the new product needed to be compelling, going above and beyond what the old product offered. Actions Led the design since v1 Instead of re-implementing every feature of the old product, looked at what users really want Introduced unique selling points such as simplified first use experience and seamless transition from PoC to production Results StoreFront has shipped, now in v2.5 Customers such as Credit Suisse has migrated to it Endorsements from Citrix Technology Partner Start using StoreFront to find out how it works or fit into your environment. StoreFront is the way to go with new upcoming Citrix products or components. - Thomas Koetzing III : DESIGNING FOR IT ADMIN
  • 15. Cart sorting: Conducted before v1. Created cards based on the behaviour of the old product. Useful to review the terminology and helped participants to draw out pain points from the old product. Heat mapping: Conducted after the product has become more established. Part of a cross product exercise to ensure the overall Citrix experience was coherent. The map shows a high level view of the user experience. III : DESIGNING FOR IT ADMIN
  • 16. Heuristic evaluations: Conducted on pre-release builds to ensure the product as a whole worked as intended. I walked through the product with the key engineers, from installation, setup, error handling to accessibility and terminology. On average around 90% of the bugs raised at this stage were addressed before the product was shipped. UI documentation: Used to ensure knowledge is shared not just to the engineers who implement the product but also Test, Localisation, Globalisation and Support. It included the user flows, screens, conditions and error messages. This was also a tool for content strategist to document the final wording. III : DESIGNING FOR IT ADMIN
  • 17. IV : NEW STARTER PROGRAM The Brief Graduates are making the switch from students to young professionals. How do the new starters find the transition? How can you help? Actions Applied design thinking methodology to solve this real life problem Interviewed a new starter and uncovered her needs Brainstormed over 50 ideas Produced and tested 2 prototypes Results The new starter didnt