I designed the mobile app's content structure to allow users access to anything within just two taps. This structure of content hierarchy ensured nothing would be buried too deeply within the navigation and allowed for easy, quick accessibility to the content.
This was accomplished through heavy information architecture and wireframing at the outset fo the project. The organization and access to the content was key to this project's success.
After establishing a successful hierarchy through wireframing, I moved to the visual design of the user interface. The design itself was influenced heavily by the constraints of mobile. Large touch points, touch-friendly user input fields and an intuitive navigational system were my top priorities.
Due to the nature of this Research & Development (R&D) project, it was unfortunately cancelled before the UI designs could become a reality.
I designed various stand-alone versions of the wireframes for each breakpoint. At the time, I decided on three fairly standard breakpoints because of the site's content and the proficiency of phones, tablets and computers.
In handing off the design specs, they needed to be clearly defined between the variable breakpoints. The app was designed to scale up from the base design up to a tablet and larger, desktop version.
The final solution consisted of a complete design style guide for the base elements. This ensured a consistent and systematized development of the design's core elements including colors, typography. It extended from these base elements up to larger, combined organisms such as forms and cards.
Finally, I developed pixel-perfect design specification sheets per page for the application. These spanned each defined breakpoint from mobile, tablet up to desktop to ensure a proper deployment by my development team.