Reflecting On Using Figma UI Prototype Maker For A Requirements Engineering Course
TAGS: software; Figma; UI design; app prototype;
Why I Did This
For our Requirements Engineering course at university, we went through the process of how to
make a Vision document and a Software Requirements Specification (SRS) for imaginary app
ideas that other lab groups had made up. For my team, we chose to act as the software
contractors for an interactive map app of the UAlberta campus. This app would connect with
the user’s university schedule and provide suggested walking routes between its classes. It
would be tailored to incorporate construction, path/elevator outages, or high traffic
(similar to how Google Maps works for construction).
The course’s project was designed to incorporate software requirements concepts and give us
an idea of how to interact with customers on getting their requirements for a software
product. While it was a great project for understanding those concepts, it was also an
opportunity to use Figma for the prototyping part of the software development presentation.
At the end of the project timeline, we were to present to our ‘clients’ a prototype of the
product (typically as a picture walkthrough), but I knew about Figma from previous use
during a UI/UX hackathon, so I wanted to use it for this project.
Figma can be setup to do some nifty animations.
Design Walkthrough
Parts: Figma
Here is a video of myself demoing the app for the presentation. There is no audio nor instructions, but it’s merely a demonstration of the lifelike abilities to demo app functionalities; if you can somewhat follow along, I am demoing how the app shows you, through user/guest login, a map of the campus with room-to-room directions that can generate from search or schedule input. The app also has a feature for reporting new construction in campus areas.
Here is a video of myself demoing the app for the presentation. There is no audio nor
I have also linked the original Figma demo where you can interactively click on the app
(instead of being limited to my above demo video):
https://www.figma.com/proto/...
Lessons Learned and Future Changes
Figma first, then code. No surprise here that Figma is great tool for demoing a product that has not been coded yet. I recommend it for anyone who wants to ‘preview’ their apps.References
Figma: https://www.figma.com/
Figma interactive demo:
https://www.figma.com/proto/...