top of page
UI Design:
SaaS Mobile Billing App
UI 'dark-mode' exploration: Combining usability with excellent visual aesthetics.
Proof of concept
Hi-fidelity UI
Low-fidelity mockups
Gestalt Laws
Design system
Prototypes
Wireframes
UI Accessibility
Heuristic evaluation
Project/When
What
Why
Mobile App UI design
June 2023-Jun 2023
Mobile App.
UI Design Constraints
Portfolio Spec Project: challenge creativity, innovation and pixel perfect delivery
Role
Category
UX.UI Designer, Art Director
SaaS. Business
Software
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
UI Solutions
During the UX&D process, I developed multiple, high-fidelity UI screens. My aim was to design a useful and easy, interface solution while keeping the user's needs and goals as the all-encompassing project thread.
bottom of page