Qumi

Check it out Qumi mockup image showing two iphones

A simple and instant mobile app solution for sharing all of your social and business information, while promoting sustainability.

Roles:

Fullstack Developer

UX/UI Designer

Founder

Tools:

Next.JS

Typescript

React Native

Expo

PostgreSQL

Figma

Backblaze

VPS

Context

Qumi is was a mobile app that revolutionizes the way people connect by allowing them to exchange their contact information through personalized profiles conveniently shared via QR codes.


This idea has been brewing since my college days when I grew increasingly annoyed with handling business cards and verbally relaying my social media handles. With the rise of QR codes post-COVID, the perfect opportunity arose to transform this concept into reality.


Qumi is available on Android, iOS, and the web.

Problem

The tradition of exchanging business cards has long been regarded as a convenient and quick way to share contact information. However, despite its convenience, it has its drawbacks. The following list highlights the problems that this age-old practice presents:


  1. Environmental Impact: Business cards significantly contribute to deforestation and waste.
    • Waste: 88% of business cards are discarded within the first week of receipt. A staggering 10 million cards are printed annually in the US alone.
    • Deforestation Toll: A startling 500,000 trees are cut each year to produce business cards, an amount equivalent to the distance from Los Angeles to Rome.
    • Sustainability Concerns: Merely 33% of business cards are crafted from recycled materials, exacerbating the ecological impact of their production.
  2. Limited Information: Traditional business cards have inherent constraints when accommodating a substantial amount and diverse types of information. For example, a business card cannot display a pdf or an inventory of vehicles a dealership owner has available.
  3. Lack of Interactivity: Regrettably, business cards cannot display videos or gifs, a limitation that hampers dynamic and engaging communication.
  4. Space Limitations: The confined space on business cards restricts the amount of text and images that can be effectively conveyed.
  5. Exclusivity: As a convention predominantly associated with business owners or corporate employees, many individuals outside this sphere lack a swift and efficient means to share their contact information.
  6. Difficulty Editing: Making even a minor change to a business card requires reprinting an entirely new deck, making updates time-consuming and cost-inefficient..

Solution

I designed and built an iOS and Android app that allows users to create comprehensive and dynamic profiles containing their contact details and share them effortlessly through links or QR codes on their devices.

Execution & Design

As the first React Native/RNW project I embarked upon, Qumi presented an exciting challenge. My previous experience with React laid a strong foundation, making the transition to React Native relatively smooth. However, I did encounter a few frustrating hiccups when building the app for a physical device. I chose to use Expo, which helped to streamline various aspects of the project and eased the overall development process. I was able to share at least 98% of the code between Android, iOS, and the web.


For the design, I strived for a harmonious balance between user-friendliness and customization. I wanted a simple, clean interface with seamless navigation and personalization options.


I chose black and white as primary colors to keep user content at the forefront and incorporated a light and dark theme.


Profile

The profile section enables users to showcase various content, including but limited to links to their personal websites, business locations, social media profiles, and standard contact information. With utmost flexibility, users can organize their information into distinct sections, decide the order in which the content in these sections is presented, and choose whether the content is displayed in a list, small grid, or standard grid format.


Qumi Profile Section DesignQumi Profile Sort Content PopupExample Qumi Profile Contacts SectionExample Qumi Profile Books SectionExample Qumi Profile Section with Small GridExample Qumi Profile

Contacts

The contacts section allows users to compile the contact information of everyone they connect with. Upon scanning another user’s QR code, the targeted profile is added to this section, streamlining the process of collecting one’s information.


In addition to the QR code scanning feature, any contact info exchanged via a form on a user’s profile is displayed here.


With the contacts section acting as a digital Rolodex, users can navigate their professional and personal interactions with ease.


Qumi Contacts Section

Share

The share section allows users to tailor and showcase their QR code for their profile.


Users can opt to direct others to a particular piece of content after their QR code is scanned, bypassing their complete profile.


Alternatively, users have the option to display a customizable form on their profile, inviting others to exchange their information after navigating to their profile.


Qumi Share SectionQumi Edit QR Code PopupQumi Exchange Info PreviewQumi QR Direct Launch PreviewQumi QR Offline Mode Preview

Insights

The insights section gives users a deep understanding and awareness of how others engage with their profile. Within this section, users can evaluate their profile’s performance with key metrics, such as the click-through rate, number of profile views, overall engagement on their content, and the frequency of clicks on specific links.


Qumi Insights Section

Takeaways

Qumi has been an exceptional journey, offering me the perfect platform to explore the capabilities of React Native. Building and designing it was an enjoyable experience, and I take pride in the final result, which effectively addresses the identified challenges.


Looking ahead, I hold enthusiasm to develop Qumi further. There are a multitude of exciting enhancements and features that I envision integrating into the app. One such improvement is expanding the range of content options, allowing users to personalize their experiences even further. Additionally, I aspire to introduce a feature that enables users to display their QR code directly on their lock screen, effectively reducing the time it takes to share their information. Furthermore, I see a benefit in enabling Qumi to scan and save business cards directly to users’ contacts, eliminating the need to collect business cards and contribute to waste.


Ultimately, Qumi is a testament to my passion for innovation and dedication to providing users with an exceptional experience. With each development, I aim to enhance the app’s user-friendliness, effectiveness, and overall impact.