Startappz Blog

Claude Code + Figma: A Designer-Developer Workflow That Actually Works!

Startappz — Mon, 30 Mar 2026 07:06:08 GMT

I didn’t intend to write this post. But after using Claude Code alongside Figma on real projects and seeing how dramatically it reshaped the way my team works, I knew it was worth sharing.

This isn’t a product review. It’s a practical breakdown of a workflow I rely on every day. Whether you’re a designer, a developer, or somewhere in between, you’ll find something valuable here.

1. The Problem Worth Solving

Think about the last project you delivered. How much of your time went into actual design thinking and how much was spent copying specs between tools, re-explaining decisions, or chasing the latest version of a file? For most teams, the second outweighs the first.

You’re not designing. You’re managing chaos.

The real cost is context switching. Every time you jump between tools, you lose momentum. Decisions get duplicated. Inconsistencies creep in. And the work that actually matters is the thinking & the design that gets squeezed into whatever time is left.

This is the problem the workflow solves. Not by adding more tools, but by connecting the ones you already use into a single, cohesive system.

2. Getting Claude Code Running

Claude Code lives in your terminal, the black window most designers avoid. But don’t worry: you only need to set it up once. After that, it quietly does its job, and you can almost forget it exists.

My team runs Claude Code on a shared studio server, so every designer and developer connects to the same environment. You can also run it locally on your Mac.The setup is the same either way.

Install it

Open your terminal on Mac, press Cmd + Space and type Terminal and run this:

npm install -g @anthropic-ai/claude-code

If you type claude afterward and see a “command not found” error, don’t panic. This is very common. It just means your terminal doesn’t yet know where the tool was installed.

Fix the PATH

Think of PATH as your terminal’s address book. If an app isn’t listed, the terminal can’t find it. You fix this by editing a file called .zshrc.

What is .zshrc? It’s a hidden configuration file your Mac reads every time you open a terminal, like a startup checklist. The name breaks down like this: zsh is the shell program running inside your terminal, and rc stands for “Run Commands.” In short, .zshrc is just a set of instructions that load automatically whenever your terminal starts.

Run this to open it: nano ~/.zshrc

Scroll to the bottom and add this line:

export PATH="$HOME/.npm-global/bin:$PATH"

Press Ctrl + X, then Y to save.

Then run: source ~/.zshrc

Type Claude. You should see the Claude Code prompt.

That is it! You are in.

Quick note: If you are on an older Mac using bash instead of zsh, edit ~/.bash_profile instead. Everything else works the same way.

3. Connecting Claude Code to Figma

This is where the workflow changes completely.

On its own, Claude Code is powerful. But when you connect it to Figma through the official MCP server, it stops being just an AI you talk to. It becomes an AI that works inside your design file.

What does that mean in practice? Claude Code can read your Figma file, create components, set variable values, and organize layers all from the terminal without you ever touching Figma manually.

How to connect them?

Find or create this file on your Mac:

~/Library/Application Support/Claude/claude_desktop_config.json

Add the Figma MCP server entry under mcpServers. Anthropic's documentation has the exact snippet to paste. Save the file, restart Claude Desktop, and make sure your Figma file is open in the desktop app, not the browser.

When it works, Figma appears as an available tool inside your Claude Code session. From that moment, Claude is not advising you from the outside. It is working inside the same file you and your team are using.

Important: Always authenticate through the Figma desktop app. Browser sessions can cause token errors that are frustrating to debug. Desktop app first, every time.

4. Building a Design Language System with Claude Code

Setting up a design system from scratch takes time. Defining every color shade, working out a type scale, building the spacing grid, documenting it all. It is important work, but it is also slow and easy to get inconsistent.

Claude Code can do this in minutes and write the results directly into your Figma variables panel.

Here is a real example. This is the prompt I used when building the DLS for Chat'n Shop, an AI-powered Arabic grocery assistant app for the MENA market:

"Create a design language system for Chat'n Shop — a native iOS grocery shopping app for the MENA market with an AI chat interface. Primary brand color is #FFBB00 (golden yellow). Secondary is #1C2B4A (deep navy). Accent is #E8403C (logo red). Use SF Pro Text as the typeface. Base spacing unit is 4px, scaling up to 32px. Border radius ranges from 4px to full pill shapes for chat bubbles and tags. Semantic colors: success #34C759, warning #FF9500, danger #FF3B30. The tone should feel warm, conversational and trustworthy. Write all tokens into the open Figma file."

What came back was a complete system:

Color tokens: primary, secondary, accent, semantic states, neutral grays, and surface colors for chat bubbles
Typography scale: from 34px hero display down to 11px captions, with weights and line heights
Spacing tokens: a consistent 4px grid from 4px through to 32px
Border radius tokens: from subtle 4px corners to full pill shapes
Component specs: button, input, chat bubble, product card, and navigation bar

All written directly into Figma. No manual copy-paste. No spreadsheet of values. One prompt, one coherent system.

And if something does not feel right? You ask Claude Code to read the file back and adjust. It is a conversation, not a one-shot output.

5. How does Claude Code and Figma Complete Each Other?

This is the part worth getting right: Claude Code and Figma aren’t just compatible! They complement each other, filling the gaps the other leaves behind.

Claude Code reads Figma

Before generating anything, Claude Code can inspect your Figma file. Component names, existing styles, layer naming, frame structure. It is never working from assumptions. It is working from what is actually in your file.

Claude Code writes to Figma

Instead of writing a spec that a designer then manually interprets, Claude Code can create components directly in the file. Your role shifts from building the foundation to refining and art-directing, where your judgment matters most.

Figma feeds Claude Code

This direction is the one most people miss. Once you have a designed screen in Figma, Claude Code can read it and write the frontend spec automatically, generate developer handoff notes, or catch inconsistencies before the build starts. The design file becomes an input, not just an output.

The DLS as a shared language

Claude Code generates the tokens. They live in Figma as variables. Developers consume those same tokens in code. One source of truth is maintained intelligently, visible to everyone, consistent across the entire product.

The mental model: Claude Code is the architect and the builder. Figma is the blueprint room. Figma Make is the construction crew. None of them does the full job alone. Together, they cover everything from brief to production.

6. The Full Pipeline: From Brief to Production

Once the setup is in place, a real project flow looks like this:

A brief arrives from a client
Claude Code generates the information architecture, user flows, and component specs
Claude Code writes the DLS tokens directly into the Figma file via MCP
You design the screens using those components and tokens as the foundation
Claude Code reads the Figma output, validates consistency, and flags anything off
Figma Make takes the clean, token-driven design and generates production-ready frontend code

The feedback loop between Claude Code and Figma is what makes this different from other AI workflows. You are not running two parallel processes. You are running one connected system where each step informs the next.

7. Figma Make: What It Can Do and My Honest Take

Figma Make takes your Figma design and generates frontend code: HTML and CSS, or React components, depending on your setup.

For clean, token-driven designs, it works well. Simple screens, standard components, consistent layouts. These come out in good shape.

My honest take: it is a strong first draft, not a finished commit. Complex interactive states, custom animations, and edge-case breakpoints still need a developer pass. Build that review step into your process from the start.

But here is the thing. The quality of what Figma Make produces depends entirely on the quality of the Figma file it reads. When Claude Code has set up the DLS properly, and the components are clean, the output improves significantly. The work you put in earlier pays off here.

If the blueprints are clear and the materials are well-specified, the building goes up cleanly. If not, no amount of skill downstream saves it.

8. What Works and What to Watch Out For

What works

Start with Claude Code before you open Figma. Think through the IA and component requirements first. The Figma work will be faster and much more focused.
Keep your prompts specific. Vague prompts produce vague tokens. The more brand context you give, the more useful the output.
Version your DLS tokens in git. Treat them like code. Track changes, review updates, and roll back when needed.
Use a shared server for teams. Everyone in the same environment means consistent outputs and no local config headaches.
Ask Claude Code to review before Figma Make. It can read the file and flag issues. Use that step, it saves pain later.

What to watch out for

Do not skip the PATH setup. It trips up almost everyone the first time. Five minutes now saves frustration later.
Authenticate through the desktop app. Browser tokens expire unpredictably. The desktop connection is stable.
Share your brand guidelines before generating the DLS. Without them, Claude makes reasonable defaults. With them, it makes the right choices.
Built-in iteration time. This workflow reduces the loops, it does not eliminate them. Plan for at least one round of refinement.

Where to Start?

Do not try to implement the whole pipeline on your first attempt. Start with one thing.

Install Claude Code, connect it to a Figma file, and ask it to generate a color palette for a project you are working on. Watch it write the variables directly into Figma.

That moment seeing Claude actually working inside your design file, is when it clicks. Everything else follows naturally from there.

The tools are ready. The workflow is proven. The only thing left is to open your terminal and try it.

AI Chatbots for Ramadan: The Ultimate Customer Support & Sales Strategy

Startappz — Mon, 23 Feb 2026 09:35:30 GMT

Ramadan is one of the most powerful seasons for digital growth, e-commerce sales, and online customer engagement across the Middle East.

With increased night browsing, rising Eid shopping online, and higher social media activity after Iftar, businesses experience a major spike in traffic.

The real question is:

Is your customer support ready for the Ramadan surge?

This is where AI chatbots for business become a game-changer.

Ramadan Digital Trends: Why AI Matters More Than Ever?

During Ramadan:

Online shopping increases significantly before Eid
Website traffic peaks after Iftar
Customers expect instant replies
Social media DMs multiply
WhatsApp inquiries surge

If your response time is slow, customers move to competitors instantly.

AI-powered customer support automation ensures you never miss a lead, especially during high-conversion night hours.

🚀 AI Chatbots: 24/7 Customer Support During Ramadan

An AI chatbot for business allows you to:

Respond instantly to customer inquiries
Automate order tracking
Share Ramadan offers
Guide users through checkout
Collect qualified leads
Provide multilingual support

With AI customer support automation, your business remains active even outside working hours & maximizing sales during peak Ramadan traffic.

🛒 Increase Sales During Ramadan With Smart AI Personalization

AI doesn’t just respond. It learns.

Modern AI systems analyze:

Customer behavior
Purchase history
Peak browsing times
Cart abandonment patterns

