Role

Project Co-Lead • Product Designer • Full Stack Developer

Timeline

March 2021-June 2021

Tools

Flutter • Dart • Figma

SociusQR

01

SociusQR

Product Design • Web Development • Passion Project

In the midst of the Spring quarter of 2021, when the world was grappling with the challenges posed by the pandemic, I, like many other kids, was stuck in my dorm idling away. That's when I decided to join a workshop organized by the ACM organization @UCSD that aimed to provide students with hands-on experience in creating real-world applications. This was the perfect distraction allowing to me to be creative and also learn valuable skills along the way.

I was assigned randomly to work in a team of 4, which eventually became 3, as well as mentor and we were tasked to build a simple MVP mobile application with a schedule of eight weeks. We all agreed that we wanted to build something that we could use as students and as we were all international students we shared the troubles of networking in person. That gave us the idea to create a tool that could help students at networking events. A way to easily share their profile and contact information inlcuding social media handles simply through QR codes!

This case study delves into the process and outcomes of our project, highlighting the challenges we faced, the solutions devised, and the insights gained along the way.

Overview

02

Problem

We need to simplify the process of networking and sharing contact information for students who are socially anxious at large networking events.

Background

In the realm of social and networking events, numerous individuals have encountered moments of unease when it comes to the pivotal exchange of contact information. After engaging in conversations and establishing a connection with someone, the subsequent act of exchanging contact details often unfolds with a hint of awkwardness. The question arises: What mode of connection should be pursued? Should one request their phone number, seek to connect on Instagram or LinkedIn, or explore other means of staying in touch? Moreover, it is essential to determine the purpose and extent of the desired connection with this individual.

Solution


A platform for your own customizable virtual profile to share and network with whoever you want, whenever you want.


Contribution

This project was part of the ACM showcase for Spring 2021. I worked in a group of 4 which was soon reduced to a group of 3. I was made the unofficial team lead where I lead our brainstorming, product meetings as well as design/prototyping. I designed our logo and theme. I came up with the idea of creating a link to multiple accounts and the idea of profile sharing. I designed our prototype in both low and high fidelity. Within our collaborative environment, I took on the unofficial role of team lead, spearheading our brainstorming sessions, overseeing product meetings, and actively contributing to the design and prototyping processes.

One significant aspect of my contribution was the design and development of our project's logo and theme. Furthermore, I played a pivotal role in shaping the core features of our prototype. For example, I pitched the idea of creating a link to multiple accounts and facilitating profile sharing emerged. Recognizing the value of a streamlined online presence, I guided our design to cater to these functionalities, ensuring our application catered to the diverse needs of users.

In addition to my conceptual contributions, I also took charge of designing our prototype, both in low and high fidelity. Exploring Figma for the first time I was able to translate our ideas into tangible visual representations. By creating interactive and intuitive designs, I aimed to showcase the potential and usability of our application for hypothetical stakeholders and potential users.

Overall, my multifaceted contribution showed in leadership, design, ideation, and prototyping, enabling our team to bring our project to life and deliver a compelling prototype during the ACM showcase in Spring 2021.

User Research

03

Research Insights

Device Choice

This was clearly going to be a mobile application as it's designed to be used in real time during interactions with people in person.

Library vs. Social Media Platform

Making it a library of profiles instead of a social media adjacent platform gave it a more niche use and a less confusing place amongst potential users. The idea of a virtual customizable business card was catchy and easily understandable.

Feature Choices

Keeping the features to a minimum was key, just creating a QR with the profiles of your choosing and maintaining a list of profiles you’ve scanned.

Design

04

Step #1: Ideation

We ideated over potential solutions and user flows. I used sketches to solidify ideas and draw out how we wanted the interactions to work.


userflow
low-fi

Step #2: Medium Fidelity Wireframes

After some initial sketches, I created mid-fi wireframes to build out interactions and flows to test with users. The following shows the mobile version of the application.


mid-fi

