Tina Lee | UX Designer
  • Portfolio
  • About Me
  • Resume

Portfolio


     

CST Trust Company proxy voting site redesign


Creative Fields
Responsive design, UX design
Team
Visual designer, front-end devloper
Role
UX designer
Time
July 2013 - August 2013



 

Project Overview

CST (Canadian Stock Transfer) trust company provides an online proxy voting platform to their issuers for running annual shareholders meetings. The users are people who could not attend the annual meetings but want to appoint a proxy to attend the meeting or cast their votes for the poll. To further streamline the proxy voting experience across mobile and desktop devices, our team is engaged to redesign this online proxy voting site.

Experience Goal

The previous version of CST proxy vote platform was not intuitive to use, and the meeting information was not easy to find. The goal for the new design solution is to facilitate the proxy voting experience by providing easier access to the supporting information, such as meeting details, meeting materials, board members’ bios, and financial statements etc. Also, the platform is responsive design across smartphone, tablet and desktop.

Screenshot-old design-appointee

Previous design – appointing a proxyholder page

Screenshot-old design-annual report

Previous design – annual report opt in page

Screenshot-old design-review

Previous design – confirmation page


 

Approach

 

Transformed the business requirements to user flow and page flow diagrams

To better understand general proxy voting process, I conducted research on other proxy voting platforms. In addition, I read through the business requirement documents and met with the project stakeholder and subject matter expert to understand the process.

I created a flowchart and hi-level user flow diagrams to document the user flow to validate the process and clarify the questions with the stakeholders and business analyst at client side before wireframing. This process helped me finalize the user flow and identify several special use cases and their related workflow.

 

Workflow diagram of the online proxy voting platform

User flow of completing a voting task

User flow of completing a voting task

User flow of assigning appointee to the meeting

User flow of assigning appointee to the meeting

User flow of configuring preference settings

User flow of configuring preference settings

 

Sketched out multiple design options

After several iterations of validating the user flow with the client, I proceeded to use low-fidelity wireframes to sketch out the interaction and layout with the consideration of being responsive across different devices.

Wireframes-option 1

Option 1: meeting materials are displayed at the right corner persistently

Wireframes-option 2

Option 2: display meeting materials within an overlay

Wireframes-option 3

Option 3: de-emphasize the recommended votes option

Wireframes-option 4

Option 4: display meeting materials at the right side as a collapsible item

 

Partnered with other UX designer and visual designer to create responsive design experience

After several iterations on desktop design, I worked with another UX designer and a visual designer to create tablet and mobile experience mockups. All the visual design mockups are done by Lucy Mao.
 

Desktop Viewport

New design - landing page

Landing page

Visual-appointee

User can either assign appointee as a proxy to vote for them or proceed to vote page.


New design - vote page

Vote page. User can scroll to see more questions.

New design - view candidate bio

Click on candidate’s name to view their bio


 

Mobile viewport

 

Visual-mobile-landing page

Landing page

Visual-mobile-meeting details

Click on burger menu to view meeting details

Visual-mobile-vote

Vote recommended options and clear all button stick on top while scrolling

Visual-mobile-bio

Candidate bio view is displayed in a whole page takeover

 

Tablet portrait viewport

 

Visual-tablet-meeting details

Burger menu includes meeting details, meeting materials and language option

Visual-tablet-vote

The progress bar and vote recommended options stay still while scrolling

Visual-tablet-review

User can review their votes and change selections on review page

Visual-tablet-confirm

Confirmation page shows next available actions after users submit their votes



 

     

RELATED PROJECTS


CM Cover photo
Cash Management Responsive Web Application Design
Detailed design, Responsive design, UX design  
Multi-channel wealth management platform for financial advisors
Detailed design, Responsive design, UX design  
Profile-driven human resources portal
Detailed design, Mobile application design, UX design  


Made with Love in NYC | Tina Lee
ile
  • Portfolio
  • About Me
  • Resume