UI/UX: Legacy

BookletIntro.png

The Challenge

This app came to Joyful Machines from a professional who needed to collect, store, and report a massive amount of client information. The report would be exported to PDF for distribution.

The client also plans to get the app out into the hands of other professionals in the field.

The principal challenge of the design was that, while the app is very complex behind the scenes, it has to look and feel like an “app,” meaning easy (perchance even fun) to navigate and to use.

 

A solution that DIDN’T work

Our first approach was probably the most obvious, that the user would enter each piece of data into a field, as though they were entering it on paper. Thus:

BoringNames.png

I began building a few pages like this using Auto Constraints in the Xcode storyboard, but we soon realized the multiple problems:

  • Rigidity would not allow for future changes in design, number of data fields, etc.
  • We needed something more modular so that we could use one set of data as a component of the other
  • Data entry was going to be cumbersome with everything in different places and changing all the time.

So we had to find another solution…

 

What DID Work

Ironically, I used the rigid structures of hard numbers in XIB files to give flexibility. Each layout was similar to the one above, but each could be modified as needed. That is, I could modify these XIB files once, and they would show up in each location used. These xib files would then be nested into other XIB files for PDF export.

But this made a problem with data entry, because how could we make one universal entry system that would accept ANY KIND and AS MUCH data as was necessary for a particular case?

The answer was our seemingly simple – but deceptively complex – single page that changes according to the needs of the type of data being entered.

SingleEntryPage.png

A variety of entry modes can be used on this page as necessary.

The navigation /  progress buttons up top will animate to indicate the field the user is on, and it can also grow and shrink as more data is added.

Of course, I employed auto constraints to ensure that these layouts would work portrait or landscape on any size device.

Note pages 3 and 4, which display the pdf building real-time.

In this case, in addition to creating and managing the UX, I also developed the UI from scratch using no existing assets.

 

Conclusion

I was able to deliver the working app with could export to PDF with options for font, background, colors and cover. Another job complete, but with a ton of latitude to grow and modify it over time.

We round it out with a variety of custom borders and backgrounds I created so that a user can personalize the experience.

VarietyBordersBackgrounds.png

Job done. Time to go home and start something new in the morning.

Advertisements