Foreword
In July 2012, I 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 I know, I would go on to co-found SocialTagg, market the event platform to thousands of people digitally and through live events, and garner recognition for my startup as LA’s Hottest Showcasing Startup and TechsyTalk’s Event Tech of the Week.
Overview
From project conception to the end of the project, I 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, I walk through my design process as Lead Designer for SocialTagg. Within this role, I was responsible for user personas, user task flows, wireframes, user interface designs, usability studies, and marketing-focused tasks that include branding and copywriting.
Although SocialTagg grew 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.
- Role: Co-Founder, Lead Designer and VP Marketing
- Timeline: 2 years, 7 months
- Platform: iOS, Android, Windows Phone, web (desktop and mobile breakpoints)
- Tools: Adobe Photoshop, Adobe Illustrator, Adobe Premiere
- Team members: 10+
Origins
The SocialTagg mobile app began as a hackathon project called Tagg. As the hackathon commenced, my team and I observed the difficulty of making meaningful connections at events, and found that other hackathon attendees shared the same concern. To solve this problem, our 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.
I collaborated with the engineers to define key features and wireframe the layout. On my own, I designed mockups for the screens and created icons, buttons, and other image assets. In just 48 hours, our team successfully shipped a fully-functional app. Read about the prototype and event recap here.
Challenge
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, my team and I focused on building a networking app that eliminates the need for business cards. I led the SocialTagg rebranding, and more team members were brought on to scale up production.
To understand the user’s problem, I thought about the context of a networker’s needs and created a user story. I 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>.
User Story
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 relevant 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.
Vision
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.
User Personas
To understand the perspective of potential users, I frequented social and networking events to meet people and introduce the app. I 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, I 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, based on customer feedback, we decided to focus on contact exchange. Below, I created a user task flow with features that help event attendees remember their contacts.
Wireframe
After going through the flow, I sketched wireframes on paper to show a visual representation of each screen. I 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.
Prototype
I chose a color palette, designed the app logo, then created high fidelity mockups for the app. Once again, I talked to local event attendees to get their feedback.
By discussing customers’ needs and observing how they interacted with the mockups, I was able to ensure the user flow was easy to understand.
Watch the SocialTagg App Demo
I scripted, shot, and edited a demo video to showcase the features of the SocialTagg app.
Designing Other SocialTagg Features
Since then, I completed UX and UI design for Android, iPhone, Windows Phone, and the SocialTagg website, while giving the mobile apps a minor design update. I also designed the SocialTagg Integrated Event Platform on responsive web, launched in late 2013.
To simplify user onboarding, I created walkthrough screens to help event attendees understand how to use SocialTagg’s networking app. I adapted the tutorial for each of the mobile operating systems.
Our team also built a mobile responsive web app mirroring the native apps, with the ability to edit profiles and manage contacts in the cloud. As SocialTagg expanded, my team and I outlined features that would allow the event organizer to check-in attendees, measure event engagement analytics, and survey attendees.
I went through the aforementioned design process for the website and created wireframes and mockups for the landing page and informational pages, while the feature screens were based on my previous designs and adapted for the desktop screen.
After discussing event-based features with potential customers and my team, I went through the design process for the mobile app mockups, which included event details, event check-in, and event survey screens.
