In July 2012, Jade attended the AT&T Hackathon in Hollywood for the unique challenge of working with strangers to build a working app over the weekend. Little did she know, she would go on to co-found SocialTagg, market the event platform to thousands of people digitally and through live events, and garner recognition for her startup as LA’s Hottest Showcasing Startup and TechsyTalk’s Event Tech of the Week.
In this piece, Jade goes through the UX design process for the SocialTagg mobile app, and follows with UI screenshots from more recent projects.
From project conception to the present, Jade has collaborated with a team of software engineers to develop SocialTagg, an event platform focused on connecting people at events. SocialTagg empowers event organizers to streamline event check-ins, measure analytics, and provide attendees with a world-class networking experience.
In this project, Jade walks through her design process as Lead UX / UI Designer for SocialTagg. Within this role, she is responsible for user personas, user task flows, wireframes, user interface designs, usability studies, and marketing-focused tasks that include branding and copywriting.
Although SocialTagg has now grown from a business card replacement app to an event platform focused on networking, this document showcases the design process specifically for the networking features of the mobile app.
The SocialTagg mobile app began as a hackathon project called Tagg. As the hackathon commenced, Jade and her team observed the difficulty of making meaningful connections at events, and found that other hackathon attendees shared the same concern. To solve this problem, the team created a simple business card app for Android that enabled people to scan new contacts into their phone and auto-generate a business card graphic with their contact’s information.
Developed under time constraints, the product was targeted toward hackathon participants, primarily males between the ages of 18-40. After speaking with participants, they expressed the frustration of having to carry business cards around, yet also having difficulty keeping track of people they’ve met, which is crucial to building a hackathon team.
Jade collaborated with the developers to define key features and wireframe the layout. On her own, she designed mock-ups for the screens and created icons, buttons, and other image assets. In just 48 hours, the team successfully shipped a fully-functional app. Read about the prototype and event recap here.
Although the initial app prototype was functional, it was limited in scope. Users could perform basic contact exchange, but the app lacked features for viewing contacts within the app and helping others remember interactions.
After the hackathon, Jade and the team focused on building a networking app that eliminates the need for business cards. Jade led the SocialTagg rebranding, and more team members were brought on to scale up production.
To understand the user’s problem, Jade thought about the context of a networker’s needs and created a user story. She followed the format below, which helps to determine which features should be built:
As a <type of user>, I want <some goal> so that <some reason>.
I am a marketer going to a three-day conference, and just realized I didn’t bring enough business cards. I expect to make at least 20 connections a day, and need a place to keep track of everyone I met. However, I dread the process of collecting business cards and painstakingly entering each contact’s detail into a spreadsheet. I believe more time should be spent on building relationships rather than the frustrating task of data entry.
- I want to share my contact details easily with another person, so that we can keep in touch.
- I want to keep contextual notes about my contact to jog my memory for future interactions.
- I want to send the list of new contacts to my email for easy follow-ups.
- I want to easily access my contacts from the cloud, in case I lose their business cards.
The user story above encapsulates the networking needs of a user, with pertinent features below. Users can:
- Generate a unique badge connected to their personal profile.
- Upload a photo and add a short bio to help others remember them.
- Add new contacts to their list using quick scanning technology.
- Share their badge with others.
- Reach contacts stored in the cloud with one click.
- Import contact details into their phone.
- Record important details about contacts.
- Export their list of new contacts to email.
SocialTagg: Better Networking. Better Events.
Our vision is to build a software platform that becomes indispensable for the event industry. We aim to connect millions of event goers each year with a fun and engaging platform that revolutionizes the way networking is done. Above all, our vision is to provide a means for our users to find life-changing opportunities at events.
Objectives & Benefits
How do these features add value to the SocialTagg app?
- Having additional connectivity and note-taking features increases in-app time during events.
- Allowing users to export information speeds up a user’s follow-up process and eliminates the need for data entry.
- Digital profiles help users save money on business cards and reduce paper.
- SocialTagg collects valuable data on its users and the type of interactions they make. Along with positioning the app toward an event networking focus, the data can bring additional partnership and business opportunities.
- The app will be available on Android, iOS, Windows Phone, and web, so that users can connect from any platform.
To understand the perspective of potential users, Jade frequented social and networking events to meet people and introduce the app. She informally interviewed potential users to learn about their backgrounds, goals, and networking behaviors, as well as glean ideas for suggested features.
Based on the interviews, Jade created the user personas below to define user characteristics and hone in to their needs. This will be helpful for focusing on features that solve user problems.
User Task Flow
The original app combined contact management with the ability to generate a digital business card image based on a user profile. In the new iteration, the team decided to focus on contact exchange. Below, Jade created a user task flow with features that help people remember their contacts.
After going through the flow, Jade sketched wireframes on paper to show a visual representation of each screen. Jade observed users and gathered feedback to make the design more intuitive.
As an example, the menu was initially placed on the bottom of the screen for quick access. Yet, the feedback suggested a side menu would conserve space and give users more real estate on the screen.
Jade selected a color palette, designed the app logo, then created high fidelity mock-ups for the app. Once again, she tested it with local event attendees.
By discussing their needs and observing how they interacted with the mock-ups, Jade was able to ensure the user flow was easy to understand.
Jade also scripted, shot, and edited a demo video to showcase the features of the SocialTagg app.
Designing Other SocialTagg Features
Since then, Jade has completed UX and UI design for Android, iPhone, Windows Phone, and the SocialTagg website, while giving the mobile apps a minor design update. She also designed the SocialTagg Integrated Event Platform, launched in late 2013. Below, Jade has included finished screens for recent features.
To simplify user onboarding, Jade created walkthrough screens to help users understand how to use SocialTagg’s networking app. She adapted the guide for each of the mobile operating systems.
The SocialTagg team has also built a mobile responsive web-based event platform mirroring the apps, with the ability to edit profiles and manage contacts in the cloud. As SocialTagg expanded, Jade and her team of developers outlined features that would allow the event organizer to check-in attendees, measure event engagement analytics, and survey attendees.
Jade went through the aforementioned design process for the website and created wireframes and mock-ups for the landing page and informational pages, while the feature screens were based on her previous designs and adapted for the desktop screen.
After discussing event-based features with potential customers and her team, Jade went through the design process for the mobile app mock-ups, which included event details, event check-in, and event survey screens.