Ranna - Website and Digital Rebrand

Role / timeline / team / tools

• Role: Framer UX, frontend, graphic design.
• Timeline: Aug–Sep 2025.
• Team: Afzal, Hanif, owners.
• Tools: Framer, Figma, Photoshop/Illustrator, Next.js, CSS.
• Not included: hosting, payments, backend.

Checklist

• One clear hero CTA to start an order.
• Menu visible above the fold on all devices.
• Simple branch picker: location → pickup/delivery → menu.
• Consistent YumaPOS deep links for every dish.
• Dish cards show allergens, spice, kcal, price.
• Faster loads: compressed video and lighter images.
• Palette: red for action; black/white base; warm yellow accents.
• Type scale that reads well on small screens.
• High-contrast buttons and icons; fewer choices per step.

Applied from references

• One primary action per screen.
• Left-aligned headlines; short helper text.
• Header fixed to the container width.
• High-contrast buttons and chips.
• Filters visible on first scroll.
• Dish cards show allergens, kcal, price.

Skipped on purpose

• Heavy animations that add delay.
• Stacked CTAs competing in the hero.
• Crowded carousels and promo badges.
• Long story blocks above the menu.
• Low-contrast dark-on-dark palettes.

What to look for in the images

• Clean headers with a clear "Order Online".
• Filter chips placed before the grid.
• Card hierarchy: name → price → facts.
• Consistent icon sizes and button weight.

How this shaped Ranna

• Bold red for actions and key links.
• Black/white base to let food lead.
• Yellow accents used sparingly for spice cues.
• Card density tuned for thumb scanning.
• Mobile first; desktop keeps the same flow.

Early color and type explorations with the team.

Our team brainstormed color and typography approaches to balance bold action colors with readable text across all devices. We tested various red tones for appetite appeal, explored font weights for hierarchy, considered contrast ratios for accessibility, and evaluated readability on mobile. Ultimately, we selected a bold red for primary actions and links, paired with white/black for clean backgrounds, and subtle yellow accents for spice. Headlines are left-aligned with strong weight, and body text is readable at small sizes.

• Red = primary action and key links.
• White/black = clean base for photos.
• Yellow = spice accents, used lightly.
• Headline left-aligned, strong weight.
• Body type readable at small sizes.

• Implemented user testing insights for hero section layout, prioritizing clear messaging.
• Focused on a single, prominent call-to-action to guide user engagement.
• Relocated less critical information (e.g., reviews) below the fold to improve initial focus.

• Designed service presentation based on user feedback for clarity and appeal.
• Ensured visual hierarchy effectively guides users through available services.
• Optimized content placement to highlight key offerings and encourage exploration.

• Incorporated client feedback to refine navigation hierarchy and information architecture.
• Enhanced logo visibility and sharpness for brand consistency.
• Streamlined button labels to improve user comprehension and call-to-action effectiveness.

• Revised testimonial display for improved trustworthiness and impact.
• Ensured prominent placement of client feedback to build credibility.
• Focused on clear, concise presentation of testimonials for easy readability.

• Optimized contact form design for enhanced user experience and submission rates.
• Ensured all necessary contact information is easily accessible.
• Streamlined the contact process based on user feedback to minimize friction.

• Limiting choices reduced hesitation and backtracks.
• Framer variants sped up changes across breakpoints.
• Standard 16:9 exports kept thumbnails readable.

• Asset compression improved page speed on mobile.
• POS deep-link patterns reduced routing errors.

• Weekly reviews → faster decisions.
• Feedback → changes: header, hero, buttons.
• Fewer “how do I order?” calls.

• Branch flow clearer for staff.
• Shipped essentials first; polished after.
• Brand now matches the heat.