Visa Summer Project

Javascript, HTML, CSS, React.js, Yarn, Grails-Maven, Node.js, Sketch

I interned with Visa in the summer of 2017. I worked on a team of interns to develop a tool that introduces new users to the key features of the modules within Business Center, a product that allows users to manage and configure payment processing services.

I was heavily involved in the discovery phase which consisted of research and several brainstorming meetings. During this phase, we decided the direction of the project answering questions like what do we want users to get out of our solution and what does our framework need to be capable of. I conducted research on existing solutions from Google's Material Design and frameworks like Intro.js.

We decided to create our own framework from scratch inspired by Intro.js for ease of configuration and integration with our application, Business Center. I created the following UI prototypes in Sketch.

First, if the user is new to the current module within Business Center and there is a tutorial available, the user will be shown the below prompt. They can skip and never be prompted again or continue onto the tutorial.

prompt image

Tutorials consist of a sequence of cards that briefly annotate all the key features on screen. The user is able to use the previous and next buttons to navigate through the tutorial or click the x button to exit. Tutorials are configured using a JSON object which specifies the content and positioning for each card.

card image

I helped with the development of the cards in React. I also wrote the controller which connected the front-end to the back-end.

During the discovery phase, we came up with several ideas that didn't make it into the final product.

For example, when the user selected 'yes' from the prompt, a tutorial menu would launch. There would be in-depth tutorials for each key feature and each feature with a tutorial would be highlighted in the UI. After the user clicked on a feature, the tutorial would begin, telling them everything there was to know about that specific feature. Upon completion, they would be brought back to the tutorial menu below to select another feature. This idea was discarded due to the user likely wanting a much briefer tutorial experience.

tutorial selection image

We also had an idea for interactive tutorials where we could ask the user to perform an action and evaluate them. Part of this idea made it into the final product, but it was pretty far from being completed.

interactive card image