DSCVR Support Portal

March - July 2019 (Shipped)

Responsive web design, UI/UX, Project Management

 

A portal that educates users and incites curiosity into new features and tools

DSCVR Support website is the information hub for all users of the DSCVR platform. Whether the user is new to the platform and needs a hand learning the basics or a power user looking for features that will optimize their workflow, the DSCVR Support Portal will be the place to find that information.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of 1010data.

“My anecdotes will be in quotes and blue“


Tools

  • Figma

  • Atlassian JIRA

  • Atlassian Confluence

  • Bootstrap

  • Lucid Charts

Skills

  • UI/UX Design

  • Project management

  • User research

  • Communications

Team

  • Som Liengtiraphan (Design & Project Management)

  • 1010data Customer Experience Team

  • 1010data Learning Team

Above: This the homepage for the DSCVR Support portal. Not only does it let user easily access educational and problem-solving material, but it encourages the users to explore the product on their own terms.

 

Above: The project overview page contained the problem statement, scope, timeline, and milestones and deadlines we had to hit each week to ensure that the project was a success.

 

Impact and Contributions

 

I was the lead designer and project manager for DSCVR Support Portal

To accommodate the tight deadline, I started my design process by planning out all the steps the project must take before completion, including all the meetings and approval-bys. My process and the timeline for the project were shared with everyone on the team via Atlassian Confluence so anyone could reference it at any time.

“Side note: After a few weeks on the project, our team affectionately named the project ‘Supportle’. We even made a mascot based on Squirtle from Pokemon. ”

Design Process

Problem space

 

How might we create a portal that encourages the user to educate themselves within 4 months?

1010data Customer Experience team still received a large volume of tickets each week from customers who were unable to find what they wanted. The team wanted a new support portal that was more navigable, self-servicing, and readable that would encourage the users to solve issues on their own. This project was also a large group of stakeholders: DSCVR product team, design team, education team, customer experience team, and the subject matter experts.

My challenges included:

  1. Deliver a finished and functional Support Portal to the team before the release date.

  2. Plan, design, manage, and assurance the quality of the finished product through each stage of the product cycle.

  3. Communicate clearly to every stakeholder and make sure to gather each of their inputs through all stages of the product before release.

“Through this project, I also learned how to communicate and delegate tasks to people more senior than I was. It was definitely an interesting thing to do the first time round”

Users

 

User group 1: New users

These are new users to 1010data that have never used any product from the company before. This new target group is more self-service users who want to solve problems and learn about features on their own. They will need to most onboarding materials and direct contact with the customer success team so that they can have their questions answered quickly.

User group 2: Returning and power users

These are users who have used 1010data products before and/or power users of DSCVR. They are not looking for basic training videos, but instead are looking for tips and features that will optimize their workflows.

Above: Pictures of the Support Portal for the 1010data core product that the team wanted to move away from.

 

Research

 

Methodology and Summary

As the timeline was restricted, the research period for this website was condensed into a few days of interviews with customer success team members, instructional designers, content creators of the education department. I also look at a log of all the recently submitted issues about the core support portal that we used to benchmark points of improvement for the DSCVR support portal.

“If I were to redo this project, I would have liked more time to understand the 2 user groups. It would have made for a most customized support portal that could better serve them.“

 
 

Information Architecture

 

Information Architecture is the heart of all my designs

Following the research stage, I collated all the data to create a prioritized feature list for the 1st version of the support portal. I created sitemaps that would be used to guide what actions and information will be given on each page. These were then used throughout the rest of the project as references.

“These sitemaps were created using Lucid Charts. Figma now has a sitemap creation plugin that I highly recommend.”

Above: Example of a low-fidelity prototype that I created. For all pages, I made multiple designs with different themes so that we should have options of what template style we wanted to choose.

 

Low-Fidelity Prototypes

 

From paper to blobs on Figma to determine the interface style

Once the site maps were approved by the stakeholders, I sketched out many different template designs on paper. These were then reduced down to 5 different template designs and translated into black and white Figma frames for easier presentation. It was then presented to the stakeholders with a recommendation from me.

“I still prefer to start my designs using pencil and paper. References for these designs were taken from other platforms with large education hubs with a focus on self-service.“

Above: Example of a mid-fidelity prototype that I created. With the template style chosen, we explored visual styles.

 

Mid-fidelity designs

 

Exploring visual styles

The template that had recommended was selected. In the mid-fidelity stage, I explored what the visuals of the page would look like. I wanted the page to look informative and friendly with clear call-to-action buttons. I created 5 different versions of the template using different colors and images. All components I used were outlined in the product brand guidelines. These were again presented to the larger stakeholder group with a recommendation from me.

“1010data’s core color is orange; however, DSCVR’s branding is blue focused. I used the 1010data orange in most of my call-to-action buttons as it’s a nice contrast and also a callback to the parent company. “

 
 

Final Design

 

Adding details and cleaning up the final product

The final design chosen was the one I had recommended with slight modifications on some pages. The design was then cleaned up and made ready for documentation.

“The final designs also included error states, transition states, outage announcements, etc.

Above: Screenshots of my documentation process. I separated the pages into master, master with measurements, and individual pages that contained the animation, typography, and etc. notes.

 

Documentation and Quality Assurance

 

As we were outsourcing the development of this support portal, it was important to clearly document all things on the design. I took extra care to make sure that all measurements, color, typography, animation, and transitions were fully documented before handing the design to engineers.

In all steps of the development, I remained in close contact with the developers and reviewed each new iteration of the website carefully for bugs or oversight.

“Though it’s not the most glamorous, documentation is one of my favorite parts of the design process. It’s almost cathartic to be able to document very decision you have made, like tying the final bow on a project. “

Final thoughts and lessons learned

 

The DSCVR support portal was released 2 weeks prior to the release date of DSCVR. It was very satisfactory to see something go from a piece of paper all the way to a live website, that feeling never gets old. It only felt different this time as I had a lot more responsibility for the whole project.

We had a few setbacks in the development stage. There was a confusion in some of the documentation that I made that caused things to be developed wrong. Once I corrected it, it was resolved fairly quickly.

Overall, I learned a lot from this project. This experience taught me product/project management skills that I did not have prior. Creating the timeline was the most useful tool for everyone as it kept the entire team accountable and informed of where the project was. I plan on using it again in the future.

Previous
Previous

DSCVR Platform

Next
Next

LocalAlike