The Foundation for Doc Finder
1.2 App Wireframe/Prototype
After the first week of my internship at Hasura, when I discussed my App Idea, It was time to make the building blocks for the upcoming weeks i.e The App wireframe/prototype.
Naturally, we would ask: What is a prototype and how is it different from a wireframe?
These all questions were surely popping into the intern’s mind but then Hasura came up with an excellent opportunity for the interns as they surprised us and came up with a Guest Lecture on Product Development by Alexis Piperides (CEO, Proto.io).In a nutshell, Design first, iterate with real users, build later — to match high customer expectations!
The concept of an MVP (Minimum Viable Product) is quite important here, MVP is a new product such as a web or mobile app designed with only the sufficient, or minimum, features needed to test the app in the right market and gain early interest from users and consumers.Starting with an MVP allows you to see how your web or mobile app will gain popularity with an audience of users before spending additional time and money adding all the features. If the MVP fails, you can stop development and production before wasting any more time and money on a product that will not gain traction with your consumers.
When we create the MVP it is important to:
- Market and test the MVP with your users and obtain user feedback.
- Grow the value of the MVP into a more fully functioning product by analyzing data and user feedback.
- Use Lean UX (User Experience) to put together the MVP to improve the product and gain stakeholder interest.
Wireframe :
According to Wikipedia,
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.
The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.In other words, it focuses on what a screen does, not what it looks like.Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications.
Prototype:
Similarly, A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.
It is a term used in a variety of contexts, including semantics, design, electronics, and software programming. A prototype is generally used to evaluate a new design to enhance precision by system analysts and users.
Prototyping serves to provide specifications for a real, working system rather than a theoretical one. In some design workflow models, creating a prototype (a process sometimes called materialization) is the step between the formalization and the evaluation of an idea.
Another perk of being an intern at Hasura, We were given a 30 day trial for using Proto.io. It is a tool to create fully-interactive high-fidelity prototypes that look and work exactly like your app should.
For a head start, you can learn about Proto.io below!
https://support.proto.io/hc/en-us/categories/202854148-Video-Academy-Beginners-Course
It provides 15 days free trial for everyone!
The Prototype for Doc Finder
The prototype can be found at the links given below:
The working prototype is hosted at the link below:
New users have to register first to proceed to the appointment details. If the user is already registered (has an account on the Doc Finder), then the patient has to click on ‘Login Instead’ and the Login Page opens. The patient can login to their account by entering E-mail Id and Password.
Apart from the Registration(Login/Register) screen, the prototype is divided into three screens:
- Patient Details: This screen is the fundamental screen for the web app in which the patient has to provide their details including Name, Age, Gender etc.Here, the patient has to write about their problem in brief which would be helpful for the doctor in examining the patient’s conditions, uploading the necessary medical record(if any). Choosing the preferred location is also added to add comfort to patient’s health so they do not have to travel much for visiting the Doctor.
2.Doctor Specializations: This screen contains a brief description of all kinds of doctors available on the app. This screen has been made so that it is convenient for the patients to select the speciality in which their health issue lies. This screen will be updated as the Doctors on the app are increased. Some of the specialities listed are Orthopedist, Gynaecologist, General Physician etc.
3.Booking the Appointment: In this screen, the registration of the patient is confirmed along with necessary details including Doctor’s Name and Specialization are mentioned.The user has the option to choose Time Slot and Location here.The user can either Book the appointment or go back from this screen.After clicking on Book Appointment, this screen moves to another state showing the Booking Details for the appointment.
This screen also provides an option to book another appointment redirecting the user to the Patient Details page.
Once the appointment is booked, the user can log out from the app which is available at the top right corner of every page for convenience.
Next Up
In the next week, I will talk about setting up development environment and the Hasura platform locally on your system. Also how to use Version Control Systems(VCS) such as Git.
