Demystifyd Web App

Understanding our Customers

Since I am not an international student or professional, it was imperative to empathize with the target audience before designing the platform. I started by listening to the CEO’s immigration journey story. David is a U.S. foreign national who understands what it takes to study abroad and find professional work in the United States. After a few virtual meetings, I began to understand some of the hardships foreign nationals are faced with and how this platform can make that process just a little bit easier.

Understanding the Brand

Before I could begin sketching out any ideas and putting together prototypes, I needed to properly define the goals and requirements of the project. In this case, I started first with familiarizing myself with the brand vision and mission of Demystifyd.

Understanding the Market

Once I understood what Demystifyd was seeking to accomplish, I talked with David regarding his vision for the platform. Following this I conducted market research to understand what unmet needs Demystifyd might satisfy, and where we could improve upon the existing products and services.

Understanding the Project Goals

• Stakeholder: To design and develop a MVP of the Demystifyd platform to launch at the Demystifyd Virtual Conference
• User: To network and receive mentorship as a U.S. foreign national

Defining the Feature Set

This was an iterative process throughout the project, but ultimately we landed on the following 9 features:

• Speed Chats
• Connections
• Groups
• Mentorship
• Job Board
• Events
• Courses
• Scholarships
• Perks & Rewards

Sketching Out Ideas

Once I gained a better understanding of the target audience and the market that Demystifyd was after, I began sketching our first wireframes.

Designing the Global Navigation

I originally proposed a multi-level navigation hierarchy with categories. However, after much thought it made more sense to go with a flatter hierarchy to mimic other web applications like Facebook and X (formerly Twitter).

Version 1

Version 2

Version 3

Designing User Flows on Key Tasks

Once the navigation hierarchy was established, I started designing high-level user flows for the main features of the platform. In the example below, the user flow diagram shows how a user might go through the process of joining a Speed Chat.

High Fidelity Prototype

After a few rounds of iteration, we revised these prototypes until we reached an optimal information, interaction, and visual design. From here we were ready to start testing our prototypes.

Handing Off to Development

Once we were ready for development, I began the process of notating our designs in Figma. These notes explained various interactive states and conditions to our developers.

Usability Testing

Before we started to market the platform, we needed to test the usability and usefulness of the web application to catch any bugs or issues with the design.

Over the course of a few weeks, I moderated 7 usability tests with international students. In total, 9 usability issues were identified and ranked by severity. In addition to the identification of the issues, 9 solutions were proposed to improve the UX of the platform.

Key Issues Identified:

• Over 50% of the participants who posted to the “General” group had trouble finding it and one participant gave up looking for it.
• Over 70% of the participants were not able to post to the “Tech Professionals” group. For some unidentified reason, the “post to group” button was not working for these participants.
• Over 85% of the participants were confused by the premium membership offer during the mentorship checkout flow. Many of them thought a premium membership was required to book the call.
• One participant was not able to create an account due to an issue with the phone verification system.
• The “Connections” countdown timer was not working as intended, in-fact it only worked for one participant.

Solution Example: Premium Membership Offer

As mentioned above, 85% of the participants were confused by the premium membership offer during the mentorship checkout flow. This issue was addressed by significantly simplifying the membership offer pop-up.

Going Live: Promotional Video

Once our development team masterfully executed our design and the platform was ready for launch, I began working on a promotional video for our advertising campaign. The motion-graphic video was created to communicate some of our most exciting features.