Janet Lau's Portfolio
- 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 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 BRIEFINTRODUCTION 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 DESIGNAPPROACH
- 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. RECENTPROJECTS I II V III Designing for doctors and nurses Provided secure access to enterprise apps on any device. Examples of user flows, wireframes, storyboards and mobile design. Business success using service design Put the user at the heart of everything. Examples of customer journey map, data dashboard and sentiment chart. IV
- 5. I:DESIGNINGFORBYODUSERS 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:DESIGNINGFORBYODUSERS
- 7. Wireframes: depicted the key screens and states. The Home screen shows the user’s subscribed enterprise apps. Special attention was paid for handling the first use scenario because the user doesn’t 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:DESIGNINGFORBYODUSERS
- 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 – another designStore screen – an early design Store screen showing the search results I:DESIGNINGFORBYODUSERS
- 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:DESIGNINGFORBYODUSERS
- 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:DESIGNINGFORBYODUSERS
- 11. II:DESIGNINGFORDOCTORS + 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 doesn’t compromise on usability • Product shipped with all the design recommendations • Doctors and nurses don’t need to worry about exposing sensitive patient data • The user experience design became the foundation for other platforms
- 12. 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. II:DESIGNINGFORDOCTORS
- 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. 1. User taps on the Worx Home icon and opens Worx Home for the first time 2. User enters an UPN, server or email. New user on a new device 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:DESIGNINGFORDOCTORS
- 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 have migrated to it • Endorsements from Citrix Technology Partner “Start using StoreFront to find out how it works or fits into your environment. StoreFront is the way to go with new upcoming Citrix products or components.” - Thomas Koetzing III:DESIGNINGFORITADMIN
- 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:DESIGNINGFORITADMIN
- 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:DESIGNINGFORITADMIN
- 17. The Brief Workshare, a leading provider of enterprise collaboration applications, is committed to improving how they deliver products and services to their users. The mission is to define a world-class customer experience and align the company around a consistent experience. Actions • Involved stakeholders throughout the process to gain buy-ins and engagement • Defined an experience map any person has during their relationship with Workshare • Introduced an expectation model to set goals and create measurable scores Results • The expectation model was applied for the latest flagship product launch marketing campaign. • Brought the focus of the onboarding experience back to the user. • The key measure dashboard and sentiment chart became the new “Voice of the Customer”. IV:SERVICEDESIGN
- 18. Stakeholder engagement: Stimulated discussions around customer improvement and focusing on the users through 1:1 interviews and workshops with the executives and leaders in: Marketing, Sales, Customer Success, Products and Support. IV:SERVICEDESIGN Experience map: Designed from scratch, the 1-page experience map captures the end-to-end customer journey, key measures and user sentiment. To ensure relevance, each phase of the customer journey is owned by a “champion”.
- 19. Data dashboard: Workshare is a data- driven company so a key metrics dashboard is essential to the adoption of the experience map. Built a dashboard to track and communicate the success and failures of the user experience. Sentiment chart: Once again quantitative data is critical to the business. A single survey is designed and used across touch points to gauge the user sentiment. IV:SERVICEDESIGN GETTING TO KNOW YOU FIRST DATE FALLING IN LOVE MARRIED LIFE GROWING THE FAMILY AWARENESS DISCOVERY UNDERSTAND EVALUATE PROPOSAL PURCHASE PLAN DEPLOY ADOPTION ENGAGEMENT ACCOUNT MGMT ISSUE MGMT INCIDENT MGMT UPGRADE CHANGE RENEWAL CROSS SELL UP SELL REFERENCE REFERRAL USER ENGAGEMENT
- 20. 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 didn’t think she had a “problem” but was pleasantly surprised by the insights I uncovered and liked my innovative solutions. • The prototypes were in the concept stage but could easily be evolved. V:NEWSTARTERPROGRAM
- 21. Empathy map: Interviewed the new starter and built up an empathy map of her experience around finding jobs, first day at work etc. The left side of the diagram captures my observation, I inferred what she thought and felt (right side). Needs statement: Uncovered the new starter’s needs based on the empathy map. A summary of the problem I was trying to solve. V:NEWSTARTERPROGRAM
- 22. Paper prototype 1: An app on a mobile device. I drafted the key screens and asked the new starter to try it. Paper prototype 2: An app on a wearable device. I used the pink and yellow post-it notes to distinguish the two different modes. V:NEWSTARTERPROGRAM