SaaS Mobile Billing App
UI 'dark-mode' exploration: Combining usability with excellent visual aesthetics.
Proof of concept
Mobile App UI design
June 2023-Jun 2023
UI Design Constraints
Portfolio Spec Project: challenge creativity, innovation and pixel perfect delivery
UX.UI Designer, Art Director
Figma, Photoshop, Illustrator, Principle
Why I made this project
Challenge my UI Design-thinking methods. Purpose through removing unnecessary elements, UI consistency-standards, form-function, simplified color scheme and design system, readability, and navigation.
Problem space: addressing interaction-level pain points and design aesthetics inconsistencies.
.Goals: Make an effective and enjoyable experience while balancing business needs with users needs and goals.
Design key App features: from ideation through UI mockups.
Iterative, high-fidelity designs for UI App screens: Profile-settings, Dashboard, Billing-Reminders, modals-alerts.
My framework for delightful designing and problem-thinking
The SaaS App is for business executives, assistants, Human Resources, billing and accounts, and client management environments.
App helps solve scheduling, billing and project coordination issues–focus on an easy-to-use interface.
Users engage with the App in business applications: tasks carried out in the office and or remotely.
Users will enjoy using this App because it is clear and tactile, easy to use, helps them achieve tasks quicker, is visually appealing, considerate and empowering.
This UI designs have appealing aesthetics in dark mode: improves the look and feel, and the experience adds value and trust for the business.
Identifying a UI design system and specs
Based on research and moodboard exploration, I established guidelines and a design system for the dark-mode style.
Atoms and Molecules
Low-fi wireframing and medium-fidelity mockups
From concept sketches to mockups, I created basic greyscale wireframes for the UI screens. These initial concepts helped me flush out UI flow for mid-fidelity mockups.
Initial design stage
UI Design Solutions
During the UX evaluation of key features, I refined user interface screens and improved the look, form and function.
Overarching Question: how can I design an enjoyable experience and not overwhelm users with the App's complex amount of information, number of tasks and choices available?
Hyopthesis: I believe that if I create a more simplified, visually appealing design experience and present information that does not overwhelm high-level users, then the experience will be perceived as easier to use and more aesthetically appealing.
UI Designs experimented and tested in usability studies. I will know the hypothesis is valid if by the second sprint cycle, the criteria meets the following metrics:
Quantitative outcome: 65% improvements in user's ability to find billing calendar dates and act upon them with success in the payment flow.
Qualitative outcome: 4 out of 5 users tested will have favorable comments regarding the visual aesthetics appeal and how this makes them feel empowered and trusting in the company and process.
UI Heuristic Eval: Key App Features
Key UI.UX takeaways
By applying the Laws of Prågnanz/Similarity, Miller's Law and Chunking methods, I helped users perform key tasks quicker and retain data easier. The following features highlighted these improvements:
Efficient filtering of UI information
Seek meaning of UI content
Help to store bits of these key interactions into memory