Project OvervieW

Challenge:

Create a user-friendly and visually appealing dashboard for Joinzap, a SaaS marketing tool that facilitates the management of multiple WhatsApp chats and groups using the "Lançamento Meteórico" strategy. The dashboard should also include an admin page, graphics panels, user manager, and tools for creating email marketing campaigns and landing pages.

Objectives

  • Redesign the tool
  • Create interactive graphic panels that offer real-time insights for campaign performance.
  • Implement a user management system that simplifies the handling of team members.
  • Integrate email marketing tools to facilitate the creation and management of campaigns.
  • Incorporate landing page creation tools in order to enhance lead generation optimization
Note: Please be aware that Joinzap is exclusively available in Brazilian Portuguese. All content, including user interfaces, instructions, and information, will be provided solely in this language. This language restriction is in place to ensure clear and effective communication with our target audience in Brazil.
Project scope?
Adding features to an existing app, Responsive Website, Branding
Tools used?
Figma, Jira for task tracking, Slack for communication
My role in project?
UX Designer (Research, Visual Design, Interaction Design)
What as the team?
Self Directed, with feedback from stakeholder and aling with the developers
The duration ?
8 Week (320 hours)

Research

Considering the limitations of a strict timeline, restricted data sources, and the unavailability of interviews, our research methodology will prioritize the collection of pre-existing data, utilizing input from relevant parties, and exploring external sources of inspiration. The objective of our research plan is to provide valuable insights for the design process behind the Joinzap Dashboard.

Research Goals:

  • User Understanding: Gain insights into the needs, preferences, and pain points of the target audience.
  • Competitive Analysis: Evaluate competitors and identify best practices in UI/UX design for similar SaaS tools.
  • Inspiration Gathering: Explore design ideas and trends from Dribbble for creative inspiration.
  • Data Utilization: Extract and analyze any available company data to inform design decisions.

Assumptions:

  1. Rely on information provided by stakeholders during meetings as the primary source of domain knowledge.
  2. Assume limited access to company data and no Google Analytics for user behavior insights.
  3. Acknowledge the unavailability of user interviews due to time constraints and company policies

Methodologies:

  1. Stakeholder Interviews: Continue to engage stakeholders in discussions to gather as much relevant information as possible.
  2. Competitive Analysis: Examine competitors' platforms to identify design patterns, feature sets, and usability elements.
  3. External Inspiration: Frequent Dribbble to explore UI/UX design concepts, visual styles, and innovative ideas for the dashboard.
  4. Data Analysis: Utilize any existing data within the company, such as user feedback or historical usage data, to inform design decisions where available.

This research approach focuses on making the most of the data and insights available to create an effective and user-centric design for the Joinzap Dashboard. The integration of external inspiration from Dribbble will be instrumental in creating a visually appealing and engaging interface.

Primary Research:

Dribbble Inspirations:

To kickstart the UI/UX design process, we explored Dribbble, a platform known for showcasing innovative design concepts. This exploration allowed us to gather valuable inspiration for the Joinzap Dashboard. Some key Dribbble inspirations include elegant color palettes, intuitive data visualization concepts, and creative ways to display information hierarchy. We drew inspiration from these designs to create a visually engaging and user-friendly interface.

Final Concept Idea:

After refining the initial concepts, the final concept for the "Home Page" of the Joinzap Dashboard emerges as a cohesive and user-centric design. It prioritizes a minimalist aesthetic with sharp data presentation, empowering users to efficiently manage their marketing campaigns. Graphics, charts, and interactive elements are seamlessly integrated, ensuring a visually engaging experience.

Wireframes:

In addition to the "Home Page," the research will provide wireframes for all additional screens and sections of the Joinzap Dashboard. These wireframes will outline the layout, structure, and interactions of each screen, ensuring a consistent and user-centric design throughout the entire dashboard.After refining the initial concepts, the final concept for the "Home Page" of the Joinzap Dashboard emerges as a cohesive and user-centric design. It prioritizes a minimalist aesthetic with sharp data presentation, empowering users to efficiently manage their marketing campaigns. Graphics, charts, and interactive elements are seamlessly integrated, ensuring a visually engaging experience.

Atomic Design System:

In the journey of crafting the Joinzap Dashboard, an essential aspect that significantly influenced our design process was the implementation of an Atomic Design System. This system played a pivotal role in ensuring consistency, scalability, and efficiency in our UI/UX design efforts.Considering the limitations of a strict timeline, restricted data sources, and the unavailability of interviews, our research methodology will prioritize the collection of pre-existing data, utilizing input from relevant parties, and exploring external sources of inspiration. The objective of our research plan is to provide valuable insights for the design process behind the Joinzap Dashboard.

Atoms and Molecules:

  • Atoms: We began by defining the smallest design elements, such as buttons, icons, and typography. These were our "atoms." Consistency in these elements across the dashboard was crucial for a polished look and feel.
  • Molecules: Building upon atoms, we formed "molecules" by combining these elements to create more complex UI components like form fields, cards, and navigation bars. This step ensured that even more intricate parts of the dashboard adhered to the same visual and interaction standards.Gain insights into the needs, preferences, and pain points of the target audience.

High-Fidelity Screens

As per the stakeholder's request, the final UI/UX design for the Joinzap Dashboard will be presented in high-fidelity,serve as a reference for visual aesthetics and layout.

Home Page

The Home Page provides an overview of key metrics, including sales numbers, weekly message totals, campaign selection options, total click metrics, and logs. It serves as the central hub for users to monitor their marketing campaigns and WhatsApp communication.

Data Visualization (Campaign Reports)

The Campaign Reports section contains multiple graphs and data visualizations, showcasing campaign performance metrics. Users can track the success of their marketing efforts through detailed graphs, charts, and data tables

CRM (Customer Relationship Management)

The CRM interface allows users to manage their contacts, track interactions, and maintain customer relationships efficiently. It includes features for adding new contacts, recording communication history, and setting reminders for follow-ups.

Dashboard mockup
Dashboard mockup
Dashboard mockup
Dashboard mockup
Dashboard mockup
Dashboard mockup

Summary

As I reflect on my journey designing the Joinzap Dashboard, there are some important takeaways and a wrap-up to share:Alright, let's wrap this up with a summary of the project and the valuable lessons I've learned along the way.

Lessons Learned

  • Stay Close to Stakeholders: Staying in sync with stakeholders and leaning on their insights becomes crucial when the usual research routes aren't an option. Their guidance keeps you on the right track.
  • Dribbble for Creative Sparks: Using platforms like Dribbble for design inspiration can be a lifesaver. It's a goldmine for fresh ideas when you can't do traditional research.
  • High-Fidelity Reference Screens: Crafting high-quality interactive screens as visual references can be your secret weapon. They help convey design ideas powerfully.
  • Constraints Fuel Creativity: Working within tight limits, like short timelines and data scarcity, forces you to think outside the box. It pushes you to focus on what really matters in design.

Conclusion:

In the end, the Joinzap Dashboard project has shown me how vital adaptability and resourcefulness are in the world of UI/UX design. Even though we couldn't follow the usual interview and data-gathering paths, we made great use of stakeholder input, outside inspiration, and the info we had in-house to create a visually stunning and user-friendly design.

Those high-fidelity reference screens are like magic. They help explain design concepts brilliantly. This project has underscored that UI/UX design isn't bound by conventional research methods; it can thrive in all sorts of situations by embracing creativity and teamwork.

To wrap it up, the Joinzap Dashboard project demonstrates that a well-informed, flexible, and creatively driven approach can lead to a top-notch UI/UX design, even when dealing with some tough limitations.