Early 2019

Senior UX/UI Designer

MIT HR · Visit ⟶

And I know I'm fakin' it, I'm not really makin' it.

MIT Childcare Center Scholarship

MIT offers a scholarship to children of MIT affiliates who attend the Technology Childcare Centers. The admins were managing the process by means of an old FileMaker app. The aim of this project was to move this process to Fiori, where it could integrate with the data already present in SAP.

⚠️ Please note that the mock API on Render likely needs to spin up when you visit the prototype. It can take up to ~10 seconds for the UI to get populated on the first load.

The project manager wanted to start work on the admin application, but as there was an existing paper-based process, I suggested to start with the applicant form. After all, this form collects the inputs. This outset naturally made us consider the process and associated data from the start, surfacing opportunities for improvement. Incidentally, I did not design the theme for the applicant/employee UI. It matches what was already in use for the employee benefit system UI.

Mockup of All Applications view. Mockup of Application detail with toolbar and highlighted change.

When data changes in SAP, such as an employee's salary, the scholarship amount might be impacted and an adjusted scholarship award needs to be issued. A vertical border prepended to the relevant application row in the All Applications list view (left) indicates the SAP system change to the admin.

Going into the Application Detail (right), the admin is presented with a toolbar fixed to the viewport's bottom edge. The card containing the change is highlighted with a border. Both employ orange to signify the connection.

Now the admin can draft a new award, see how the new award is affected by the SAP change and make any subsequent adjustments before approving a new award to go into effect or terminating the scholarship.

I started work on this application in Sketch, but as it became clear there would be a number of different states for the UI, I switched to HTML, CSS and jQuery.

Once we got to working on the admin application, it became obvious that a there would be a lot of variability in the UI to account for all different scenarios. Initially, I had again started work in Sketch, but abandoned it after a presentation of my work to the stakeholders and project team. There it became clear that static mockups were not getting the job done: almost everybody had a different mental model of how it would work, and confusion was abound. There is no gap presumption won’t fill. Never again, I thought, so I decided to prototype the admin interface. Initially, I planned on using React, but my manager was looking for development help on another legacy project that used AngularJS, so I used it on this project to get familiar with it.

I created a mock API JSON file with FakerJS that I served on Heroku (now Render) employing json-server. Using this API allowed me to easily show all scenarios in the UI.

Finally, I prototyped the application status interface, as it deals with the back and forth between applicant and admin taking both UIs as inputs.

I could not get the team to move away from adopting a rigorous waterfall based process: the developers wouldn’t start until I was “finished”. I would have much preferred to collaborate with a SAP Fiori developer, working as a pair for a while.

Still, given these circumstances, I was pleased with the outcomes of my approach. It really helped communication and decision making. Additionally, it serves as live documentation for the Fiori and ABAP developers, more effective than any wiki or written document can aspire to be.

Screenshot of a prototyped mock TCC childcare scholarship application.
Learning Modules (LMOD) Learning à la modular
Wild Peaches Get rich fast, build a yacht, sail faster than the wind