Company Website


  • Client: CANVAS
  • Role: Design Site IA / UI Style Guide
  • Current Site URI: gocanvas.com - The new logged-in pages launched in July 2017, Logged-out site will launch in 2018

Goal

The top strategic goals for Canvas in 2017 are to focus on improving the rate of converting “paid for signups” from our mobile website; stay in line with industry’s best practices and continue to delight our users by moving in a mobile-first direction. Also, set up a new company brand and update the look and feel. We want to signify that we are a cutting-edge technology company.

Role

  • Guide the creative direction by working with designers to redesign the company branding.
  • Create page template by adding more functional navigation, implementing user interface best practices.
  • Work with cross-national team and ensure to deliver the consistent design experience by setting up the style guide; component library and delivering wireframes, mockups, prototypes.
  • Monitored and map out the user testing to improve/ensure the user experience before the AB testing.
  • Scope limitation
  • Preliminary design changes
  • Prototyping of desktop site only
  • Mobile responsiveness taken into consideration, but not a main focus
  • I tried to convince teams that we should take the mobile first design strategy to achieve the best user experience but couldn't get approval because of technical feasibility & various risks.

    Old Design

    Project

    New Design

    Project
    Project

    Setting UX rule

    Project

    Re-design Navigation

    Project

    The old design had a second level top, third level left navigation and an additional navigation on the top right corner. One UX researcher and I worked together to cleanup and redesign the navigation structure.

    Enhancing Flow of Canvas features

    Project

    Reference Data is a CSV file that you upload to GoCanvas giving your mobile users access to data needed while completing a submission. This is Canvas’s #1 feature but the editing flow and uploading feature were hidden. I moved the Reference Data button to the first level on the left side so we could enhance the usability as well as promote this feature to first time users.

    Adding Internal user section

    Project

    I visited each department to determine the pain point and improve day to day productivity. Previous internal navigations were all hidden or extremely hard to find. They had to take a couple of days for training on how to visit internal pages. I pulled out all internal pages and added one click button for the Canvas User with a noticeable color difference navigation. Before I finalized the color and prioritized the pages, I ran multiple hallway user testing scenarios on internal users and made sure it was easy to use for them.

    Verbiage change

    Project

    Also, removed the word “My” throughout the site. (My Home, My Account, My Profile, My App...) Most of Canvas users are enterprise companies that could have users and different levels of administrative access and using the word “My” from the main account was very confusing.

    Obstacle

    In the middle of designing the UI library, the development team started to create pages without the template to meet the deadline. Also, half of Canvas’s development team is located outside of the US, creating difficulty communicating and less consistency in processes. In order to overcome this, I set up a regular UI code review meeting and worked with the development team for many weeks. If we had spent more time and planning and ideation, we could have saved a lot of time from fixing UI iterations.

    Impact

    Project

    Enhanced the new onboarding sign up rate by 21% and increased web sign-up by 8%. Also, received many positive reviews from Canvas real users.

    What I Learned

    The Canvas 9 impact shows us how thirsty the users have been for a good user experience. Just giving the company branding a facelift and redesigning the page flow, we were able to increase the sign-up rate by more than 20% without adding any new features and purchasing an expensive marketing ad.

    Also, I’ve learned a lot from this project.

  • We need to spend more time for planning and ideation.
  • Not jumping ahead to the development stage before the design team can set up the style guide.
  • Always take the mobile first approach.
  • Lastly, the most important key was teamwork and more teamwork. This project was understaffed and required the team to work extra hours to finish by the deadline. However, due to the strong effort put forth, the team was able to build a strong bond and trust in each other that carried forward to future projects.

  • What’s Next?

    More than 95% of the testers from the Canvas lab, didn't understand what the Canvas product was until we explained. This clearly shows that new users don't fully understand what the Canvas product is even with a website with 80+ pages. I’m very curious to know what the obstacle is and what future content will have the power to convince users.

    I’m currently working with the analytic team & UX researcher to measure the level of understanding for new visitors. I’m very excited to see the results of our many qualitative & quantitative user-testings and hope to have a better idea of the relative value of pages on GoCanvas.com and possibly clean up the information architecture throughout the site.

    Sample mockups Project
    Project
    Project
    Project
    Project
    Project