This enables:

✔ Personalized product recommendations

✔ Targeted Ramadan promotions

✔ Automated Eid campaign reminders

✔ Smart upselling strategies

The result? Higher conversions and increased revenue during the most important shopping season of the year.

WhatsApp Chatbot for Ramadan Campaigns

In the Middle East, WhatsApp Business automation plays a critical role in Ramadan marketing strategy.

A WhatsApp chatbot can:

Handle bulk inquiries during offers
Send automated Eid promotions
Provide instant responses
Capture leads from social media ads

This is especially powerful for retail, food delivery, fintech, and e-commerce platforms.

AI Analytics for Ramadan Marketing Optimization

Successful Ramadan campaigns are data-driven.

AI analytics tools help you:

Identify peak engagement hours
Optimize ad timing
Improve customer retention
Predict demand before Eid
Reduce cart abandonment

Instead of guessing, you make strategic decisions based on real-time insights.

This is a true Ramadan digital transformation.

Reduce Support Costs & Increase Efficiency

Fasting hours often mean reduced operational capacity. AI automation helps by:

Handling repetitive questions
Filtering high-value leads
Escalating complex cases to human agents
Reducing customer service workload

Your team focuses on growth, while AI manages routine tasks.

Why Businesses Using AI Win During Ramadan?

Companies that adopt AI for e-commerce and customer engagement during Ramadan benefit from:

✔ Faster response times

✔ Higher conversion rates

✔ Improved customer satisfaction

✔ Lower operational costs

✔ Increased Eid sales

Ramadan is not just a holy month; it is a high-impact revenue opportunity.

Businesses that leverage AI tools and chatbot automation gain a competitive edge in a highly active digital market.

Upgrade Your Ramadan Strategy With Startappz!

At Startappz, we specialize in:

AI chatbot development
WhatsApp Business automation
E-commerce AI integration
Customer support automation systems
Ramadan-ready digital platforms

If you're looking to increase sales during Ramadan and optimize customer engagement, our AI-driven solutions are designed to scale your business efficiently.

👉 Book your free Ramadan AI consultation today and prepare your business for the Eid surge. Please contact us: info@startappz.com

#AIChatbot #RamadanMarketing #DigitalTransformation #CustomerEngagement #Ecommerce #BusinessAutomation #Startappz #Ramadan2026

What is the real difference between UX/UI and product design today?

Startappz — Wed, 03 Dec 2025 12:23:54 GMT

Over the last decade, the design industry has changed dramatically. What used to be called “UX/UI design”, once centered around flows, screens, and usability, has evolved into a strategic discipline that shapes entire digital products.

Today, user experience is not only about guiding the user from point A to point X. It has become a core part of how products are built, how features are prioritized, and how businesses grow. This shift has resulted in new responsibilities, new expectations, and new terminologies like Agile UX, Lean UX, DesignOps, and Product Discovery.

And this raises an important question:

What is the real difference between UX/UI and product design today?

Let’s break it down.

1. UX/UI Used to Be About Improving the Experience: Now It Drives the Business

Traditionally, UX/UI designers focused on:

Making interfaces intuitive
Fixing friction points
Organizing information
Improving usability
Designing user-friendly flows

These are still essential.

But modern businesses now see UX/UI as a strategic asset, not just a delivery function.

Today, UX/UI influences:

Product Direction
Feature Prioritization
Conversion Rates
Retention
Customer lifetime value
Growth Metrics
Brand Perception

Companies know that good UX is good business.

2. Agile UX Changed the Role: Design is Continuous, Not One Phase

Agile UX emerged because the old waterfall approach to design failed to keep up with product realities.

Instead of delivering a full design package and “throwing it over the wall,” designers now work in continuous cycles:

Define
Test
Build
Measure
Iterate

This requires designers to deeply understand:

Business goals
Product strategy
Market needs
Technical constraints
KPIs and metrics

UX/UI is no longer about making a flow “nice.”

It’s about making the product viable, valuable, and measurable.

3. UX/UI Shapes the Product & Not Just the Interface!

Modern UX/UI responsibilities now include:

Defining the core value proposition
Identifying the MVP and feature set
Writing hypotheses
Creating success metrics
Mapping user journeys across the entire ecosystem
Performing research that influences business decisions
Testing ideas before engineering invests
Creating early prototypes for validation
Refining the roadmap with product managers

In other words:

UX/UI is involved in building the product foundation & not just the screens.

This is why many UX leads today function like product managers.

4. Product Design Goes Even Further: Ownership, Strategy, and Outcomes

So what makes product design different?

A product designer:

Owns the product end-to-end
Balances business, tech, and user needs
Contributes to the roadmap
Uses data analytics to inform decisions
Participates in sprint planning
Aligns stakeholders and teams
Makes trade-offs between desirability, feasibility, and viability
Helps the business define “What is next?”
Ensures what we build makes sense for the company, not just for the user

Where UX/UI is often focused on experience, product design is focused on outcomes.

UX/UI answers:

“Is this usable, intuitive, and meaningful?”

Product design answers:

“Is this the right thing to build, and will it help the business grow?”

5. The Real Challenge: Design Teams Are Expected to Do Both

This evolution has created new pressures inside companies.

Designers today must:

Think strategically
Move fast in agile environments
Constantly iterate and adapt
Justify decisions with data
Collaborate with product, tech, and business
Deliver scalable systems, not one-off screens
Understand user psychology & market dynamics
Prepare product roadmaps and MVP definitions
Measure the impact of their work

The challenge?

Not every company understands this transformation.

Designers are often hired for UI but expected to deliver product strategy.

They are expected to “make it pretty” while also defining KPIs, features, and product direction.

This mismatch is one of the biggest industry challenges today.

Conclusion: UX/UI and Product Design Are Converging, Yet Not the Same

UX/UI has evolved from a visual discipline to a strategic driver of business success.And product design emerged as the natural next step, combining UX thinking with business ownership, product strategy, and measurable outcomes.

In simple terms:

UX/UI = designing the experience
Product design = designing the product, the value, and the business impact

Both are essential.

But as products grow more complex and user expectations rise, the industry is becoming more aligned around one core truth:

Design is not just about screens, it’s about building the right product.

11 Years of Startappz

Startappz — Tue, 19 Aug 2025 15:19:07 GMT

August 19, 2025

Today marks Startappz's 11th birthday. While each individual year doesn't carry the same weight as the big milestones behind us, the fact that we're still here, still building, still bringing ideas to life digitally all these years later means a great deal to me.

In recent years, there's been endless chatter about the "death of agencies" and how AI will replace developers, how no-code platforms will make custom development obsolete. I often smile when I hear these predictions — I've seen the app development industry declared revolutionized or disrupted countless times over the course of our journey, and this is simply the latest chapter.

What many people fail to recognize is that this industry thrives when solutions are built by people who truly care — people who are passionate about solving real problems and started developing not just for profit, but because they genuinely love creating digital experiences that matter. The kinds of projects we work on — custom apps for businesses with unique challenges, telecom solutions that connect millions of users, digital transformations that actually transform — continue to succeed long after the flashy, cookie-cutter platforms fade away.

Why? Because we have clients who trust us, grow with us, and evolve with us.

When we started on August 19, 2014, the app landscape looked completely different. The App Store was still relatively young, Android was finding its footing, and most businesses were just beginning to understand they needed a mobile presence. We've watched entire platforms rise and fall, seen design trends come and go, and witnessed technology evolve at breakneck speed.

But through it all, one thing has remained constant: businesses need partners who understand their vision and can bring it to life with precision, innovation, and care.

Our clients trust us — they trust us with their digital futures, their user experiences, and their business transformations. From Virgin Mobile's groundbreaking self-care platforms to Q-Commerce, from facial recognition eSIM activation for tourists to comprehensive IoT solutions — each project has been a testament to what's possible when you combine cutting-edge technology with genuine understanding of business needs.

That's the true joy of what we do, and it's why our team keeps showing up every day — more than 4,000 days later.

Looking back at these 11 years, we've built solutions across multiple countries, worked with industry giants, pioneered first-of-their-kind innovations, and most importantly, helped countless businesses connect with their customers in meaningful ways. We've survived market crashes, platform changes, global pandemics, and industry disruptions. Each challenge made us stronger, more adaptable, more focused on what truly matters: delivering solutions that work.

Thank you for continuing to trust us with your digital transformations. Looking ahead, I know there will be new challenges to reach Startappz 15 or even Startappz 20 — new technologies to master, new platforms to conquer, new problems to solve. But looking back at the past decade, we've faced plenty of challenges before and overcome them — and I'm confident we'll do it again.

The future of digital experiences isn't about replacing human creativity and expertise with automation — it's about augmenting it, enhancing it, and using it to build solutions that truly matter.

Of course, none of this would be possible without our incredible team, who continue to show up project after project to craft the solutions our clients love. Thank you to every developer, designer, project manager, and strategist who has been part of this journey.

And thank you to our clients, past and present, for believing in us and allowing us to bring your ideas to life, digitally.

From all of us at Startappz, this is a birthday celebration ♥️

Ready to bring your next idea to life? Let's build something amazing together.

Moski - CEO/CTO

We're Hiring! Android Developer

Startappz — Mon, 14 Jul 2025 07:52:26 GMT

🚨 We’re Hiring: Android Developer 🚨

📍 Location: Dubai – Remote

🕒 Type: Full-time · Mid-to-Senior Level

About the Role:

Are you passionate about building high-performance Android apps that impact millions of users? We’re looking for a Senior Android Developer to join our mobile team and help shape the future of our flagship apps.

This is a high-impact role where you’ll work on complex challenges and you’ll play a leading role in architecture decisions, mentor developers, and collaborate cross-functionally to deliver elegant mobile experiences at scale.

What You’ll Do:

🚀 Lead the development of major Android features and architectural enhancements

🧠 Design clean, scalable, and testable Kotlin code using MVVM, MVI, and Jetpack libraries

🔍 Collaborate with product, design, QA, and backend teams to plan and execute new features

🛠️ Review code, enforce best practices, and provide mentorship to Android teammates

📈 Monitor app performance and stability using Firebase, Crashlytics, and analytics tools

