Overview

During Summer 2018, I worked as a UX design intern at Elavon Inc. 

I led the redesign of the developer portal website from scratch to persona, user journey, wireframe and hi-fidelity prototype. 

Design System

Clarity

Agile Team

2 Product Managers

Developers

2 Designers

Duration

3 Months

Background​

Elavon helps businesses owners accept all payment types

Elavon Inc is a processor of credit card transactions and a subsidiary of U.S. Bancorp. Elavon offers merchant processing in more than 30 countries and supports the payment needs of more than 1,000,000 merchant locations across the globe. Elavon is the 4th largest U.S. credit card processor and is a top 6 acquirer in the European marketplace.

Problem Space

However, Elavon developer portal has a low customer conversion rate

Elavon developer portal enables business owners and their engineers to integrate Elavon’s payment API into their own services. The payment API is very powerful to support secured transactions. However, the payment API document website was unstructured. It was hard for customers and their engineers to find key information. The website needs a lot of improvement to provide a better business value and experience.

Pain Point 01

Landing page fails to support business goal

Landing page fails to support business goal

The original version of landing page was launched. However, the landing page has a low conversion rate as the design was out-dated and there was no clear call to action button to encourage customers to try our products. Customers are confused with the integration process and didn't know which is the most suitable product for their business. 

Original Version

Redesign Outcome

Strengthen brand awareness and value proposition

Pain Point 02

API document pages were unstructured for engineers to use

For the documentation page, the side navigation was not structured clearly for engineers to use. Many engineers complained that they couldn't find the key information they care about. Therefore, the product had a low retention rate.

Original Version

Redesign Solution

Use design system to create standardized design 

User Research

Understanding target users

User Research is an important part of any design process and plays a major role in governing design decisions. It helps me to understand their needs, behavior and how they go about performing tasks and achieving goals.

User journey

Creating customer journey map

Based on findings from user research and discussion with the whole product team, I created a journey map to understand what people would do and how they felt in a typical integretion process. 

Competitive Analysis

Finding the North Star

Developer portal is a common page for almost every technical product, so in order to learn how other products approach their goal, I did a competitive analysis and mapped the pages to a 2x2 matrix. After discussing with the team, we found out our current state and goal state. 

Design System

Using design system to create standardized design 

Before this project, there was no design guideline and consistent pattern across Elavon developer portal which is causing chaos in the product and duplicated works among teams. Design system aims to bring consistent experience to users while increasing work efficiency drastically. In this project, I used an existing design system Clarity to standardize the redesign solution 

Design Details

Layout guideline: baseline of 24px

Vertical rhythm is the repetition of spatial relationships in a design. A consistent rhythm gives elements a uniform and balanced placement in a design. The more consistent the design, the easier it is for users to read and understand. The Clarity Baseline is 24px

Design Details

Typography guideline: Consistency of Content

Design Details

Design Components: Follow guideline to improve details

Design Outcome

Clear navigation to understand integration process

API reference table

Redesign the table style to present static data in a tabular format. Help engineers find the API reference efficiently

Alert messages

Alerts are banners that communicate a message with a severity attached to it. Redesign the alert message to grab user's attention.

Test page

Redesign the test page information hierarchy to help engineers understand the test process after integration.

Redesign the test page information hierarchy to help engineers understand the test process after integration.

Internship Takeaways

Participate in daily Agile/Scrum meeting

During my internship, I fully practiced lean UX and Agile development. I took part in daily standup with fellow designers, developers, and the PM. I also presented my design output on the sprint retrospect meeting in front of the whole team. It was in those meetings that learned how to communicate with PM and developers and how to design with limitation. 

Understand how real industry work

For the real industry project, I took consideration of both business value and user experience. I learned a lot from my mentor Frank how to make a balance between user experience and business and got some tactical tasks and strategic work. Furthermore, I quickly learned how to use Mixpanel and usertesting.com to analyze large-scale user behavior and analyze what could bring value to our new design.

Communication is the key

As an outgoing person, I enjoy communicating with people and get inspired. There are a lot of opportunities in my internship to meet different people and see from a different angle. I am afraid of asking for feedback, working with developers to implement something or sharing internship achievements. 

Review

Recommendation from VP of design at Elavon

We were grateful to have Danrui as our UX teammate over the summer of 2018. Danrui came to us with a solid HCI/HCD design and process foundation. We worked with her to define and design an intern curriculum that would build on her academic foundation and extend/cast it into a larger Agile software team with an existing user base. As a result, she came to learn and experience cross-functional Agile SDLC tools, ceremonies, cadence, teaming, and customer focused prioritization models.

 

She worked on extending and re-platforming our Elavon Developer portal. She extended our user persona definitions, IxD, wire-framing, and usability validation. Chief amongst her abilities was to recognize where we had left off and did an exceptional job of picking up and moving the UX forward vs. re-baselining and duplicating work.

 

As a result, I can confidently recommend Danrui for any industrial and/or software product build and design team. She was an active listener, detailed oriented, and had a strong work ethic. She did the work and at a level of quality her competition is lacking.

Frank Stanton

VP, User Experience at Elavon, Inc 

    ©  2018 Danrui Sun. All RIGHTS RESERVED.