Project Details

Motivation

The creative design process for a website begins with ideas describing the site's basic structure. This is most often a mockup, sketch, or wireframe. The same usually stands for academia as well. Someone learning web technologies will often use skeletal web pages or sketches.
With Sketch2HTML we aimed to speed up this process through a tool that understands and recognizes specific elements, and translates them to HTML code.

Design Solution

Sketch2HTML's design approach:

• Upload the hand-drawn sketch or wireframe to the UI.
• Input image is preprocessed, i.e, all shapes are cropped, and noise is removed from the image.
• Cropped objects are passed to the SVM model to be classified into specific HTML elements.
• This information is converted to HTML code, and elements positioned as drawn.
• Output page is displayed on the UI, ready for immediate download and use.

Project Timeline

Gantt Chart depicting the different phases of the project:

Literature Review

Implementation

I created the input data manually, and augmented it with transformed images. We then implemented the tool through these modules: Object Detection, SVM with Sklearn, HTML Factory to classify elements, Flask App, User Interface.

Key Features

My Contribution

• Designing and implementing the UI/UX of the application
• Creating and transforming various elements/pages as input data
• Implementing object detection, to identify elements on a page
• Writing unit tests for the UI using Selenium Web Driver
• Creating the roadmap and documentation, and presenting the final application

Testing

I implented unit tests for all UI features, using Selenium Web Driver on Google Chrome.

Outcomes and Learnings

• I learnt how to assess the feasibility of a solution, while keeping in mind technical constraints.
• I understood the importance of designing solutions while keeping the user at the forefront.

Documentation and Codebase

You can check out the project report I created at docs/Sketch2Html_ProjectReport.pdf.
Alternatively, you can take a look at the code repository at https://github.com/prernarao/Sketch2HTML

Do feel free to reach out to me if you would like to learn more about this project, I'd love to chat with you about it.

Project Details

My Contributions

What I contributed to this product so far:

• I improved the usability of existing versions of ZFP, by enhancing UI features used to manipulate the diagnostic images.
• Based on architecture and design discussions, I integrated ZFP with the required identity providers.
• I migrated APIs and features implemented in previous versions of ZFP, from the .NET framework to Java.
• I enhanced text translations, labelling, zooming, image manipulations, and other annotations on the front-end to make them universal, and more intuitive to use.
• I implemented Audit Logging for the product as per IHE requirements, to ensure patient information confidentiality.
• I owned and implemented a new feature to save manipulations and annotations on DICOM images.
• I fixed over 50 bugs, defects, and customer-raised issues.

Project Details

Team Members:

Prerna Rao, Varsha Venkatasubramanian, Vaani Sundaresh, Supriya R, Afreen A Noorani

Motivation

Often, when learning to program, students struggle with learning the many rules of syntax. Writing syntactically correct programs right from the beginning can result in a cognitive load on beginners. Additionally, for students who have minimal to no experience with technology, especially in a country like India where access to computers is a privilege, using an IDE environment to learn programming concepts can seem intimidating.
In this regard, it was a great opportunity for us to explore a better solution to improve CS-education for K-12 learners in India. I specifically wanted to create an environment that was mindful of the impact a tool like this could have on students from diverse backgrounds.
My team and I further studied the problem space, and decided on the problem statement we wanted to address.

Problem Statement

To create a visual programming environment that introduces children to problem-solving and programming concepts, while reducing syntax barriers.

As a solution, we chose to build AryaBota to introduce programming concepts in a visual and gamified manner, through level-wise puzzles. With simplified commands that progress through gradual syntax transitions, students can develop an understanding of basic programming concepts at their own pace. This can also provide them with foundations of instructional-thinking that are resilient to change, and can be applied to many programming languages.

User and Pedagogy Research

UI and UX Design

UX Design Process

UI Design Process

Formative Study and Testing

Feedback and Enhancements

We received the following feedback from our interviews and surveys:

• The facilitator was comfortable teaching with AryaBota, and would use it again ✅
• Students enjoyed the visual aspect of the tool ✅
• Students understood basics of instructional thinking ✅
• Students were confident with variables, assignment, and arithmetic in programming ✅
• Creating additional problem grids/questions was quick and easy ✅
• There needs to be wider range of puzzles, in order to provide more practice 🔁
• Include better, more detailed documentation or tutorials to support unguided learning 🔁
• Only relevant aspects of the transpiled Python code can be highlighted in order to avoid confusion 🔁
• Support customised syntax transitions based on the students' programming experience 🔁

We are currently incorporating this feedback, along with enhancements to our UI, to be tested in upcoming workshops. These workshops (yet to be scheduled) will be conducted for students aged between 10-16 years.

Key Features

1. Visual output of executed code, via a robot (named AryaBota) in a grid that follows input commands
2. Level-wise puzzles targeting different programming concepts in each level
3. Learning concepts through gradual syntax progressions in order to reduce cognitive load
4. Backward and forward compatibility of level-wise syntax
5. Choice to view/hide transpiled Python code
6. Configurable problem grids
7. Support for input in other languages (Kannada/Kanglish) – disabled in current prototype

Current State

Do feel free to reach out to me if you would like to learn more about the current status of the tool, I'd love to chat with you about it!

Project Details

My Contributions

What I contributed to this product:

• I collaborated with UX designers to design and implement 12 screens in the product.
• I owned and executed the development of user workflows within the application.
• I built 9 reusable UI components that are utilized in multiple screens and workflows.
• I helped integrate the product with third-party APIs.
• I participated in the verification and validation cycle for the product, and fixed various bugs and defects raised by the testing teams.
• I contributed to releasing the first Minimal Viable Product of this tool.
• I conducted 3 knowledge-transfer sessions to new team members.

What I Learnt From This Product

• I learnt more about how to assess the usability of a product, and incorporate feedback to improve the user experience of the product.
• I learnt the process, and rationale that goes behind designing the UI and UX of any product.
• I learnt how to implement software engineering principles, particularly Agile methodologies, when developing a software product.

Project Details

Team Members:

Prerna Rao, Juan Flores, Emily Bascom, Ruoxi Li

Motivation

Design Question

How might we generate an adaptive toolkit that can help transform a physical space to accommodate people with marginalized abilities?

User and Pedagogy Research

UI and UX Design

UX Design Process

Sitara Akka Foundation

Measuring Impact on 21st Century Skills

In March 2020, the pandemic came in as a bit of a curveball and had us rethinking our entire approach to education. Unlike most private institutions that moved their classes online, government-run schools lacked the technological infrastructure to do so. To sustain the we moved our classes online as well. I leveraged the knowledge I gained from the offline classes, to ease the children into this new online mode of learning. I also turned this into an opportunity to drive holistic growth in students by improving their ability to collaborate, create, and communicate.

Desire Society

Do feel free to reach out to me if you would like to contribute to or learn more about the work we do at Sitara Akka Foundation, I'd love to chat with you about it!