🔐 Champion mobile security, especially for customer identity, billing, and telco data

⚙️ Contribute to CI/CD processes and improve release automation

What We’re Looking For:

✅ 5+ years of professional Android development (Kotlin-focused)

✅ Strong experience with Android Jetpack, Coroutines, and app architecture (MVVM, MVI)

✅ Proven ability to work on large, modular codebases and complex app ecosystems

✅ Strong grasp of mobile app performance, security, and REST API integration

✅ Experience with Agile/Scrum workflows and collaborative product teams

✅ Solid debugging, testing, and problem-solving skills.

✅ Strong understanding of mobile UI/UX best practices and responsive design.

🌟Bonus Points:

✨Experience with telco systems

✨Jetpack Compose, GraphQL, or modular Android app architecture

✨Working knowledge of Flutter or cross-platform tools (optional)

✨Experience deploying and managing apps with 1M+ active users

✨Experience with A/B testing, deep links, and analytics

🚀Why Join Us?

💡 Work on an app that directly serves millions of users

🏠 Hybrid or remote work flexibility

📚 Access to training, certifications, and career growth opportunities

💬 Collaborative, diverse, and fast-paced engineering culture

📩 Interested? Send your CV to: hiring@startappz.com

Or tag someone who might be a great fit!

We can’t wait to meet you!

#JoinUs #AndroidDeveloper #SeniorAndroidDeveloper #TechJobs #RemoteCareers #Startappz #WeAreHiring

We're Hiring! Business Development Manager in KSA

Startappz — Wed, 19 Feb 2025 08:40:38 GMT

Job Title: Business Development Manager (Saudi Arabia)

Location: Riyadh, Saudi Arabia

Type: Full-time, Basic Salary & Commission-Based

About Us:

We are a leading service provider specializing in Telco solutions, delivering innovative, secure, and efficient systems tailored to the needs of telecom operators, banks, and enterprises. Our mission is to empower our clients with cutting-edge technology and exceptional service.

We are seeking a dynamic Business Development Manager to join our team and drive growth by expanding our presence in Saudi Arabia. This role will focus on identifying new opportunities, building strategic partnerships, and achieving sales targets in alignment with our expertise in Telco services.

Key Responsibilities:

1. Strategic Development & Planning:

• Develop and execute a clear vision and strategy to position our Telco services as market leaders.

• Create monthly, quarterly, and yearly plans and targets in alignment with company goals, presenting them to the executive team.

2. Lead Generation & Sales:

• Leverage industry knowledge to identify potential opportunities in the Telco, banking, and enterprise sectors.

• Initiate, nurture, and follow up on leads to ensure consistent pipeline development.

• Collaborate with cross-functional teams to create tailored proposals and presentations to secure high-value deals.

• Achieve and exceed sales targets through a commission-based structure.

3. Market & Client Insights:

• Analyze and understand customer pain points, market trends, and competitor offerings to shape business strategy.

• Gather feedback from potential and existing clients, relaying insights to management for product and service improvement.

4. Pricing & Cost Analysis:

• Understand the company’s cost structure and pricing mechanisms to create competitive yet profitable proposals.

5. Client Engagement:

• Develop and maintain strong relationships with key stakeholders, decision-makers, and clients to drive repeat business.

• Represent the company at industry events, conferences, and client meetings across Saudi Arabia and the GCC.

6. Long-Term Growth:

• Collaborate with the management team to shape the company’s mid-to-long-term growth strategy.

• Work with the internal team to develop “hit lists” and targeted sales strategies, utilizing a variety of sales kits and marketing tools.

Key Qualifications:

• Proven Track Record: Demonstrated experience in business development, sales, or account management within the Telco, banking, or technology sectors.

• Industry Knowledge: Deep understanding of Telco solutions, digital transformation, and enterprise technologies.

• Networking Ability: Established network of contacts in Saudi Arabia’s telecom, banking, or enterprise sectors is highly preferred.

• Sales-Driven: Results-oriented mindset with a focus on meeting and exceeding sales targets.

• Communication Skills: Exceptional verbal and written communication skills in both English and Arabic.

• Flexibility: Willingness to travel frequently within Saudi Arabia and the GCC.

• Cultural Understanding: Knowledge of the Saudi business environment and culture is essential.

Compensation:

• This position is commission-driven with uncapped earning potential, offering significant rewards for high performance.

• Additional incentives for achieving long-term growth targets or securing high-value contracts.

Why Join Us?

• Innovative Solutions: Be part of a company that drives cutting-edge Telco innovation.

• High Growth Potential: Unlock significant earnings through a performance-driven structure.

• Regional Impact: Play a pivotal role in shaping the Telco landscape in Saudi Arabia and beyond.

Does this job description align with your expectations? Let me know if there are any specific points or aspects you’d like to add or modify!

Join us and be part of an innovative team shaping the future!

If interested please send your resume to hiring@startappz.com !

Up and running with Prismic

Divyanshu Dhruw — Wed, 05 Feb 2025 06:30:05 GMT

Prismic is a cloud-based headless Content Management System (CMS) that allows businesses to efficiently manage their online content. It is designed to be user-friendly, making it accessible to both developers and content creators.

Slice Machine: Prismic uses a unique tool that allows you to create reusable components, called slices, for your website. This makes it faster to build and update pages with minimal coding. Similar to a storybook, a slice can be developed and previewed in isolation with mock data before being used as a building block in pages.

In this tutorial, we will make a simple Flower catalogue in two languages. The basic features of this site:

Header
Footer
Menu
NextJS
Tailwind CSS

Pages:

Homepage with hero
Flower Details page
About Page

Slices:

Homepage Hero
Flower Card
Flower Details
Flower Post

By the end of this tutorial, you'll see how powerful and easy it is to develop and maintain a website built with Prismic.

Understanding the different entities involved

The learning curve of Prismic development is pretty steep. It’s important to understand the different components involved in the development process otherwise nothing will make sense.

Github Account
Prismic Dashboard
Prismic Repository
Prismic CMS Dashboard
Local Development Environment
1. Frontend
2. Slice Machine
3. Slice Machine Simulator

Github Account

Why?

All the following components are connected to each other via github login only.
The Frontend code (in our case NextJS) will be stored in Github.

Prismic Dashboard

This is the dashboard provided by Prismic for managing Prismic Repository and Prismic CMS:

Prismic Repository

Prismic Repository will be created inside the Prismic Dashboard. Prismic repository will contain all the slices and pages which we will develop in our Slice Machine. The only thing we need to do here is create a repository, delete a repository and push changes.

Prismic CMS Dashboard

By clicking on the name of the Prismic Repository in Prismic Dashboard, the user will land in Prismic CMS. From this CMS dashboard the user can create pages, use the slices created in the slice machine, put up content and publish them.

Local Development Environment
1. Frontend Code : The place where the entire frontend code will reside, in our case NextJS. Here we will style individual slices.
2. Slice Machine: Using slice machine, we will create slices, model and page structure (Data Structure). We will create slices here and push to the Prismic repository via GUI itself.
3. Slice Machine Simulator: The slices we will create, we can preview them here with mock data. The Simulator will also reflect the UI changes we will do in the local frontend code.

Initialize the Project

This step will set up the basic Next.js project, integrate Slice Machine (a tool provided by Prismic) into the Next.js project, and connect the project to the remote Prismic repository using your Git account.

At the Prismic End

1. Create an account in github.com

2. Create account in prismic.io with GitHub

3. Login into GitHub via cli

4. In Prismic Dashboard, create a new repository with your preferred Framework - Next / Nuxt or Sveltekit

5. Select Next.js , Prismic will give you three options: Minimal Starter, Full Website Demo, Connect your own Web App . Choose Connect your own Web App.

6. Fill up the details of your new Repository and select the pricing plan.

7. Clicking on Create Repository will create a Prismic repository for you, and then redirect to the Prismic CMS Dashboard connected to this repository. You will get a new URL to manage this dashboard.

8. Click on Get started, it will ask for Language preference:

9. Since this is a newly built dashboard without any Slices, Pages and Custom Types, it will look like this:

In Local Machine

Go to your development folder and execute the following command. This will create a NextJS project of latest version (While writing the latest NextJS version is 15)

npx create-next-app@latest prismic-flower-catalogue

It will prompt you with a series of questions. We’ll go with the default options, as the best practices are already preselected.

Open prismic-flower-catalogue in your favorite code editor (We will use VSCode).

Our next task is to connect this stock NextJS project to the Prismic Repository we created in previous section. Execute following command to install slice machine and configure it:

npx @slicemachine/init@latest

You can select an existing repository or create a new one from here also.

Post selection of repository, it will initialize everything to connect to the selected Prismic repository.

The command will automatically run the slice machine. If it does not start automatically, you can start it by command npm run slice machine  The slice machine will start running in http://localhost:9999/ It looks like this:  

By executing all the steps above, package.json and package.lock.json will get modified, and following new files and folders will be created:

prismicio-types.d.ts : Do not edit this file. It contains types of core slice machine code.
slicemachine.config.json : This file contains the repository and simulator URL.
src/app/api/ This is standard NextJS folder, but all the APIs files related to slice machine simulator will be added here. Do not change any of the autogenerated files here.
src/app/slice-simulator : /src/app is standard NextJS folder, in this slicemachine-simulator will contain all the code for running slice machine. Do not make any changes in these files.
src/prismicio.ts : This file has a lot of code to run the Prismic system. The only thing we need to care of in this file is Prismic Routes. As we add new pages to our project, this file will need to be updated accordingly.
src/slices/ : All the slices we create in future will be stored here.

In this section, we have created a basic Next.js project with Slice Machine connected to our Prismic repository. In the next section, we will create slices, which are the building blocks of the Prismic ecosystem.

Slice Creation

Page Type (Single or Reusable) results in a rendered website page
A page can be created using Slices and Custom types
The end user is free to use any slice which the developer has created, everything will be automatically rendered by Slice Machine

For our project, we will create following slices:

Homepage Hero Slice
Flower Card
Flower Details
Flower Post

We will go in detailed steps for the first slice only. Rest all the slices can be created by following same steps. We will provide the schema screenshots for guidance.

Create Slices

