Build realistic, front-end prototypes with Angular

I’ve been using Angular every day to build realistic, front-end prototypes. I’ve used these prototypes to quickly validate ideas with real users. I wanted to share my experience in hopes of encouraging more designers and developers to adopt Angular for their prototyping needs.

One of my projects was to improve the search experience in Greentea, Google’s internal CRM. I wanted to explore grouping results by categories, so I built a prototype to test out that idea.

Search prototype for Greentea CRM

Angular for prototyping?

There are many prototyping tools in the marketplace today, and Angular isn’t one that usually comes to mind. I chose Angular for a few reasons:

1. Reusable code
2. Greentea CRM was built with Angular as its underlying framework. Using Angular to prototype meant our engineers could reuse my code in the production app.
3. Mature component library
4. With Angular Material, I was able to use pre-built UI components like this autocomplete form control without having to write one from scratch.
5. Supportive community

Faking search with real data

A search prototype that didn’t serve up real results wouldn’t be very convincing to the user. However, I didn’t have time to write a functional search API or connect to one either. Instead, I went with a useful trick I learned.

Use Google Sheets as a backend database

I created a spreadsheet and filled it with rows of search results. A benefit of using Sheets was that it provided my team and me with a user-friendly interface for populating data. Then, with some custom Apps Script, I pushed all edits to a Firebase Realtime Database. Finally, I wired up the Material autocomplete component to read from the database with AngularFire.

Search results powered by Google Sheets

A hosted prototype for user testing

I used Firebase Hosting to deploy the prototype to a publicly accessible URL. Once uploaded, I used that link to run remote user testing sessions over a video conference call. One of the benefits of a hosted prototype is that you can let your users interact with the prototype on their own while you observe their screen.

Remote user testing with a Firebase-hosted prototype

Measuring engagement

With Google Analytics, I was able to add custom events tracking to see how users were interacting with my prototype. This allowed me to see what users were searching for in real time. With this data, I was able to iterate on my category structure and test whether that had an impact on our click-through rates.

Visualizing search queries in Google Analytics

Conclusion

My team explored a few different ideas, and ultimately this prototype didn’t meet our expectations in terms of engagement. However, it served an important purpose in helping us understand what did and didn’t resonate with our users. By not investing too much time into building this prototype, it made it easier to cut and focus on more promising ideas.

After a year of using Angular, I can confidently say that it’s become a core tool in my design workflow and the fastest way for me to prototype with real data and incredible fidelity. Prototyping has improved my collaboration with engineers and helped my team build better products.

I wanted to share my experience in hopes of bringing more attention to Angular as a powerful prototyping tool. Hopefully, you found this article informative and feel encouraged to use it for your next design project.

#angular #web-development