PWABuilder
Case Study
Build and Package PWAs
PWA (Progressive Web Apps) are web apps that use progressive enhancements to give users an experience on par with native apps on Windows. PWABuilder is an open-source project that can help web developers like you build Progressive Web Apps (PWAs) and package them for app stores Microsoft, Apple, Google Play, and Meta Store on Windows in minutes!
My Role
I was the lead product designer responsible for optimizing the site architecture and brand for PWABuilder.com. I worked with my product manager and developers to collaboratively conduct user research to determine types of audiences. I was responsible for user personas, optimized site flow, user experience, feature functionality, branding, prototypes, and high-fidelity UI designs.
User Research and User Interviews
On the PWABuilder site, there are many issues as highlighted by anecdotal user interviews, user surveys, and macroscopic site data. All three modes of feedback tell a similar story, the site’s flow is often confusing and does not facilitate a smooth and intuitive development loop for PWA developers.
We determined 3 main types of users with different knowledge sets and intentions when landing on PWABuilder.com. They are PWA Inquirers (novice users), PWA developers (Intermediate users), and Store veterans(Advanced users). The current landing page does not properly capture and cater to most people landing on the site. Hence, our main goal was to cater to all our 3 audience groups and simplify the site architecture and backend so they can work across their audiences.
Linear Old Site Flow
Homepage Optimization
The new homepage now caters to all our target audiences. Above the fold section now has quick links to our documentation and dev tools on top of being able to package for the store by entering a link. We also added a section that builds trust in our brand as well as highlights specific brand studies that highlight the advantages of investing in building a PWA. The social section at the end helps grow our open-source community and keeps our users up-to-date on new features.
Report Card Page
Manifest Editor
The site is now modularly structured. You can improve your Manifest while still having access to packaging for stores. The flow is no longer linear and gives the user the flexibility to carry out their intended task. The various manifest fields are now grouped in tabs.
Packaging for stores
Custom Sign-Up/In Flow for Free Token Campaign
The next phase of PWABuilder involves the capability to sign in/up and have an account as well as score a free Developer Account for Windows.
Custom Iconography
Introducing new app capabilities to make your PWA feel more app-like. These icons will help improve discoverability and promote native-like app functions.
Scalable across Web and Mobile
