Here & Now | product design

I had the privilege of leading a team in developing the product design of an exciting new social media platform. Our first step was to develop low-fidelity wireframes based on thorough user research. From there, we created interactive prototypes using Figma and tested them with users to gather valuable feedback. With this feedback, we refined the designs until they met user requirements and polished them for handover to the development team. I worked closely with the developers throughout the process to ensure that the final product matched the designs perfectly and that the design library was implemented correctly. The result was a seamless user experience and a visually appealing interface that truly made the platform stand out.

Process overview

Empathize

Learn about user

• User interviews

• Stakeholder interviews

• Surveys

• Data Analysis

• Competitive research

Define

Determine features

• Personas

• User journeys

• Problem statement

• Competitive

analysis

Ideate

Brainstorm solutions

• Brainstorm sessions

• Storyboards

• User flows

• Effort vs impact matrix

Prototype

Symulate user experience

• Paper wireframes

• Micro-interactions

• Digital wireframes

• Interactive prototypes

• Design documentation

• Design hand-offs

Test

Validate with users

• Usability testing

• QA

• A/B TESTING

• System usability scale (SUS)

• Observations

• Eye-tracking

Empathize

Empathize

We employed user research practices including interviews, focus groups, and observation to understand our users' preferences and behaviors regarding social media. Through these methods, we identified what they liked and disliked, preferred features, and frustrations. Additionally, we gained insights into their event planning behaviors, understanding how they schedule events and the difficulties they encounter. This research helped us inform our product design and enhance the user experience, particularly in the context of event planning within social media platforms.

User interviews

We interviewed several current and past social media users to gain insights into their experiences. Our questions aimed to understand their identities, pain points, and challenges encountered while using social media platforms. Additionally, we delved into their methods of connecting with others in person and the specific tools they rely on for such interactions.

Stakeholder interviews

We collected the goals and visions for the platform from the rest of the executive team and other high-level individuals.

Competitive Analysis

We spent time reviewing other industry leaders and looked closely at how they were organizing their content and positioning themselves. Some of these platforms included Facebook, Instagram, Tiktok, Groupme, Google calender, Howbout, and Meetup.

Define

Once we gathered all the information and insights, we analyzed and synthesized them to define the core problems or opportunities that we wanted to address. We carefully framed these as clear problem statements or design challenges, ensuring that we had a solid understanding of what we needed to solve or explore.

User #1

Occupation | College student

Bio | An 18-year-old college freshman, Emma has faced several negative impacts from social media. Despite having quit multiple times, she finds herself rejoining due to feelings of loneliness. Emma is actively seeking clubs and events at her school that can help her foster genuine in-person relationships.

Name | Emma Thompson

User #2

Occupation | Youth group leader

Bio | John, a 27-year-old youth group leader at a large church, is passionate about planning for his group. However, he often finds it challenging to organize these large events efficiently and resorts to using cumbersome text message threads. The main struggle John faces is tracking the number of attendees to plan for food, which leads to repeated explanations of event details.

Name | Duante Red

User #3

Occupation | Active parent

Bio | 32-year-old active mom of two who actively participates in various school and sporting events with her children. Balancing multiple commitments, Sarah often finds it challenging to keep up with everything and can feel overwhelmed by the use of different platforms for event communication. She yearns for a solution that consolidates all event-related information in one place

Name | Mia Lee

The problems

Mental disorders
Social disorders
Isolation
Bullying
Hate speech
Anxiety
Unclear event planning

The goals

Help create real-life events
Facilitate Impromptu or detailed events
Help people find friends that are free to hangout
Effortlessly groups management
Help people discover a real connection
Encourage authentic media
Discourage toxic and addictive features.

Ideate

Ideate

Together, we unleashed our creativity and generated a wide range of ideas without any judgment. We brainstormed and explored different possibilities for solving the defined problem. Through sketching, and other ideation exercises, we pushed ourselves to think innovatively and came up with diverse ideas.

Brainstorm session

During these times, no idea was off-limits. We pushed ourselves to come up with many solutions to help solve the problems that the user and site performance revealed.

User flows

We placed ourselves in the user’s shoes and determined clear paths they could take to get to their desired location.

Effort vs impact matrix

We used this stage to focus on the ideas that would be most effective toward our goals of releasing a minimum-viable product.

Prototype

With a bunch of ideas in hand, we transformed them into tangible representations. We created prototypes, first low-fidelity and then high-fidelity, to bring our ideas to life. These prototypes served as a means to gather feedback and test concepts, allowing us to quickly learn and refine the design solution.

Wireframe Sketches

We often begin the design process by creating sketch wireframes before moving on to more polished and designed versions. Starting with sketch wireframes allows us to iterate rapidly, exploring different ideas and refining the design quickly. These wireframes focus on the core structure and layout, enabling us to clarify the conceptual framework and user flow without getting caught up in visual details.

Low-fidelity wireframes

We then created low-fidelity designs to explore initial concepts and gathered feedback from users and stakeholders. Through usability tests and active engagement, we sought input to identify usability issues and areas for improvement. Based on the feedback received, we iterated on the low-fidelity designs, making necessary refinements and incorporating suggested changes.

Interactive prototypes

We then created interactive prototypes using Figma. This allowed us to conduct user experience testing by simulating interactions and transitions. We add clickable hotspots and interactive elements to replicate the user journey and gather valuable feedback on usability and flow. When presenting to stakeholders, these interactive prototypes served as effective tools for communication, allowing stakeholders to interact with the design and provide feedback.

Test

Test

We then tested our webpages and features to ensure usability, fix errors, optimize performance, and meet accessibility standards. Testing helps us improve the user experience, identify and resolve issues, optimize speed, and make our web pages accessible to all users.

Internal testing

We internally reviewed and critiqued the app before moving on to audience testing.

Audience testing

We tested the site with both our target audiences and representatives from our company.

Examples from collected feedback

Iterate

After gathering feedback from users, we iterated and made changes to our designs. User feedback played a crucial role in guiding our design decisions and ensuring that we were meeting their needs and expectations. By embracing an iterative approach, we were able to refine and improve our designs based on real-world user experiences, ultimately creating a more user-centered and effective solution.

One compelling example of how our product has evolved based on valuable user feedback is the introduction of the "Free Now" feature. Initially, we did not provide an option for users to indicate their availability, but numerous users expressed their desire for our platform to facilitate spontaneous hangouts. Taking this feedback to heart, we incorporated the "Free Now" feature, which allows users to mark themselves as available in real-time. This enhancement empowers our community to effortlessly connect and engage in impromptu social gatherings, fulfilling their desire for seamless, spontaneous interactions.

Design systems

Design systems

As the creator of our comprehensive design system, I had the opportunity to greatly benefit our brand by fostering cross-functional collaboration and ensuring consistency across our digital products. I worked on various components, including carefully curating a color palette that established a recognizable brand identity, defining typography guidelines that provided a consistent visual language, and creating cohesive iconography that enhanced user experience and reinforced brand recognition. Additionally, I developed pre-defined UI components such as buttons, forms, cards, and navigation elements to promote consistency in design and functionality. This unified approach not only strengthened our brand's identity but also facilitated collaboration among our team of designers, developers, and stakeholders, resulting in more efficient workflows and a seamless user experience.

Development

Preparing & passing files to developers

As the designer, I meticulously prepared Figma files with best practices, comprehensive documentation, and a user-friendly structure for the developers. By leveraging my knowledge of coding and front-end development, I seamlessly communicated design decisions and requirements, fostering collaboration. Through clear instructions and effective use of Figma's commenting features, I ensured a smooth handoff and addressed implementation details.