Visit the slice machine interface http://localhost:9999/slices and Click on ‘Create One’

Note: Both Node dev environment and slicemahcine need to be running in the local machine.

We will create a slice for the Hero Section, which will include a title, tagline, and an image. Click on Add a field to see all the elements that can be added to this slice according to the requirements. For this slice, we need to add a Text, Rich Text, and Image field. After adding these three fields, it should look like this:

Clicking the "Simulate" button at the top right will open the Slice Machine simulator. This allows you to preview how the slice looks in isolation. You can use the simulator to develop the UI of individual slices. This action will also automatically generate the following files in the Next.js project:

src/slices/HomepageHero/index.tsx : This is the main HTML & CSS part of this slice. All the styling and UI change we need to do for this slice, we need to do it in this
src/slices/HomepageHero/mocks.json : This will contain mock data to help Slice Simulator
src/slices/HomepageHero/model.json : This is the data structure of this slice. Do not touch this file. This file will keep changing as we add or change fields in slices.

And it will modify following files:

prismicio-types.d.ts : Automatic addition of types of new Slice
src/slices/index.ts : Newly created slice will be registered in this file

Push changes of Slice Machine to Prismic Repository

All the push to the Prismic repository will be done via Slice Machine GUI interface only. No command line push. You can click on Review Changes , then click on Push button to push all the changes to Prismic Repository. Unless all the changes are not pushed in the Prismic Repo, they will not be available in the Prismic CMS Dashboard for content management.

Styling the slice and adding using data

We need to make changes in src/slices/HeroSection/index.tsx autogenerated file for adding styling. Before that, just a one time task to add the src/slices folder in tailwind.config.ts so that we can use tailwind styling in all our slices.

Default JSX of src/slices/HomepageHero/index.tsx file:

const HomepageHero: FC = ({ slice }) => {
 return (
   
     Placeholder component for homepage_hero (variation: {slice.variation})
     Slices
   
 );
};

In order to use the Data fields, Prismic provide code snippets. Go to slice machine, click on the slice, then toggle the code Show code Snippets

Toggling code snippets will give the fields as well as the Prismic recommended component to use in the frontend code. Code of src/slices/HomepageHero/index.tsx after adding simple styling and data fields:

const HomepageHero: FC = ({ slice }) => {
 return (
   
     
       
         
           
             {slice.primary.hero_title}
             
           
         
         
       
     
   
 );
};

Custom Type Creation (Single)

Some data may not fit into any specific category. For such cases, we can create a custom type. In our case, we can store the logo, company name, and navigation as a custom type. This allows us to use them in both the header and footer. Since these items are singular, we will create a Single Type. To do this, go to Custom Types in the left sidebar and create a new one:

The empty custom type will look like this:

We can use both static data and slices here. We will use Repeatable Group to create navigation

Finally it will look like this after adding all the fields:

Review the changes and push via GUI.

Populating Data in Prismic CMS - 1

Once our pages and slices are set up and pushed to the Prismic repository, we need to populate the data via Prismic CMS. You can access the Prismic CMS from the link provided in Slicemachine:

Click on Create a new page , it will show all the Page types and Custom Types which have been pushed in the Prismic Repository.

Click on CommonData, the empty common data will look like this:

Here, We used Gemini to create a beautiful logo, and I think it has done a great job!

After populating the content:

Once you are done populating the data, you can save and publish to production via GUI.

Styling the Layout

Usually a website is divided into different sections. We can create a common wrapper for sections and use them in all the slices. So create a file src/components/Container.tsx and paste following code in this file:

type ContainerProps = {
 htmlTag?: React.ElementType;
 className?: string;
 children: React.ReactNode;
};
function Container({
 children,
 htmlTag: Tag = 'section',
 className,
 ...restProps
}: ContainerProps) {
 return (
   
     {children}
   
 );
}
export default Container;

We will need to add the header and footer first before coding the page. So create files under src/components/Header.tsx and src/components/Footer.tsx

We will use the data populated in CommonData here. Head back to your local Slicemachine and open CommonData. On the top right, you'll see a Show Code Snippets toggle. Enabling this will display all the necessary code snippets for individual fields, using Prismic's recommended components.

We will use above code snippets in our header and footer:

Header.tsx

import React from 'react';
import { createClient } from '@/prismicio';
import { PrismicNextImage, PrismicNextLink } from '@prismicio/next';
import Container from './Container';
import Link from 'next/link';
async function Header() {
 const client = createClient();
 const { data } = await client.getSingle('commondata');
 return (
   
     
       
         
           
           {data.site_name}
         
       
       
         
           {data.navigation.map((item) => (
             
               
                 {item.name}
               
             
           ))}
         
       
     
   
 );
}
export default Header;

Footer.tsx

import React from 'react';
import { createClient } from '@/prismicio';
import { PrismicNextImage, PrismicNextLink } from '@prismicio/next';
import Link from 'next/link';
import Container from './Container';
async function Footer() {
 const client = createClient();
 const { data } = await client.getSingle('commondata');
 return (
   
     
       
         
       
       
         © {new Date().getFullYear()} {data.site_name}
       
       
         {data.navigation.map(({ name, link }) => (
           
             
           
         ))}
       
     
   
 );
}
export default Footer;

NOTE: createClient is a function provided by Prismic themselves. We need to use createClient to fetch data from the Prismic Backend.

Add header and footer in the layout.tsx file (Completely NextJS thing, nothing to do with Prismic)

export default function RootLayout({
 children,
}: Readonly<{
 children: React.ReactNode;
}>) {
 return (
   
     
       
       {children}
       
     
   
 );
}

Replace the code in global.css file with following css code:

@tailwind base;
@tailwind components;
@tailwind utilities;
body {
 @apply text-slate-600;
}

Once done, the website should look like this:

Creating a Page Type

We need to create page types that will use slices to generate actual web page content. To do this, go to Page Types and create a new page.

Page can be of reusable type (For example say Blog post / Plan details) or it can be of single type. Since there will be only one home page, we will go with Single Type. It will look like this when new:

In the above UI, there are two fields, Static Zone - it is the data specific to this page only, and slice zone, we can use the slices we create above here.

Adding Single Slices

We will add the hero section to our homepage. Follow the same process: review the changes and push them to the Prismic repository via the UI. By default, Prismic provides fields for SEO and meta in the second tab. However, if we need additional fields for the meta, we can add them.

Populating Data in Prismic CMS -2

We will add content in the Home Page. Head to the Prismic CMS dashboard via the link in the slice machine. Click on Create a new page. This time it will show option of homepage also:

The page is empty right now. You can add slice from left:

After adding HeroSection and its content

Once done, click on save and then publish it.

Styling Page and Using CMS Data

Once all the data is Populated in the Prismic CMS, head back to slice machine in localhost. Go to Page types and click the page. There is a button on top which will show Page snippet:

You can choose to follow the instructions given for file creation, or decide by yourself which page you want to render. Since we are creating homepage, we will not follow instructions and make change in the default homepage of NextJS src/app/page.tsx

The page will look like this:

We now have the Header and Footer, which are using data from the Prismic CMS, along with the homepage that incorporates the Hero Section slice.

By this stage, the fundamentals of our website are in place. Now, we need to develop the remaining slices and integrate them into the site.

Creating Flower Card Slice

Here are the fields added for the Flower Card slice. You can refer to the previous sections for a detailed step-by-step guide on creating a slice.

Paste below code in src/slices/FlowerCard/index.tsx :

import { FC } from 'react';
import { Content } from '@prismicio/client';
import { PrismicRichText, SliceComponentProps } from '@prismicio/react';
import { PrismicNextImage, PrismicNextLink } from '@prismicio/next';
import Container from '@/components/Container';
/**
* Props for `FlowerCard`.
*/
export type FlowerCardProps = SliceComponentProps;
/**
* Component for "FlowerCard" Slices.
*/
const FlowerCard: FC = ({ slice }) => {
 return (
   
     
       
       
         {slice.primary.heading}
         
         
           {slice.primary.link_label}
         
       
     
   
 );
};
export default FlowerCard;

Creating Flower Details Slice

Paste following code in src/slices/FlowerDetails/index.tsx :

import { FC } from 'react';
import { Content } from '@prismicio/client';
import { PrismicRichText, SliceComponentProps } from '@prismicio/react';
import { PrismicNextImage } from '@prismicio/next';
import Container from '@/components/Container';
/**
* Props for `FlowerDetails`.
*/
export type FlowerDetailsProps =
 SliceComponentProps;
/**
* Component for "FlowerDetails" Slices.
*/
const FlowerDetails: FC = ({ slice }) => {
 return (
   
     {slice.primary.name}
     
     
       
          Scientific Name: {slice.primary.scientific_name}
       
       
          Climate: {slice.primary.climate}
       
       
          Countries:
         {' '}
       
       
         
       
     
   
 );
};
export default FlowerDetails;

Adding Flower Card Slice in Homepage

