MongoDB

Who I Was Product Design Intern,
MongoDB Atlas
What I Did Product Design
UX Research
Illustration
When I Did It May to August 2019

In the summer of 2019, I had the opportunity to work as the product design intern on MongoDB Atlas. Atlas is the fully-managed cloud database product developed by MongoDB, and it helps customers more easily manage their deployments on cloud service providers like AWS and Azure with streamlined UI and UX.

As a team member on the product design team, I was able to develop a variety of different hard and soft skills, as well as get experience in UX processes as I saw a design from end-to-end. The projects I worked on can be separated into three categories:

Image placeholder

I’ll have a section for each of these projects with documentation from start to finish, elaboration on the different skills they helped me develop, and the various processes that helped me reach the final product.

NOTE: Because of company confidentiality, I am unable to publicly show a large part of my work this summer. I have permission to include the rest here with password protection, for recruiting and interviewing purposes only. To get the password, please contact me at sophia_meng@brown.edu. Thank you for your understanding!



X.509 Passwordless Authentication

In this project, the goal was to create designs for a specific and concrete feature based on a set product description and scope that would definitely be pushed to production.

Context

When users are added to projects in MongoDB Atlas, they must be authenticated in some way before they can have database access. Currently, the Atlas experience visibly offers two methods: using an external directory, or storing passwords for each username within Atlas. In the world of security, X.509 certificates can also be used in lieu of passwords—users are authenticated by the contents in a signed certificate, which is legitimized by a certificate authority. Atlas offers this as a third option, but doesn’t expose it in the user experience, which lowers customer confidence in our product. A more detailed visualization of these methods:

Image placeholder

Established Value

Designing and implementing a clearer way for users to utilize X.509 authentication would give MongoDB competitive leverage in the market, make more security resources available to our customers, ultimately raising their confidence level in what we offer.

General Use Cases

The two use cases I had to design for as outlined in the product description can be described as “Easy Mode” and “Advanced Mode”:

Image placeholder

In “Easy Mode,” Atlas would generate the certificates for the customer, and keep track of associations, much like most web applications that utilize usernames and passwords. In “Advanced Mode,” customers would be able to bring their own certificates from a third party and keep track of authorizations themselves.

User Journeys

Although those were the high-level use cases, there were many leaks that had to be plugged on the ground level. For instance, I had to think about the intricacies of cases like:

Image placeholder

To start off the tangible designing process and guide my designs, I started with user flow visualizations. This is my first try at mapping use cases:

Image placeholder

Clearly, I still had a ton of questions about the use cases I listed above. To answer these questions, I had brainstorming sessions and one-on-one conversations with the engineers involved in the project on the Atlas team. By continuously touching base with the developers, I was able to come up with a final version of holistic user flows with answers to every potential use case:

Image placeholder

Notable Constraints

Because I was designing for a concrete feature addition, I had some UX constraints that I had to keep in mind at every step of the process. Specifically, I had to consider:

Visual and experiential congruity with existing user experience and interfaces. Because two authentication methods already exist within the experience, I had to make sure that whatever I designed fit seamlessly with what those experiences look and feel like already.
Helping the user through as much of the experience as possible. I iterated to make sure that the copy was clear and concise, and that there was no superfluous steps within the experience.

Hi-fidelity Prototypes

After getting feedback from engineers, product managers, and fellow designers, I presented the following hi-fidelity prototype at a stakeholder design review meeting, where it got approved and pushed to production. While there are many screens associated with the final deliverable, I've explained some of the crucial edge cases:

Image placeholder

Adding and editing a user, as well as the act of revoking a certificate, in "Easy Mode" is shown in action here.



Atlas Cluster Card Redesign

This project covers the other end of the spectrum—I was given a very abstract goal, and was tasked with collecting information and feedback from multiple sources that would ultimately inform the design solutions I proposed.

Read more about this project here. Please reference the top of this page for more information on access.



MongoDB University Illustrations and Visual Development

Over the summer, I was also able to dip my toes into visual design and illustration, ultimately helping to further visual and brand development as user experiences changed and developed.

Context

MongoDB University is a MongoDB service that provides free and for-purchase courses that help users learn about and get certified in building, running, and deploying applications on MongoDB. While I was an intern, the University was going through an experiential refresh—the UI was being updated, and there were additional experiences being added. Because of my interest in visual and graphic design, I was able to join the team briefly to create illustrations that helped the product pivot visually as well.

Process

By assuming responsibility for these illustrations, I was also assuming responsibility for the visual direction the product would be moving in. Thus, it was important that I understood the needs of the team and the pain points of the current brand, so I could create in a style that was right for the future of the product. After conversations with the University designer and Director of Education at MongoDB, we came up with the following pain points for the current style:

Image placeholder

As I moved forward, I strove to create illustrations that were more adherent to the MongoDB visual brand, but still fun, whimsical, and rooted in the spirit of learning. The University team wanted there to be a bit more visual synchronicity with the professionalism of MongoDB’s other products, but still felt the need to convey lightheartedness and approachability. I took these ideas, and the newly updated MongoDB color palette, and got to work.

Course Tracks

The two major illustrations I did first had to do with the new experiences in University. University was creating new experiences that grouped courses into specific tracks that could help users get certified to use MongoDB as developers, database administrators, and database architects. I created illustrations to convey these tracks:

Image placeholder

These illustrations were then placed into different parts of the redesigned UX:

Image placeholder

Course Catalog

After finishing Course Tracks illustrations, I was poised to work on the Course Catalog thumbnail illustrations as well. These illustrations represented the actual courses themselves, and I created them to sync up the visual style of University as a whole. These are a few examples of the new illustrations on the right, juxtaposed against their old counterparts on the left:

Image placeholder

User Testing

After I finished the illustrations, I handed them off to the University product designer, who integrated them with his experience designs. We then went through several rounds of RITE testing and made iterations both to the experience and to the illustrations based on feedback and user comprehension. By the time I left, this project seemed to be in a good place to move forward and be shipped within the next few quarters!



Insights & Reflections

Image placeholder

Overall, I had a fantastic time working on the MongoDB product design team—this opportunity allowed for immense growth both professionally and personally. I was able to learn firsthand how a design team operates, both internally and in collaboration with engineering, management, and support teams. MongoDB allowed me to grow within product design and learn more about UX processes through actual industry immersion, but also gave me freedom to pursue supplementary topics I am interested in, such as illustration and motion graphics.

Specifically, this experience taught me a lot about:

Collaboration. Through all my projects, I had to work with engineers, and most of the time, other designers as well. Specifically, my work on the cluster card project allowed me to see how well a divide and conquer strategy, when combined with solid communication, can work to create a holistically better user experience.
Balance. I went into this internship with an “anything goes” mentality—I was prepared to take anything and everything that was thrown at me. However, I began to realize that I needed to cultivate a balance between learning and growing with different, unfamiliar projects, and advocating for myself about aspects of design I actively want to do. Through conversations with my mentor and fellow designers, I was able to achieve this: I gained a lot of experience doing heavy research and ideation projects, something I hadn’t done before, but I was also able to dive into graphic-heavy projects as well, something I knew I really enjoyed doing.
Proactivity. Though some projects were predefined for my internship experience, I found that what was assigned to me often wasn’t taking up all my time. I personally sought out other designers and my mentor and ask for more work, sometimes even defining new work for myself based on problems I observed, which helped me have a more fulfilling and well-rounded experience.

All in all, I’m extremely grateful to have been a part of such a wonderful design team within a design-forward company, and I look forward to furthering the hard and soft skills that this internship helped me develop!