Everything You Need to Build a Social Networking App in Adobe XD
by Patrick Faller
posted on 05-23-2018
Whether you need guidance in life or guidance in work, having a mentor can be an invaluable source of help and support when making decisions big and small. But finding and connecting with the right person to help you can be tricky, which is why UX designer, educator, and YouTuber Daniel White has created the MentorMe UI kit for Adobe XD, available to you to download below for free.
MentorMe contains all the UI elements you need to create a powerful social networking app. It’s about a high level of discoverability (since mentors and mentees ultimately want to find each other) and tools and features that keep communication flowing. We’ve asked Daniel to share some of his top tips and design considerations below so you can make the most of MentorMe. “It’d be absolutely fantastic if the UI kit could inspire people to consider a career in design, or as a tool to help people learn and develop their skills,” he said.
This weekend, fire-up Adobe XD, create your own app or website with Daniel’s UI kit following the steps below, and be sure to share it with the XD community too with #MadeWithAdobeXD.
Getting started with the Mentor-Me UI kit in Adobe XD
- Step 1: Download the latest version of XD. You can download Adobe XD here.
- Step 2: Download the MentorMe UI kit. Click here to download MentorMe. Create a social networking app that makes it easy for mentors and mentees to discover and connect with one another. Create and view profiles, schedule appointments and meetings, flow messages and discussions.
- Step 3: Explore the UI kit and everything it offers. MentorMe includes flows for creating profiles, scheduling meetings and appointments, sending and tracking messages, provisioning payments, as well as ratings and notifications. It contains a complete asset panel that specifies colors, fonts, headers, navigational elements, inputs, buttons, and other content items.
- Step 4: Start designing. This UI kit also provides navigational elements, inputs, notification examples, a light and dark icon set, and more. Incorporate these components in your app design, or use the premade artboards as templates that you can edit and customize quickly.
- Step 5: Wire your screens together to create an interactive prototype you can share.
- Step 6: Share on Twitter with #MadeWithAdobeXD.
Daniel’s top tips for designing a social networking app with MentorMe
One of the biggest considerations when designing a social networking app is to craft a user experience that is both intuitive and effortless to use. Of course different apps will be intended for different audiences, but personally I like to test concepts with less technology-oriented users who say things like, “Try searching on the Google,” because if they can use it, anyone can. From a design standpoint, user-generated content can present several challenges for designers, as we need to cater for multiple (and often unknown) variables. For example, if users are able to upload a cover photo, how user-proof is the design of the UI depending on the content or types of images being uploaded?
Designing for authentic interactions and conversation flow
Nowadays, many of us communicate using a device of some description on a daily basis. It’s easy to suggest that society today is more disconnected as a result. On the other hand, technology has enabled worldwide communication from almost every corner of the world. I think that a big challenge many designers face today is how to integrate and maintain that “human element” in a digital (sometimes automated) product. One of the simplest ways to do this in a social networking app is to include profile pictures on the messaging and chat screens – make them always visible as a constant reminder to the user that they are talking to a real person.
Designing for easy discoverability
The main goal of a search function is to connect a user with what it is they’re looking for, whether they initially know it or not. In relation to this UI kit, it was important to me to ensure that, from the search results screen, a user is presented with content personalized to their interests, but also able to access filters in the top-right corner, with each category visually represented with bespoke icon designs.
Designing to instill credibility and trust
Trust can be hard to earn and also easy to lose, and the same is true with user experience design. In my opinion, many platforms try too hard to force a user to take a certain journey, one that is far too eager to get your credit card information, or a mile-long page telling you why this revolutionary product is the best thing since the dawn of time. Don’t even get me started on those one-page sites with a video that has no video controls whatsoever.
These approaches may or may not work, but users do eventually become familiar with these sales techniques as they become more widely adopted, and that can breed suspicion and mistrust. If a user is at all suspicious of what’s an offer, you best believe that that is the last time they will visit that site, or use that app, before they tell the whole world via social media.
About Daniel White
Daniel has worked in the design industry for over 12 years. He started his career as a graphic designer and now specializes in user interface and experience design. “I realized that a lot of sites and apps had a lot of room for improvement,” he said. “After picking apart the things that I didn’t like, I started coming up with my own ideas for improvements related to the design of the user experience.”
Daniel is now also a successful educator and YouTuber. He runs the popular software learning site Forever Dansky, where he’s cultivated his personal brand and helped many aspiring creatives develop their skills. He’s passionate about sharing his experience as a creative professional to teach and inspire generations of designers from all around the world. “This desire for better UX has driven me to gain a greater insight into the minds and behaviors of everyday people who use technology. With design and technology constantly evolving, the ability to empathize with your target audience is going to lead to the creation of better products with better user experiences,” he added. You can follow Daniel on Dribble, Twitter, YouTube, and Instagram.
More free UI kits and resources for Adobe XD
Whether you’re building on a social networking project made with MentorMe or starting something new from scratch, there are many other free UI kits available for Adobe XD, including Oykun Yilmaz’s digital currency UI kit, Nimasha Perera’s E-Comm UI Kit, and Meagan Fisher’s ecommerce UI kit. You can also download these additional free UI kits to build travel, gaming, smartwatch, and dashboard experiences for apps and websites.
If you’re new to the tool, read our guide for everything you need to get started in Adobe XD. You’ll learn how to design and prototype in the app and how to fully utilize the UI kit resources available. Finally, for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.
Products: Photoshop, Creative Cloud