In the slice machine (http://localhost:9999/page-types/homepage ) then add FlowerCard slice.

Creating New Dynamic Page

Our homepage is a single type, but to display the details of individual flowers, we’ll need a dynamic page. This will include the Flower Details Slice. In Slice Machine, go to Page Types, click on Create, and then select Reusable Types.

Adding Flower Details Slice in Dynamic page

Push all the changes via GUI.

Frontend Changes to Handle Dynamic Page

Create a file src/app/[uid]/page.tsx and paste following code (Hint: this is also autogenerated by slice machine 😉 ) :

import { Metadata } from "next";
import { notFound } from "next/navigation";
import { isFilled, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { createClient } from "@/prismicio";
import { components } from "@/slices";
type Params = { uid: string };
export default async function Page({ params }: { params: Promise }) {
 const { uid } = await params;
 const client = createClient();
 const page = await client.getByUID("page", uid).catch(() => notFound());
 return ;
}
export async function generateMetadata({
 params,
}: {
 params: Promise;
}): Promise {
 const { uid } = await params;
 const client = createClient();
 const page = await client.getByUID("page", uid).catch(() => notFound());
 return {
   title: page.data.meta_title,
   description: page.data.meta_description,
   openGraph: {
     title: isFilled.keyText(page.data.meta_title)
       ? page.data.meta_title
       : undefined,
     description: isFilled.keyText(page.data.meta_description)
       ? page.data.meta_description
       : undefined,
     images: isFilled.image(page.data.meta_image)
       ? [asImageSrc(page.data.meta_image)]
       : undefined,
   },
 };
}
export async function generateStaticParams() {
 const client = createClient();
 const pages = await client.getAllByType("page");
 return pages.map((page) => {
   return { uid: page.uid };
 });
}

Now, in order to handle the dynamic routes, we need to make changes in src/prismicio.ts also. Open this file and uncomment following code block related to routes:

const routes: prismic.ClientConfig["routes"] = [
 // Examples:
 {
   type: "homepage",
   path: "/",
 },
 {
   type: "page",
   path: "/:uid",
 },
];

By clicking on any more information button, you’ll get redirected to dynamic page with Flower Details Slice:

Adding Internationalization

Prismic CMS Updates

This could be the trickiest part of this section. Prismic supports multiple languages. In your Prismic Dashboard, go to Settings then Translations & Locales.

You will see all the locales supported here. You can add language of your preference here. In our case we will select Arabic (UAE):

The content manager can switch between languages from the dropdown in the left:

Code Changes for i18n

Step 1: We need to add middleware that will detect the selected language and modify subsequent network requests based on the chosen locale:
File: src/middleware.ts

// ./src/middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { createClient } from '@/prismicio';
export async function middleware(request: NextRequest) {
 const client = createClient();
 const repository = await client.getRepository();
 const locales = repository.languages.map((lang) => lang.id);
 const defaultLocale = locales[0];
 // Check if there is any supported locale in the pathname
 const { pathname } = request.nextUrl;
 const pathnameIsMissingLocale = locales.every(
   (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
 );
 // Redirect to default locale if there is no supported locale prefix
 if (pathnameIsMissingLocale) {
   return NextResponse.rewrite(
     new URL(`/${defaultLocale}${pathname}`, request.url)
   );
 }
}
export const config = {
 // Don’t change the URL of Next.js assets starting with _next
 matcher: ['/((?!_next).*)'],
};

Step 2: Next step, we need to update our routes in prismicio.ts to handle the language parameter in the URL:

const routes: prismic.ClientConfig['routes'] = [
 {
   type: 'page',
   uid: 'home',
   path: '/:lang?',
 },
 {
   type: 'page',
   path: '/:lang?/:uid',
 },
];

Step 3: Update folder structure of src/app to handle the dynamic lang. The new folder structure under src/app should look like this:

Step 4: Update src/app/[lang]/[uid]/page.tsx , add query of lang in request functions. Almost all the fetch functions provided by Prismic createClient provide a feature to pass language as a parameter. So the difference will look like this:

Final code:

import { Metadata } from "next";
import { notFound } from "next/navigation";
import { isFilled, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { createClient } from "@/prismicio";
import { components } from "@/slices";
type Params = { uid: string, lang: string };
export default async function Page({ params }: { params: Promise }) {
 const { uid } = await params;
 const client = createClient();
 //@ts-expect-error types not updated
 const page = await client.getByUID("page", uid, { lang: params.lang }).catch(() => notFound());
 return ;
}
export async function generateMetadata({
 params,
}: {
 params: Promise;
}): Promise {
 const { uid } = await params;
 const client = createClient();
 //@ts-expect-error types not updated
 const page = await client.getByUID("page", uid, { lang: params.lang }).catch(() => notFound());
 return {
   title: page.data.meta_title,
   description: page.data.meta_description,
   openGraph: {
     title: isFilled.keyText(page.data.meta_title)
       ? page.data.meta_title
       : undefined,
     description: isFilled.keyText(page.data.meta_description)
       ? page.data.meta_description
       : undefined,
     images: isFilled.image(page.data.meta_image)
       ? [asImageSrc(page.data.meta_image)]
       : undefined,
   },
 };
}
export async function generateStaticParams() {
 const client = createClient();
 const pages = await client.getAllByType("page");
 return pages.map((page) => {
   return { uid: page.uid };
 });
}

Step 5: Same thing we need to do for src/app/[lang]/page.tsx to handle locale. Final code:

import { Metadata } from 'next';
import { isFilled, asImageSrc } from '@prismicio/client';
import { SliceZone } from '@prismicio/react';
import { createClient } from '@/prismicio';
import { components } from '@/slices';
type Params = { lang: string };
export default async function Page({ params }: { params: Promise }) {
 const client = createClient();
 const { lang } = await params;
 const page = await client.getSingle('homepage', { lang });
 return ;
}
export async function generateMetadata({
 params,
}: {
 params: Promise;
}): Promise {
 const client = createClient();
 const { lang } = await params;
 const page = await client.getSingle('homepage', { lang });
 return {
   title: page.data.meta_title,
   description: page.data.meta_description,
   openGraph: {
     title: isFilled.keyText(page.data.meta_title)
       ? page.data.meta_title
       : undefined,
     description: isFilled.keyText(page.data.meta_description)
       ? page.data.meta_description
       : undefined,
     images: isFilled.image(page.data.meta_image)
       ? [asImageSrc(page.data.meta_image)]
       : undefined,
   },
 };
}

Right to Left

Since we have added Arabic and English languages, we need to support both Left to Right and Right to Left. English is taken care of by default, but for Arabic we need to make some code changes. We need to take care of two attributes lang and dir in the html tag. How to do this?

We need to access [lang] dynamic parameters and decide on the above two values. At this point we can move our src/app/layout.tsx to src/app/[lang]/layout.tsx location. Reason - we need to access [lang] variable. Then paste following code in layout.tsx :

import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import '../globals.css';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
const geistSans = Geist({
 variable: '--font-geist-sans',
 subsets: ['latin'],
});
const geistMono = Geist_Mono({
 variable: '--font-geist-mono',
 subsets: ['latin'],
});
export const metadata: Metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
};
type Params = { lang: string };
export default async function RootLayout({
 children,
 params,
}: Readonly<{
 children: React.ReactNode;
 params: Promise;
}>) {
 const { lang } = await params;
 return (
   
     
       
       {children}
       
     
   
 );
}

If everything has been done correctly, then you shall be able to see the website in both English and Arabic (after populating the content in both languages of course):

Add Language Switcher

Now that we have added two languages, we can give a simple language switcher. Create a file src/utils/getLocales.ts , this will get all the locales added in the Prismic CMS:

// ./src/utils/getLocales.ts
import { Client, Content } from '@prismicio/client';
export async function getLocales(client: Client) {
 const [repository] = await Promise.all([client.getRepository()]);
 return repository.languages;
}

And then add a new component src/components/LanguageSwitcher.tsx :

'use client';
import { PrismicNextLink } from '@prismicio/next';
interface LanguageSwitcherProps {
 locales: {
   id: string;
   name: string;
   is_master: boolean;
 }[];
}
const localeLabels = {
 'en-us': 'EN',
 'ar-ae': 'AR',
};
export const LanguageSwitcher = ({ locales }: LanguageSwitcherProps) => {
 return (
   
     🌐
     
       {locales.map((locale) => (
         
           
             {localeLabels[locale.id as keyof typeof localeLabels] ||
               locale.id}
           
         
       ))}
     
   
 );
};

Add this new component in the Header.tsx :

       
         
           {data.navigation.map((item) => (
             
               
                 {item.name}
               
             
           ))}

Now we have a functional language switcher.

Creating About Page

The last page remaining is the About page. We’ll keep it simple, with a title, an image, a paragraph, and a few team members. The AboutSlice looks like this: (Please refer to the first slice creation section if you have any questions or confusion regarding slicecreation).

As usual, it will create a src/slices/AboutSlice/index.tsx file for Slice styling. Paste following code in this file:

import { FC } from 'react';
import { Content } from '@prismicio/client';
import { PrismicRichText, SliceComponentProps } from '@prismicio/react';
import Container from '@/components/Container';
import { PrismicNextImage } from '@prismicio/next';
/**
* Props for `AboutSlice`.
*/
export type AboutSliceProps = SliceComponentProps;
/**
* Component for "AboutSlice" Slices.
*/
const AboutSlice: FC = ({ slice }) => {
 return (
   
     
        {slice.primary.title}
       
       
         
       
       
         {slice.primary.team_members.map((item) => (
           
             
             
               {item.team_member_name}
             
             {item.team_member_designation}
           
         ))}
       
     
   
 );
};
export default AboutSlice;

Now add this slice in the Page type and push via GUI.

This is where the power of slices comes in. You don’t need to do anything extra. Simply create a new page for the About section and use the new AboutSlice. No additional coding is required. The page will be created automatically, and the slice will appear as expected.

So this was a simple website we created using NextJS, Prismic, and Tailwind. The project has been deployed in Vercel, you can access it via https://prismic-flower-catalog.vercel.app/

If you get stuck at any point, you can refer to the source code of the completed project source code: https://github.com/Dhruw/prismic-flower-catalog

Give it a try and feel free to share your thoughts in the comments below!

Two big wins where telecom operators gain with a partner like Startappz

Ahmad Hajeer — Thu, 23 Jan 2025 11:17:46 GMT

Throughout my journey at Startappz, we worked with telecom operators to solve complex business and technical challenges. One thing I’ve learned is that partnering with a specialized company like Startappz offers telecoms a "distinct advantage" over working with typical software development houses.

The telecom digital industry is complex, its success needs a deep understanding of: OSS/BSS systems, CRM systems, Network Management Platforms, VAS platforms, eSIM and Entitlement Management, Billing and Charging Systems, IoT and Connected Device Integrations, and more.

With this expertise, two big wins where telecom operators gain with a partner like Startappz:

📌 Seamless Integrations

Telecom systems are intricate and interdependent. At Startappz, we ensure that every solution we develop integrates seamlessly. This minimizes disruption, optimizes efficiency, and accelerates ROI.

📌 Accelerated Time-to-Market

Speed is the game's name, especially in the highly competitive world of the telecom industry. With telecom processes, systems, and best practices already understood by Startappz, we can deliver solutions quickly and safely. Be it launching a new service or upgrading existing platforms, our speed allows operators to stay ahead of the game.

Here are some examples of how our expertise translates into real results faster than what I have ever seen:

📌 eSIM Entitlement for Wearable Devices

We developed an entitlement server for frictionless eSIM activation on wearables, establishing the operator as the leader in the field of connected devices.

📌 Building a new telecom digital Service from Scratch

not once and from the ground, Startappz collaborated with a new telecom in launching their service. We designed future-proof platforms considering seamless integration and scalability based on their requirements.

📌 Auction System for Vanity Numbers

We developed a dedicated auction system for premium vanity numbers, helping operators earn additional revenue streams by creating interest among the customer base.

📌 IoT Connectivity Solutions

With growing market demand for IoT services, we assisted telecom operators in implementing scalable solutions for smart homes, automotive systems, and IoT in enterprises, creating new growth avenues for rapidly expanding sectors.

📌 Multi-Device Bundling

Through new revenue models, including shared plans across devices and premium VAS, we help operators boost ARPU while extending more value to customers.

These examples illustrate that working with a company like Startappz is much more than software development, it is about the empowerment of telecom operators toward innovation, optimization, and strategic growth. When your partner knows your business back to front and their solutions come together in an optimized way to speed up results, that's when you open up possibilities way beyond technology.

To all telecom operators out there: If you require a partner to transform and thrive, we would be happy to get in touch and tell you more about what we can achieve together.

تقليل الاجتماعات لتطوير المنتجات وزيادة الإنتاجية

Startappz — Mon, 20 Jan 2025 11:28:33 GMT

في أحد المؤتمرات التي حضرتها مؤخراً حول تطوير المنتجات ، تم التأكيد في العديد من المحاضرات على أهمية تخصيص أيام خالية من الاجتماعات لتعزيز النشاط والإنتاجية. يوفر ذلك فرصة للتجريب، وإجراء التكرارات السريعة، واكتساب المعرفة، وإجراء التنقيحات، مما يسهم في نهاية المطاف في تقليل المخاطر المرتبطة بتطوير المنتجات.

لقد تأملت في كيفية تسهيل تحقيق هذا الهدف بشكل أفضل لفرقنا - إذ أن تقليل عدد الاجتماعات يتيح المزيد من الوقت للعمل الفعلي. ومع ذلك، أؤمن بضرورة تحقيق توازن بين تعزيز الإنتاجية، وضمان الجودة، وتعزيز التعلم، وتحقيق التوافق. فهذه العناصر تعد من الفوائد المهمة التي تنشأ من التعاون المنتظم، سواء كان ذلك من خلال التنسيق مع الفريق، أو مناقشة تفاصيل المشكلات بشكل جماعي.

إليك بعض التوصيات العملية:

هل من الضروري أن يكون اجتماعًا؟ نحن في ستارت آبز نعمل عن بُعد بشكل كامل، وغالبًا ما نتوزع عبر مناطق زمنية مختلفة. هل يمكن استبدال النقاش بسلسلة رسائل عبر Slack؟ هذا النهج يضمن الشمولية، حيث يتيح للجميع فرصة المساهمة في الوقت الذي يناسبهم. كما يوفر للفريق مرجعًا واضحًا يمكن العودة إليه لمراجعة الأفكار وتحقيق الوضوح عند الحاجة في المستقبل القريب.

اجعل الاجتماعات مختصرة، لكن لا تتردد في مناقشة التفاصيل المهمة عند الحاجة. فعندما تبدأ مؤشرات عدم التوافق أو العوائق بالظهور داخل الفريق، فإن تركها دون معالجة سيزيد من تعقيدها مع مرور الوقت، مما يؤدي إلى مشكلات أكبر تؤثر على الكفاءة وتسبب إهدارًا إضافيًا للوقت في المستقبل. خصص وقتًا للتوافق على الرؤية والنهج لضمان سلاسة في العمل وتجنب هذه العقبات.

حدد جدول أعمال واضحًا ونتيجة مرجوة لكل اجتماع. تحمل مسؤولية تحقيق هذا الهدف، وشجع الآخرين على الالتزام بنفس النهج! ابدأ الاجتماع بتذكير الجميع بالهدف الأساسي لضمان التوافق. فمن السهل جدًا الانحراف عن المسار. تأكد من دخولك للاجتماع بخطة واضحة والخروج منه بنتيجة ملموسة، أو على الأقل بخطوات عملية تالية يتم الاتفاق عليها.

الحضور اختياري. دع الحاضرين يقررون بأنفسهم ما إذا كانوا بحاجة لحضور اجتماع معين. الفرق المتفاعلة ستتخذ القرار الأنسب لهم ولعبء عملهم. ثق في فريق العمل.

سعادة الفرق أمر بالغ الأهمية أيضًا! فالفرق السعيدة أكثر إنتاجية بنسبة 12%، وبيئة العمل الإيجابية تعزز الإبداع بمقدار ثلاثة أضعاف، مما يساهم في المزيد من الابتكار وحل المشكلات؛ وكلاهما من العوامل الأساسية في تطوير المنتجات. خصص وقتًا للتواصل المنتظم، الاختياري، وغير الرسمي بين أعضاء الفريق. بالنسبة للفرق البعيدة، أوصي بالبدء بكاسرات الجليد مرة في الأسبوع في بداية الاجتماعات الاسترجاعية. كما يمكنك تجربة مكالمة مدتها 15 دقيقة عدة مرات في الأسبوع، ليتمكن الأعضاء من الانضمام والدردشة بشكل غير رسمي.

Hitting the Road: My Digital Nomad Kit & Coworking Space Confessions

Moski — Mon, 13 Jan 2025 06:23:48 GMT

So, you're thinking of ditching the desk for the open road? Welcome to the digital nomad life! It's a thrilling adventure, but let's be real, finding the perfect work-from-anywhere setup can be a bit of a rollercoaster.

Packing Light: My Minimalist Nomad Kit

First things first: your gear. You need the essentials, but you don't want to lug around a suitcase full of gadgets. My must-haves?

My trusty laptop: The heart of my operation. I chose a lightweight beast that can handle anything I throw at it.
Noise-canceling headphones: Seriously, a lifesaver in bustling cafes and noisy coworking spaces.
Portable charger: Because let's face it, finding a reliable outlet can be a game of chance.
A tiny travel router: For those sketchy hotel Wi-Fi situations (you know the ones).
A universal travel adapter: So I can charge my stuff anywhere on the planet.
A comfortable backpack: To carry it all in style (and comfort!).

Coworking Spaces: The Good, the Bad, and the Ugly

Coworking spaces can be amazing – a community vibe, a change of scenery, and sometimes even free coffee. But let's not sugarcoat it:

The Noise: Background chatter, loud phone calls, and even the click-clack of keyboards can be seriously distracting.
The "Open Office" Dilemma: Confidentiality? What's that?
The Google Review Gamble: You never really know what you're getting into until you're already there.
The "Perfect Spot" Quest: Finding the sweet spot with good Wi-Fi, comfy seating, and enough privacy is a constant battle.

Tips for Surviving the Nomad Life:

Pack light, travel smart: Embrace the minimalist lifestyle. You'll thank yourself later.
Cloud storage is your friend: Keep your files online and free up space on your devices.
Digital tools are your secret weapons: From project management apps to video conferencing platforms, there's a tool for everything.

Our Recommended Equipment

Over-the-ear headphones; WH-1000XM5 Wireless Noise Cancelling Headphones

Rechargeable mouse; Logitech Mx Master 3s

Tech Bag; TECH FOLIO BACKPACK

Battery pack; UGREEN Nexode 140W 25,000mAh

Data; eSim or local SIM Card

At the time of writing, I have no affiliation with any of these products. They work for me.

Pioneering a First-of-Its-Kind Innovation in the UAE!

Startappz — Wed, 08 Jan 2025 05:28:27 GMT

Startappz successfully implemented facial recognition technology for instant eSIM activation for tourists, the first solution to be launched in the UAE!
This revolutionary feature enables tourists to digitally activate their eSIM before even leaving the airport. A real game changer for delivering secure, seamless, and innovative mobile experiences on the go!

What we’ve accomplished:

Integrating with UAE Ministry of Interior systems, which guarantees essential integration to sync up-to-date tourist details to be used for activation
Working with authorities with the end goal of getting full compliance while pushing boundaries for innovations.
App and web friendly flow to make sure users can join and activate their eSIM in a couple of minutes.

This will constitute a landmark creating an unmatched benchmark for telecom innovations in the UAE hence showing the importance of uniting cutting-edge technology with customer-centric designing.At Startappz, we strive for our market to empower redefining industries by creating phenomenal digital experiences.

App Development

Startappz — Tue, 26 Nov 2024 05:47:58 GMT

Starting a new project and wondering which tech stack to use? Native, PWA, web app builders, or maybe an AI-powered solution?

At StartAppz, we’ve tested various technologies to help you assess your needs. Let’s take you on a journey through the pros and cons of each option and where they shine.

App Builder Websites

Pros:

Fast Development: Pre-designed templates and drag-and-drop interfaces make it quick to create an app.
No Programming Knowledge Required (Sometimes): Platforms like Adalo, Thunkable, or Glide allow non-developers to build apps.
Great for MVPs: Ideal for testing an idea before committing to full development.

Cons:

Locked-in Solution: Most platforms don’t allow you to export source code (e.g., Glide apps are bound to Glide’s infrastructure).
Limited Features: Complex features, like advanced machine learning, are often unsupported.
Custom Code is Limited: For example, while Bubble supports some plugins, it doesn’t allow deep customization like direct code.

Technical Example:

If you use Thunkable, creating a form app can be done in hours, but adding offline capabilities or custom animations will require switching to native development.

Custom PWA (Progressive Web Apps)

Pros:

Cost-effective: Uses web technologies like HTML, CSS, and JavaScript to create apps that work on multiple platforms.
Cross-platform: A single codebase runs on browsers, desktops, and mobiles.
SEO-Friendly: Since PWAs are web-based, search engines can index them, which is helpful for discoverability.

Cons:

Limited Access to Native Features: PWAs don’t have full access to device APIs, like Bluetooth or NFC. Visit What PWA Can Do Today for a detailed list.
Limited User Engagement: PWAs rely on browser-based push notifications, which are less engaging than native ones.
Relatively New: Features like the Web Share API or File System Access API aren’t fully supported across all browsers, especially Safari on iOS.

Technical Example:

PWAs like Twitter Lite offer fast performance but don’t support high-end features like offline video processing.

Native Apps

Pros:

Fast & Efficient: Written directly in platform languages like Kotlin (Android) or Swift (iOS), native apps can utilize device hardware like GPUs for smooth performance.
Polished UX: Native UI components look and feel like they belong on the platform.
High Performance: Ideal for graphics-intensive tasks like gaming or video editing.

Cons:

Slower Development: Separate teams are required for Android and iOS, increasing time.
Maintenance Costs: Regular updates are needed to stay compatible with OS changes.
Higher Costs: Typically requires larger budgets for development and ongoing support.

Technical Example:

A Telco App like Virgin Mobile UAE is developed natively because it requires high performance, real-time synchronization, and low latency, and plenty of customization.

Cross-Platform Native Apps

Pros:

Write Once, Deploy Everywhere: Frameworks like Flutter, React Native, and Kotlin Multiplatform reduce time by sharing code across platforms.
Cost-efficient: Shared codebase reduces development costs significantly.

Cons:

Platform-independent UX: It may not feel truly native to users. For instance, React Native apps often use custom navigation patterns.
Performance Glitches: Some frameworks, like React Native, can introduce performance issues with heavy animations or hardware access.

Technical Example:

Apps like Facebook Ads Manager (React Native) and Google Ads (Flutter) balance the trade-offs of cross-platform development for business apps.

When to Use Native Apps, PWA, or App Builders

App Builders: Ideal for prototyping or creating a lightweight app with basic functionality.

Use Case: A small business creating a catalog or content app.
PWA: Best when you need to go to market quickly, have a limited budget, or focus on discoverability.

Use Case: News/media apps (e.g., The Washington Post), lightweight e-commerce (e.g., AliExpress PWA), or travel guides.
Native Apps: For polished, complex apps that leverage device features like sensors, cameras, or AR/VR.

Use Case: Gaming apps, fintech apps (e.g., Robinhood), or social media apps (e.g., Snapchat).
Cross-Platform Apps: When aiming to reduce costs while maintaining moderate performance and UX.

Use Case: Business tools, social media apps, or shopping apps like Shopify.

Deep Dive: App Builders, PWA, Cross-Platform or Native?

When developing a mobile app, the choice of technology can drastically affect your app's cost, UX and performance.

App Builder Websites

Platforms like Adalo, Thunkable, and Glide allow rapid app creation using drag-and-drop interfaces. However, these platforms abstract away the code, limiting flexibility.

Technical Limitation Example: If you want to add an offline caching mechanism, app builders typically don’t allow access to native APIs like Room (Android) or Core Data (iOS).

Custom PWAs (Progressive Web Apps)

PWAs use standard web technologies but can mimic native apps via features like service workers and Web APIs. They’re ideal for apps that don’t rely on intensive hardware.

Key Features:

Service Workers for offline capabilities.
Manifest.json for app-like appearance and installability.

PWA Code Snippet:

// Service Worker for caching assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then((cache) => {
      return cache.addAll(['/index.html', '/styles.css', '/app.js']);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Technical Limitation Example: PWAs cannot access hardware features like Bluetooth or Sensors. For instance, a Health app requiring access to health data and sensors is better suited for native development.

Native Apps

Native apps are developed using platform-specific languages like Kotlin/Java for Android and Swift/Objective-C for iOS. They provide unmatched performance and access to hardware features.

Technical Comparison: Push Notifications

Native apps handle push notifications through platform-specific services like Firebase Cloud Messaging (FCM) for Android and APNs for iOS.

Android (Native Push Notification Example):

// Firebase Messaging Service
class MyFirebaseMessagingService : FirebaseMessagingService() {
    override fun onMessageReceived(remoteMessage: RemoteMessage) {
        val notification = NotificationCompat.Builder(this, "CHANNEL_ID")
            .setContentTitle(remoteMessage.notification?.title)
            .setContentText(remoteMessage.notification?.body)
            .setSmallIcon(R.drawable.ic_notification)
            .build()

        NotificationManagerCompat.from(this).notify(1, notification)
    }
}

iOS (Swift Push Notification Example):

// Register for notifications in AppDelegate
func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    let token = deviceToken.map { String(format: "%02.2hhx", $0) }.joined()
    print("APNs token: \(token)")
}

Cross-Platform Native Apps

Cross-platform frameworks like React Native, Flutter, and Kotlin Multiplatform (KMP) aim to reduce development time while achieving near-native performance.

React Native

React Native uses JavaScript with a native bridge to render UI components. It’s a good choice for simple business apps.

React Native Code Snippet:

import React from 'react';
import { View, Text, Button } from 'react-native';

export default function App() {
  return (
    
      Hello, React Native!

Limitation Example:
React Native can introduce performance bottlenecks in animation-heavy apps because of the bridge between JavaScript and native threads. Frameworks like Flutter bypass this by compiling directly to native code.

Flutter

Flutter uses Dart and offers a rich set of widgets for customizable UIs. It’s more performant than React Native for animations and graphical interfaces.

Flutter Code Snippet:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter App")),
        body: Center(
          child: ElevatedButton(
            onPressed: () => print("Button Pressed"),
            child: Text("Click Me"),
          ),
        ),
      ),
    );
  }
}

