Project:
MyHub Feedback

My Role:
Product Designer

Duration:
4 month

Project status:
Shipped in April 2024

Overview

MyHub Feedback is a native application specifically designed for Microsoft employees, offering a comprehensive suite of features to enhance workplace convenience and efficiency. Through the app, employees can easily book shuttle services, order meals, reserve meeting rooms, location map, and report issues using the Feedback feature. The primary goal of MyHub is to simplify everyday tasks, making it easier for Microsoft employees to navigate their work environment and stay productive.

Project goals

1. Improve the existing user flow to enhance overall user experience.
2. Make the interface more intuitive, minimizing the learning curve for users.
3. Ensure design consistency by aligning it with the Fluent 2 (Microsoft Library) design system.

‍

‍

Collect requirements | analyze the current design

Due to the limited resources, I took the initiative to reach out to previous team members. One of them suggested I download the MyHub test version, so I coordinated with IT to gain access and download the app. I then documented the entire app by taking screenshots and creating an existing prototype to identify all the UX/UI/copy issues.Through this process, I compiled a list of the main UX/UI/Copy issues I encountered, highlighting key areas that require attention and enhancement. Below is my analysis, which includes my suggestions for addressing the UX, UI, and other issues identified in this flow.

Meetings to discuss/conceptualize ideas

Analyzing UI/UX issues has enabled me to develop better suggestions. I've prepared the above suggestions for discussion in meetings to assess feasibility and plan for next steps. I've also translated all my ideas into wireframes, which were well-received in our meetings. The team showed genuine enthusiasm for my designs and is looking forward to seeing the final version. And below is our design discussion board, where we use Figma comments to communicate ideas.

A/B test

I've gathered a lots of good ideas about the design, so I've translated them into two slightly different designs to gauge preferences. To further enhance our designs, I employ A/B testing for additional adjustments and final updates. Below, you'll find our design questions and the A/B Test slide deck.

Option A

Option A represents most of my ideas, drawn from the feedback and insights I've gathered from the team.
‍

  1. Tab Navigation: Provide two tabs, "Suggestion" and "Compliment," allowing users to switch seamlessly between the forms.
    ‍
  2. Anonymous Option: Include a "Stay anonymous" toggle, enabling users to hide their names if desired, prioritizing their privacy when needed.
    ‍
  3. Action Buttons: Place "Submit" and "Cancel" buttons at the bottom of the screen for easy access.
    ‍
  4. Category Selection: Introduce a dedicated category selection page that users must complete before moving forward to the form.
    ‍
  5. Post-Submission Edit: After submitting the form, allow users to edit their submission by hovering over an "Edit" option.
    ‍
  6. Rating Feature: Add a star rating system to capture user feedback, allowing the back-end to track and record ratings.

Option B

Option B incorporates the suggestions from the Dev team and PM. I've blended both approaches to create a version we can test and evaluate.
‍

  1. Radio Button Selection: Use a single form with radio buttons for "Suggestion" and "Compliment," prompting users to choose one.
    ‍
  2. Anonymous Option Placement: De-emphasize the "Stay anonymous" option by placing it below the contact section.
    ‍
  3. Submit Button Placement: Integrate the "Submit" call-to-action (CTA) into the header design for a cleaner layout.
    ‍
  4. Combined Category and Form Page: Merge the category selection and form into a single page to streamline the process.
    ‍
  5. No Edit Feature: Remove the "Edit" option after form submission.
    ‍
  6. No Rating System: Exclude the star rating feature from the design.



Before and after designs

To showcase the differences and improvements in this project, I'm presenting the before and after designs here. For a detailed view of the entire process and designs, please refer to the full process deck.





Mockups and handoff

Displaying a mockup and handing off all design specs is crucial in design. It ensures that everyone involved has a clear understanding of the final product and its specifications. Below, I've included images of my final mockup along with detailed design specs. This comprehensive handoff will facilitate smooth implementation and alignment with our project goals.

Feedback and Recognition

Feedback on my work has been great. I thoroughly enjoyed collaborating with the Microsoft team and contributing to the project. I'm delighted that my proposal ideas and final designs have been well-received. Particularly gratifying was hearing from my Wipro manager that Microsoft has hired 9 additional people from our company because Microsoft team were impressed with my work and work attitude.

©2024 Designed by Qianzhi Gao