RBC

UX DESIGN / UI DESIGN

How can we make common employee requests more accessible and interactive, while maintaining information security?

Overview

While on a UX Design contract with Infusion (now Avanade), I assisted the team by designing an interactive digital experience for corporate employees at RBC. The "Virtual Concierge" is a 24" touchscreen kiosk, located within RBC corporate buildings, that offers employees the following services:

Book a workstation
Call a taxi
Call the concierge
Look up catering options for your event
Order a new access card
Order office supplies
Send an email to RBC employees
Send an email to Facility Services (maintenance requests)
View The PATH map

My involvement in the project was to:

Edit/complete the user stories,
Create wireframes of the user flows for the multitude of features of this product,
Present wireframes to the client in weekly meetings and gather their feedback,
Adjust the information architecture as needed, and
Coordinate with the visual designer on any graphic requirement changes based on client feedback.

Discovery

I came into this project in phase two. Unfortunately there were no documented UI or UX notes or resources for me to reference. However, phase one had produced a prototype of the product - a kiosk was installed at one of the RBC office locations. I was able to visit and interact with the device on multiple occasions. I had access to the back-end admin system and could see the information architecture of it (which I later documented). As well, the design team had created some lo-fidelity mockups of different front-end sections of the application, so I was able to draw on those for additional user flow information. And finally, a detailed list of user stories was available.

After being briefed on the project, I reviewed all the resources available from the previous phase to fully understand what the current state of the product was and where we needed to go next. I leveraged both technical and creative resources to gain as much insight as I could. My goals became clear:

My overall goal would be to create a smooth UI experience for users. This meant keeping in mind their mental model for touchscreen experiences, and creating flows that would not contradict their expectations for a touchscreen interface.
I would need to focus on flushing out the user stories so we could make sure we cover all possible scenarios to minimize the risk of users being confused, or not being able to complete a task.
I would need to wireframe the user flows and get feedback from both the Avanade team and the client, to make sure we all understood and agreed on the decisions around how these features will work.
And finally, I would have an opportunity to use my background in visual design to help coordinate with the design team about changes the client requested, and make suggestions on how to implement them.

User Stories

We had multiple types of users for this product, each with different levels of permissions. Making sure our user stories were well thought-out before spending time wireframing the flows in Axure, was a key component to the success of this project.

Administrators
Example: As an admin, I want the ability to specify a set of different background videos or images on the kiosk so that I can better tailor the experience to the location of the kiosk (e.g. Calgary vs. Toronto)
Content Authors
Example: As an author, I want to enter details for an event through the admin portal so that I can add events for a specific kiosk, a group of kiosks, or globally.
Stakeholders
Example: As a stakeholder, I want to be able to export user feedback as a report so that I can review and organize feedback in Excel.
Front-end Users
Example: As a user, I want the system to populate the email address when I swipe my access card so that I can save time while composing emails.

I collaborated with the Senior Architect to flush out the users stories. We would sketch the flow of a story on a whiteboard and discuss it out loud. We were able to edit existing stories to be more precise - sometimes dividing one story into two, and also adding new ones.

This step played a big time-saving role in creating the UI because we were thinking ahead to possible situations that our variety of users may encounter and talking those scenarios through before doing the actual work of a hi-fidelity wireframed flow. This step also resulted in a more thought-out experience for the users.

As a user, I want email addresses displayed on screen to be treated as hyperlinks so that I can compose an email directly at the kiosk instead of returning to my desk.

As a user, I want the system to allow me to use my access card (RFID) to identify myself during SSO requests so that I don't have to enter my login information each time I use the kiosk.

As a content author, I want the ability to embed buttons or text links inside my content so that I can provide more interactive/actionable content.

Wireframing

Now that I had a clear vision of what the flow of many screens needed to be, I was able to create the wireframes for them using Axure. I presented the wireframes in weekly meetings with our client. I would go over a specific section of the interface at a time, as to not overwhelm them with information, and also to ensure that "A" was on the right path before proceeding to "B".

This process worked out really well for all of us. I received a lot of positive feedback during these meetings, which made me confident we were heading in the right direction. We were able to discuss any issues or concerns in a timely manner, and I would note any changes or considerations that were needed for the next meeting. This method allowed us to quickly iterate through to the final approval of 48 flows for both the front, and back-end of the product.

After each meeting, I would share my notes with the visual designer in case he had any feedback to contribute. Since the next part of this would involve his efforts, I wanted to make sure we weren't missing any vital considerations.

Administrator

As an admin, I want the ability to specify a set of different background videos or images on the kiosk so that I can better tailor the experience to the location of the kiosk (e.g. Calgary vs. Toronto)

Content Author

As a content author, I want to enter details for an event through the admin portal so that I can add events for a specific kiosk, a group of kiosks, or globally.

Stakeholder

As a stakeholder, I want to be able to export user feedback as a report so that I can review and organize feedback in Excel.

Front-end User

As a user, I want the system to populate the email address when I swipe my access card so that I can save time while composing emails.

Visual Design

After all the rounds of feedback and iterating on the wireframes, I was able to communicate all the final changes to the visual designer. We had productive conversations about how the front-end of the application needed to function, and together we worked out the final graphics with very little iterating.

Next Steps

After delivering my portion of this project on time, and on budget, the Avenade team has moved on to development, and will then carry out its quality assurance testing on the product. Upon completion, the "Virtual Concierge" touchscreen experience will be implemented in corporate RBC locations across Canada.

Testimonial

"Cindy does exactly what good UX needs; she puts the user first and caters to delivering the best possible experience. Ultra-flexible and easy going, Cindy delivers great work on time and on budget. I look forward to working with her again!"

-----
Bryan Cook
Application Architect @ Avanade

Case Studies

Leave The Pack Behind

Thinkable

Gather