Area: User Interface, User Experience, Prototyping, Sketching, Product
Plexx was an application to deliver job training on your mobile device via video content. For over a year I worked on bringing the Plexx mobile application to life with a team. I worked side by side designer Victor Popov. My role was to define the design principles from our concept development research, create design briefs, sketch new interfaces, bring to users, capture feedback and insights, and repeat. The images below show the evolution of the design as we received user feedback and iterated on earlier concepts.
First concept mock-up
The original design and earlier name, LearnX capturing the core functionality
Second concept mock-up with index cards
We took a step back and focused on physical prototypes that we can use to move around and discuss the flow and experience within the application
Continuation of Mock Up 2
From my sketchbook
Drawings from my sketch book capturing the different user experiences and crazy ideas we were considering
Drawings from my sketchbook on physical triggers that would change the engagement with the application
More Drawings capturing the detailed interaction with video content that I created
User Experience flow
Drawing of the user flow that I created that determined the flow of the second mock-up of the product
Third digital mock up
Improved generation of the interface design, also check out the evolution of our name
User observations flicking through the mock-up of the mobile application at a ‘Hackathon’
Fourth mock-up after user feedback sessions
Next generation of designs
Sample of design critique documents. There were hundreds of these.
Sketching session at the iLab with Victor Popov
Minimum Viable Products
Once we refined the design to a point were we needed a ‘functional’ prototype, we began creating a ‘minimum viable product’ (MVP) to test with users on their phones. This one I created using a responsive WordPress template
The second iteration of the MVP was created using ‘Mobile’ by Conduit
We recruited a developer to the team, started developing an iOS version of the application. When we were overwhelmed with designs and flows I got up on a chair and started making the flow on the wall to guide the team and generate discussion for what we needed to prioritize and how we can make the design simpler.
The crew working on the mobile application development one late night. From left to right, myself, Victor Popov, and Sheldon Trotman
Made with Victor Popov
Database Schemas
As they created designs of the front end I started creating database schemas of the current and future back-end database layout
I created the proposed future state diagram of the database schema in order to make sure the application was scalable and data integrity was upheld as we grew
First Alpha Product
Eventually we developed the first version of the mobile application which was a ‘web app’ that was responsive to mobile devices
The mobile application pulled from indeed.com as a source and showed videos that were posted on youtube.com as a first version to reduce the cost of hosting videos online
The application played videos and showed the work force development centers closest to you (thanks to NYC Open Data)
Proposal for outsourced work
Initially we outsourced the development work through a contractor and we were sourcing to other developers. I was responsible for putting together the requirements documents in order to convey the work that needed to be done. This is a sample page from that document showing the flow of the mobile application.
Current state with mock-ups of future state screens
These were concept mock-ups I created in Balsamiq in order to convey the future design and development work that needed to be done.