Use Case Example:
The Google Ads app was rebuilt using Flutter to take advantage of its smooth animations and faster updates.

Kotlin Multiplatform (KMP)

KMP allows sharing business logic across platforms while writing native UI for each. This strikes a balance between code sharing and native experience. Also, Compose UI can be used to write single UI for all framework.

KMP Code Snippet (Shared Logic):


class ApiService() {  
    private val httpClient: HttpClient = HttpClient {
        install(ContentNegotiation) {
            json(get())
        }
    }

    fun fetchDashboard(): Flow> {  
	    return flow {  
			val response = httpClient.get("${BuildConfig.API_URL}/dashboard")  
			emit(response.body())  
		}  
	} 
}

To use ApiService in iOS, we can export all network/data layer as framweork and import it in xcode.

Native-Specific Code (iOS):


class DashboardViewModel : ObservableObject {
    @Published var items: [DashboardItem] = []
    
    private let apiService = ApiService()
    
    func loadDashboard() {
        apiService.fetchDashboard { items in
            if let items = items {
                self.items = items
            }
        }
    }
}

struct DashboardUIView: View {
    
    @ObservedObject var viewModel = DashboardViewModel()
    
    let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.locale = Locale.current
        formatter.dateFormat = "dd/MM/yyyy - HH:mm"
        return formatter
    }()

    var body: some View {
        NavigationStack {
               List(viewModel.items) { item in
                   HStack {
                       AsyncImage(url: URL(string: item.avatar)) { phase in
                           switch phase {
                           case .empty:
                               ProgressView().frame(width: 50, height: 50)
                           case .success(let image):
                               image
                                   .resizable()
                                   .clipShape(Circle())
                                   .frame(width: 50, height: 50)
                           case .failure(_):
                               Circle()
                                   .fill(Color.gray)
                                   .frame(width: 50, height: 50)
                                   .overlay {
                                       Text("X").foregroundColor(.white)
                                   }
                           @unknown default:
                               EmptyView()
                           }
                       }

                       VStack(alignment: .leading) {
                           Text(item.name)
                               .font(.headline)
                           
                           Text(String(format: NSLocalizedString("lbl_created_at", comment: ""), dateFormatter.string(from: item.createdAt)))
                               .font(.subheadline)
                               .foregroundColor(.gray)
                       }
                   }
               }
               .navigationTitle(title)
               .onAppear {
                   viewModel.loadDashboard()
               }
           }
       }
}

