Awala Website Redesign

Designed and built a multi-language marketing website for Awala, a technology to circumvent Internet censorship, significantly increasing traffic by 4x and user engagement by 35% in 2 months.

Awala Website Redesign Hero Image

Project overview

Awala is both a platform for building apps that can exchange data without the internet, and a VPN that directly targets the Great Firewall of China, effectively bypassing all forms of network-level censorship. With the commercial launch of Awala VPN, Awala needed to reposition its website as a strategic marketing platform to support product adoption and market entry.

Role

• Lead the end-to-end UX/UI design process, from concept ideation and research market to user flows, wireframing, prototyping, visual design, and implementation.

• Created custom illustrations and animations.

• Communicated design concepts, and rationale effectively to stakeholders.

• Collaborated closely with the Tech Lead to build the responsive multilingual site.

• Established and maintained a design system.

• Co-led the go-to-market (GTM) strategy with a strong focus on SEO.

Visit live website

Tools

Figma, FigmaJam, Illustrator, Cursor, Astro, TailwindCSS, React, Jira, Google Analytics, Google Search Console, Ahrefs.

Timeline

April - June 2024

Team

Product Designer, Tech Lead

Problem statement

As the original Awala website was solely as an informational resource, its limitations became more apparent with the introduction of Awala VPN as a commercial product. It lacked the clarity, structure, and marketing focus needed to effectively drive awareness and adoption.

Additionally, dense text, poor visual hierarchy, limited content, and low SEO performance further contributed to low user engagement and minimal traffic.

Awala Wireframe

The goal

The primary goal of the redesign was to reposition Awala's website as a strategic marketing tool to support the commercial launch of Awala VPN. This meant moving beyond an informational experience to one that could clearly communicate product value, build brand and drive product adoption.

Design process

  • Conducted user and market research to understand the needs and pain points of the target audience, and identify industry opportunities for differentiation.
  • Worked closely with key stakeholder to align on the website goals and define the site's information architecture.
  • Based on research findings, I refined the site map and created low-fidelity wireframes to quickly visualise layout ideas and structure content effectively.
  • Iterated and refined the design progressively, paving the way for high-fidelity mockups.
  • Created a design system for the new website, ensuring a consistent and cohesive look and feel.
Awala Wireframes

Key design solutions

Clear, bold value proposition in the hero

The hero section had a simple content structure with bold, concise headlines to communicate Awala's purpose and benefits, including social proof (e.g. Mozilla Builders, Oxford) to build credibility.

Awala Wireframe
Awala Network

Modern visual design and branding

Crafted a bold visual identity using custom illustrations to balance the serious mission with a welcoming tone. I used bold headlines, generous whitespace, icons and a consistent color palette of deep blues and vibrant yellows to create visual contrast and clarity.

Strategic CTAs and conversion funnels

Strategically placed, high-contrast call-to-action buttons throughout the site encourage downloads and newsletter signups.

Awala CTA
VPN Hero

Interactive hero section on the Awala VPN page

To instantly communicate the core value of Awala VPN, I introduced a typing animation in the hero section that simulates real-time access to blocked platforms.

This interactive element quickly conveys utility, builds anticipation, and aligns with user needs.

Enhanced credibility and social proof

Added a personal founder message, highlighted reputable funders, and emphasized the open-source nature of the project to build trust.

Awala Wireframe
Awala Chinese

Designed for a multilingual audience

The website was designed and implemented to support multiple languages. This required careful consideration of layout adaptability, font choices, and language-specific nuances such as text expansion and directionality.

Key UI components were built to dynamically adjust across languages while preserving a consistent user experience.

Designed and built for all devices

Implemented a responsive design system that ensures a consistent and accessible experience across mobile, tablet, and desktop. This was essential for maximising reach and usability.

Awala Responsive

Site implementation

I built the fully responsive site using Astro, Tailwind CSS, and React, in close collaboration with the tech lead, who reviewed the code and provided technical guidance throughout the process.

I also integrated OG tags, JSON schema, and optimised the site for SEO by conducting keyword research with Ahrefs, refining titles and meta descriptions, and optimising images.

Project outcome

Within six months of launch, site traffic increased by 4X, and user engagement rose by 35%.