Step #3: High Fidelity Wireframes

After deciding on a design system I created the high fidelity wireframes for our various landing pages. Below are a select few.

high-fi

Development

05

Outline

This was fun and challenging because we were introduced to a new language in Flutter which worked very differently from any other web-dev framework we'd used before. Iteratively coding as a group and then indivually doing exploratory programming made this such a fun and exciting time! This experience was a thrilling blend of fun and challenge, as we embarked on our journey into the world of Flutter—a new language that diverged significantly from the web development frameworks we were accustomed to. The transition required us to adapt our coding approach and embrace a fresh mindset.

Working collaboratively as a group, we figured the most effective way forward was iteratively coding together. This collaborative effort allowed us to pool our diverse skills, knowledge, and perspectives, resulting in a dynamic and enriched development process. It was during these group coding sessions that we brainstormed ideas, shared insights, and collectively tackled complex problems.

The combination of group coding and individual exploratory programming is what made this an engaging and eye opening journey. We relished the challenges presented by the unfamiliarity of Flutter and enthusiastically embraced the learning process. Overall, this project demonstrated our adaptability, collaboration and showcased the power of collective effort.

Challenges

#1 Automatically following user's links

Our initial idea was to be able to automatically follow/connect/add all the social media handles shared by a user. The idea being that once you scan someone's QR code the app would automatically redirect you to all the links and follow, or whatever the equivalent action might be for the app, without any manual steps.

#2 QR code generation

We could not decide wether to create QR codes in the backend or frontend. We were excited by the prospect of using an API to generate the QR code from the user profile data.

Solutions

#1 Automatically following user's links

We actually decided against it so this is more of a justifaction for a development choice rather than a solution. When we first tried to implement our feature we were unable to figure out a consistent way to follow each link once scanned due to difference in the API's for each app. If we were to do this indivually for each app the issue of dealing with apps we hadn't accomodated for would arise. We also realised that a user need not want to connect with all of the scanned profile's links and instead leaving the choice to them was a better design choice.

#2 QR code generation

We realised that using an API to generate the QR code only added latency as well as affected our app's robustness. This actually lead to a lot of time lost as we tried incorporating APIs which finally proved excessive and so what we eventually did was use a simple libary function for QR generation which created the QR code from a json containing all the metadata and information from a user's profile. We later stored the QR code locally using base64 conversion which saved us in terms of storage.

Retrospective

06

Insights

The idea behind the project has significant potential for real-world applications and could greatly benefit networking events. Although its unique selling proposition (USP) may not be as prominent in a virtual setting, I believe it still holds relevance and can cater to its intended demographic effectively.

Considering the increasing prevalence of scanning tasks in our daily lives, such as scanning QR codes with our phones, users have become more accustomed to this functionality. This familiarity with scanning technology contributes to a comfortable user experience and reduces any potential barriers to adoption.

I think our final product was an exciting expermient and project in our own skills and creativity whilst working in a fast-paced environment. This made us make design and development choices we would not have to if we unlimited time which was a great lesson in prioritizing features and adapting to real-world environments.

Reflections

The development process was challenging and lacked proper planning. As a team with no prior experience in web development, we struggled to determine the initial steps and faced difficulties throughout.

Despite the challenges, our final demo did showcase a functional method to select text inputs and generate QR codes. These QR codes could then be scanned, leading to the extraction of JSON data containing the text inputs. This feature opens up possibilities for further development, such as implementing tags for each text input type and generating profiles based on the extracted data.

Personally, I was very proud of the quality of my design work. Not just the final prototype but the organised manner in which I was able to get there with site-maps, user-flows and several iterations of wireframing.

Moving forward, it would be beneficial for us to invest more time in understanding the fundamentals of development and establishing a solid foundation of research and planning before starting similar projects. This would enable us to approach development with a clearer vision and make more efficient use of our resources.

That's the end!

If you want to go back to the top click here.
Or,

<- Go back to all projects