Native-Specific Code (Android):

class DashboardViewModel(
    dashboardRepository: DashboardRepository,
) : ViewModel() {

    val state = dashboardRepository.dashboardList()
        .map { items -> MainState.Success(items) }
        .catch { MainState.Error }
        .stateIn(
            scope = viewModelScope,
            started = SharingStarted.WhileSubscribed(5_000),
            initialValue = MainState.Loading
        )
}

sealed class MainState {
    data object Loading : MainState()
    data class Success(val items: List) : MainState()
    data object Error : MainState()
}

@Composable
fun DashboardScreen(
    viewModel: DashboardViewModel,
) {

    val state by viewModel.state.collectAsStateWithLifecycle()

    when (state) {
        MainState.Error -> // show error
        MainState.Loading -> // show loading
        is MainState.Success -> ListContent(
            list = (state as MainState.Success).items,
        )
    }
}


@Composable
fun ListContent(
    modifier: Modifier = Modifier,
    list: List
) {
    LazyColumn(
        modifier = modifier.fillMaxSize().padding(16.dp)
    ) {
        items(list) { item ->
            Row(modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)) {
                AsyncImage(
                    modifier = Modifier.clip(CircleShape).size(50.dp),
                    model = item.avatar,
                    contentDescription = item.name,
                    placeholder = painterResource(R.drawable.placeholder),
                    error = painterResource(R.drawable.placeholder),
                )

                Spacer(Modifier.width(10.dp))

                Column {
                    Text(
                        text = item.name,
                        textAlign = TextAlign.Start,
                        style = MaterialTheme.typography.titleMedium
                    )
                    Text(
                        text = item.createdAt,
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.outline
                    )
                }
            }
        }
    }
}

In addition to use native UI systems, we can use CMP Compose UI multiplatform, which is based on Android Compose UI to share the UI as well. Note that, CMP in beta for iOS and experimental for Web.

Using Expect / Actual

KMP offers expect/actual mechanism to write platform specific code, for example to get the screen width;

KMP code (shared)

expect fun getScreenWidth(): Dp

Android Source code

actual fun getScreenWidth(): Dp = LocalConfiguration.current.screenWidthDp.dp

iOS Source code

actual fun getScreenWidth(): Dp = LocalWindowInfo.current.containerSize.width.pxToPoint().dp

Use Case Example:
Netflix uses KMP to share caching and analytics code between its Android and iOS apps.

Comparative Table: PWA vs Native vs Cross-Platform

