Client: “I want to develop a website for my real estate rental business where my staff can post and manage property listings. My clients can browse through the listings, short list any property and express their interest on the property by providing their info. Our staff can view client’s info and the properties they are interested in and contact them to proceed further.”
As a business analyst, how would you approach this need from the client? How would you elicit requirements and create solution?
It is required to elicit user interface requirements for the website and be able to visualize it and validate it with the client.
Wireframes come into play here to make this whole process faster and efficient.
What is a Wireframe? #
Wireframe is a technique used by Business Analysts to visualize user’s thoughts, preferences and requirements about User Interface (UI) and User Experience (UX) of a website or a mobile app.
Basically, it’s a Low Fidelity (low-fi) sketch / skeleton of a website or mobile app that helps a Business Analyst to validate and finalize UI/UX requirements and creates a strong foundation to develop Hi Fidelity (hi-fi) user interface designs called ‘Prototypes".
A wireframe consists of basic gray scale outline of essential components of a website or mobile app such as:
- Screen Layouts
- Navigation Bars
- Components of UI/UX design
- Interactive Elements
It is a powerful and iterative process where the wireframes are created, reviewed by stakeholders and kept on revising until they are finalized.
Steps to create a good wireframe #
Based on my experience, following are the steps to create good wireframes:
- Articulate User Interface Requirements
- Create Solution Outline
- Create Wireframes
- Review
- Iterate
Popular Wireframing Tools #
- Figma
- Adobe XD
- balsamiq
If you want to learn more about wireframes, check out this online course:
