During the spring of 2016, I interned at Veracode as an User Experience Designer. I worked in the User Experience team which consists of designers/researchers and technical writers. 

I worked on a couple different projects while I was there. Unfortunately I can't share some of the final designs of my work just yet due to the NDA, but I'll focus on the process and what I've learned along the way. 

The challenge

Streamline licensing information presented on the Veracode eLearning admin page for a better user experience. 

The refreshed UI

Click on the image below to enlarge it for better view of the updated UI. 

What changed:

• Added a question mark icon next to tab title "Subscription Details" to signify informational support

• Added a pop-up window to provide detailed explanation of terms used on the admin page

• Applied indentation in column headings to show superior-subordinate relationships among data

Design Process

This was my first design project during the internship and I was new to the company and the team. The design process shown here reflects how I navigate design within an organization and how I apply my knowledge and skills as a user expereince designer. Below are the steps I took in order to internalize user needs, meet product development expectations and goals, as well as to create an intuitive and delightful user expereince. 

Establish a problem statement

I first met with the product manager, developers, and the UX director to understand the design challenge and establish the acceptance criteria for the final design solution, and to set a timeline for this project. 

Then I sat with the developer and a UX designer who has previous experience in working with eLearning product to define a clear problem statement. I found that having a clear problem statement can help me better understand who are the users, what are the user needs and pain points, and what is the context. 

The problem statement was defined as following:

"As a [...], I want to be able to manage my organization's eLearning licenses. In order to do so, I need to understand the current status of the licenses that I manage."

Iterative design

After defining a problem statement, I started to explore solutions.

I first conducted research to understand what are the best practices for representing information in a table format. 

Then I used Excel for initial design solution exploration because it has the similar table view and a grid style and it's easy to change/update. 

Later on in the process, I used Snagit (TechSmith) and Chrome HTML Inspect function to create high-fi prototype. 

During the iterative design process, I frequently showed my design solutions and prototypes to fellow designers during design review to gather feedback and make improvements. 

I also set up a meeting with the stakeholders to walkthrough the design solution that I was proposing and gather their feedback and understand their concerns. 

Usability testing & update

In other to validate the design solution that I proposed, I worked with the UX director to conduct 2 rounds of usability testing to gather feedback from 6 internal users. We asked the product manager for help when recruiting internal users because she has the best knowledge as to who are the target audience (frequent users) of this page. 

Prototype was updated after the first 3 participants. Both positive findings and usability issues were identified after each round of the testing. Feedback were incorporated into the final design. 

Finalized design & proper hand-off

I added annotations to specify design requirements and created final mockups for the developer to ensure clear communication when handing off the design.