Feature	PWA	Native	Cross-Platform
Performance	Moderate	High	Moderate-High
Access to Hardware	Limited	Full	Partial (depends on framework)
Development Cost	Low	High	Moderate
Codebase	Single (Web)	Separate for iOS/Android	Shared for most logic
Framework Examples	N/A	Kotlin/Swift	React Native, Flutter, KMP
Use Cases	News, blogs, basic e-commerce	Gaming, Telcos, social media	Business apps, simple games

Conclusion

Your choice depends on the project’s scope:

Use App Builders for quick MVPs or proof-of-concept apps.
Use PWAs for lightweight, SEO-friendly apps with minimal hardware dependencies.
Use Native Apps for performance-critical, hardware-intensive applications.
Use Cross-Platform frameworks for budget-conscious projects with moderate complexity.

Which option is best for your next project? It depends on your goals, budget, and technical requirements. Hopefully, this guide gives you a clearer perspective to make an informed choice.

This post was written and edited by Hisham Ghatasheh our Senior Mobile Solution Architect.

Prototype & Test: The Shortcut to User-Centric Design

Startappz — Mon, 10 Jun 2024 08:17:59 GMT

The prototype is a method that makes you create the story to test, validate, find the gaps, and refine the experience and the context to be suitable for the target audience to achieve their required task.

for me, I prefer to do it right after the diagram flow and define the user stories by mapping all the steps to check his reaction by using your services, if the service left the assumed Impact and the impression that you are looking for or not,

So by doing usability testing on your product/ service, you always get the proper feedback and precision for each design U.I. element that should be revised to enhance to be more fitted and appealing for your users.

The moderator usability testing gives you more insights as a qualitative result; So you can ask, have more impressions, and lead you to the right decisions in the designs. But the thing here is that you have to check what they are doing and match it with their feedback because sometimes they don’t match.

Each usability test is associated with a task; you can’t start testing your product by not giving a specific task flow to let you have accurate remarks and suggestions.

And the more important thing while doing the test is to prepare your assessment sheet and give weights for each usability aspect to be filled by the observer.

In addition to the above, you have to consider the limitations that occur by using the prototype tools, so you can't cover all the cases in the same flow; your focus will be on the happy scenarios/ flows because you can’t mimic the actual experience with all what have from issues.

the benefit of the prototype and usability testing is that it’s easy to do and has a tremendous:

Saving time
Quick enhancement
Find all the uncovered cases
Help all the contributors to imagine the product/ service flow.
Check multiple experiences as A/B testing to adopt the succeeded experience.
Help you to create the proper context and content.

In my challenge activity for this week, I created a prototype for an onboarding wireframe to let user register their account in the app.

As I mentioned above, I covered the happy scenario, despite I got many remarks that helped me to improve the flow, like:

I added one input to enter the password for login. However, I tend to make it easy to remember, So I limited this to four digits in the registration; after receiving feedback, I made four separate inputs for each number.

Another thing here is Adding More descriptions under each input to explain why I’m asking for this input, to avoid any confusion, and to give the credibility feel.

Figma File/ prototype screens

Prototype:

Reference cited:

Experience, W.L. in R.-B.U. (2016). Checklist for Planning Usability Studies. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/usability-test-checklist/ [Accessed 13 Mar. 2022].

Source: https://medium.com/@naderalazzeh/week-7-prototyping-usability-50e9baca617band

From Empathy to Elegance: Mastering Visual Design for a Powerful UX

Startappz — Mon, 10 Jun 2024 08:14:32 GMT

Visual design is the spirit of the UX as a final stage, to polish your user experience and empower it by adapting the visual design principles, giving the user the recognizability of what I meant by communicating the user empathy.

The elements of visual designs are many, like colors, spaces, fonts, structure, images, etc.

And to manage all these aspects, some principles help you to find your way by using and adapting these design principles, which are :

Unity and Harmony
Balance
Hierarchy
Scale and Proportion
Dominance and Emphasis
Similarity and Contrast

All these principles/guidance rules are connected and affect your whole design approach, so as a reflection of my exercise, I couldn't do the hierarchy by doing the Dominance and emphasis alone, so it's tough to start doing these criteria one by one. from my exercise you have to do them all in one time to have the desired look and experience, and you can add above of that, especially in the digital environments the way of the (transitions and interactions)

So I divided the screen into two parts using the golden ratio to have this aesthetic & balanced view in positioning the design elements and the emphasis aspect.

So at the upper part (dark gray), I used it to emphasize the communication area with the user by displaying all the due bills, alerts, advertisements, budgeting tips, personalized messages, etc. This is the most dynamic area.

Here, you can see the hierarchy of the design components from the above to the end, starting with the communication part, then the budgeting component that shows the balance according to assigned categories, then the details of his accounts from the main account until the points balance that he gained.

At the bottom of the screen, I placed the tab action bar as global navigation, which should appear all around the app screens at the first level screens.

For the color palette, I tried many options. I went through many iterations to find the harmony and the combination, so by doing my research on related apps in the same financial industry, I found that Blue is a good indicator of finance activity; it gives the user the feeling of trust and honesty as it instills confidence and inspires feelings of loyalty and integrity. In addition, the JOD currency has two denominations in blue color.

The colors used are as the following:

Guidelines

White color: the base to make the spaces and clarity, especially some many numbers and elements should be readable.

Dark Blue color: emphasizes some areas and distinguishes between screen parts, and I used it for text links and icons all over the app.

Light Blue: I used to highlight some areas and text on the dark blue background to give me more ability to hierarchy my content.

Dark Gray: I used the text numbers on the white background.

Light Gray: separators/ lines and inputs.

Green/ Red colors: I used them to recognize between your transaction IN/OUT money easily, and these colors are heavily utilized in the financial industry for the same purpose.

Orange color: the action design elements in my design and the interaction component tell the user what to do and guide him to end his task—also, the orange color indicator of activity, confirming, and power.

The typography elements affect the user experience on many sides, like readability, credibility, and feeling. By choosing Avenir font, I benefited from the font weights; this font has many weights that helped me emphasize and hierarch my design elements.

Also, Avenir font is a modern font from google library and is compatible with different digital platforms, so it helps with consistency.

And here we go as a final result for the main landing screen (Dashboard), complying with all the design principles and using fonts and colors to have the desired impact and shape my design clearly from the User perspective.

Reference cited:

Esposito, E. (2018). The Golden Ratio — What It Is and How to Use It in Design. [online] www.invisionapp.com. Available at: https://www.invisionapp.com/inside-design/golden-ratio-designers/ [Accessed 24 Mar. 2022].

Aragon, K. (2013). 15 Color Palettes from Top Financial Websites. [online] The Daily Egg. Available at: https://www.crazyegg.com/blog/color-palettes-financial/ [Accessed 27 Mar. 2022].

Gordon, K. (2020). 5 Principles of Visual-Design in UX. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/principles-visual-design/.

Bruna (2020). Meaning of the Color Blue: Symbolism, Common Uses, & More. [online] Colors Explained. Available at: https://www.colorsexplained.com/color-blue-meaning-of-the-color-blue/.

Today's Eggspert (2018). 16 Great Website Color Palettes to Increase Engagement (2019). [online] The Daily Egg. Available at: https://www.crazyegg.com/blog/website-color-palettes/ [Accessed 27 Mar. 2022].

Source: https://bootcamp.uxdesign.cc/week-8-visual-design-ac5d29d7f41d

Responsive layout/ Grid system

Startappz — Mon, 10 Jun 2024 07:01:07 GMT

Nowadays, websites are used by users on different platforms and devices. And the good news most of these sites, especially the services and extensive sites, have followed a responsive layout to serve user needs and behaviors.

So in this week's topic, we went over these approaches to find out the difference between them, and how these structures will impact your design layout, and affect your user target.

To start a responsive layout, you have to structure your design using a grid system. This will assist you in arranging your design elements to avoid un justifying design objects issues from spaces, padding, and margins and help the user easily distinguish your whole design parts.

The most usable grid system is the 8pt grid, Why?

It's easy to scale your design using this logic of 8pt, especially in the different sizes of mobile screens. And it's not only used for the design layout or the main container, it's used for all the design elements, text and icons, and the verticals spaces as well, which gives complete control of all the design elements.

The 8pt is the multiples of 8:

(8)multiples

Using this principle for icons, text, and images and your whole design canvas, you will find your design balanced and save a lot of time by arranging and finding the appropriate spaces; also, it's compatible with differences in screens' mobile proportions.

Grid layout

Here is a sample of the used icons using 8pt on mobile devices screen (four columns)

Mobile screen Grid:

For the bottom action bar, the max-width of the icon size is 32px offset around it is 40px, the padding width 32px between them.

Despite the fact that my service is a native mobile app, especially at this stage as an MVP, I will check the web to see how many changes I have to be aligned with user needs and the hierarchy; the result came as the following.

Web grid layout

From size 1440px, the wide desktop screen until the size 960px using the 8pt grid system, I don't have changes in the designs for rearranging design and the structure.

And from size 600px until 320px, it back again to the mobile view to cover these screen sizes, so as a result, I don't need to do an adaptive design, so the responsive design is fair enough for me by using a column shifter as a responsive method by removing the action bottom bar to be a left column navigational.

320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV.

Screen responsive layout

Reference cited:

Vitsky (2021). The Comprehensive 8pt Grid Guide. [online] The Startup. Available at: https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179 [Accessed 30 Mar. 2022].

Rumman (2022). Everything You Should Know About 8 Point Grid System in UX Design. [online] Medium. Available at: https://uxplanet.org/everything-you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d#:~:text=The%20principle%20of%208pt%20Grid [Accessed 30 Mar. 2022].

Mads Soegaard (2019). Adaptive vs. Responsive Design. [online] The Interaction Design Foundation. Available at: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design [Accessed 30 Mar. 2022].

Eygi, C. (2020). Media Query CSS Tutorial — Standard Resolutions, CSS Breakpoints, and Target Phone Sizes. [online] freeCodeCamp.org. Available at: https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/ [Accessed 30 Mar. 2022].

Source: https://medium.com/design-bootcamp/week-9-responsive-layout-grid-system-b6faa7bfd7aa