|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Redesigning our homepage to reflect Appwrite’s new positioning |
| 4 | +description: A behind-the-scenes look at how we redesigned the Appwrite homepage to reflect our evolution from a BaaS to an all-in-one open-source development platform. |
| 5 | +date: 2025-06-11 |
| 6 | +cover: /images/blog/appwrite-homepage-redesign/cover-image.png |
| 7 | +timeToRead: 08 |
| 8 | +author: sara-kaandorp |
| 9 | +category: design |
| 10 | +featured: false |
| 11 | +callToAction: true |
| 12 | +--- |
| 13 | + |
| 14 | +At Appwrite, we’ve grown from a Backend-as-a-Service into an open-source, all-in-one development platform. With the introduction of our newest product, Sites, we expanded our offering beyond backend services to include hosting. This shift meant our homepage needed to do more, it had to communicate the full breadth of what Appwrite now offers. |
| 15 | + |
| 16 | +# Phase 1: Setting the baseline |
| 17 | + |
| 18 | +Before jumping into design changes, we wanted to understand how the homepage was performing. That meant: |
| 19 | + |
| 20 | +- Recording baseline metrics of how our homepage was performing |
| 21 | +- Getting fresh insight into what kind of first impression our homepage was giving to developers who were new to Appwrite |
| 22 | + |
| 23 | +We ran a qualitative survey with 50 respondents who closely matched our target audience, but who were new to Appwrite. Instead of asking existing community members who already have a mental model of what Appwrite is, we wanted to get fresh insight into the first impression of a developer with no bias. The results were insightful. |
| 24 | + |
| 25 | +## What we heard: |
| 26 | + |
| 27 | +- Positive: People liked the clean layout and visual design. Many said the structure was easy to follow. |
| 28 | +- Confusing: Our messaging wasn’t clear enough. Some thought Appwrite was a DevOps tool, others a CMS, or just another Firebase clone. |
| 29 | + |
| 30 | +This validated what we suspected: while the design was polished, the story we told wasn’t fully landing. |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +# Phase 2: Iterating on the story |
| 35 | + |
| 36 | + |
| 37 | + |
| 38 | +Based on those findings, we created a new homepage design in Figma and ran a second qualitative survey—this time on the proposed design with renewed messaging. The results were encouraging. |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | +## What we improved: |
| 43 | + |
| 44 | +- **Backend setup clarity**: More users grasped what Appwrite offers, though some still wanted more detail on how the setup works. |
| 45 | +- **Scalability**: Surfaced more often in feedback, indicating stronger visibility. |
| 46 | +- **Feature awareness**: Users showed deeper engagement with our capabilities. |
| 47 | + |
| 48 | +# Phase 3: Final design |
| 49 | + |
| 50 | +We simplified our messaging further and focused on showing—not just telling—what Appwrite offers. We: |
| 51 | + |
| 52 | +- Added components that give a quick visual and conceptual overview of our offering, without requiring visitors to read everything. We honed in on different user behaviors: some people want a fast impression; others want to scroll deep. Our content now supports both. (This is backed by UX research—see Nielsen Norman Group's work on scanning vs. reading behaviors.) |
| 53 | + |
| 54 | + |
| 55 | + |
| 56 | +- Repositioned Appwrite from just a BaaS to a complete platform with Sites, our hosting solution, clearly integrated into the story. |
| 57 | + |
| 58 | +- Selected testimonials strategically—highlighting impact metrics like time saved, cost reduction, and scalability, to build credibility with both developers and founders. |
| 59 | + |
| 60 | + |
| 61 | + |
| 62 | +While the main aim was to improve the story that we were trying to convey, we also further improved our visual language. We did a few iterations to further simplify our visuals and worked on an animation style that feels more natural. In our old page, we had animations based on scroll behavior that slightly hijacked user control—something developers disliked. The new animations and microinteractions make the page feel alive without taking away from the main purpose: understanding the story of Appwrite. |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | +With all these changes, we moved into a final design iteration—the version that’s now live. |
| 67 | + |
| 68 | +# What’s next |
| 69 | + |
| 70 | +We'll continue to refine our new homepage. There are still headlines we want to test, feature explanations to expand on, and new ways we can illustrate how Appwrite works. |
| 71 | + |
| 72 | +Redesigning a homepage is about crafting the clearest possible introduction to your product. And that process doesn't end with this launch. |
| 73 | + |
0 commit comments