The following user interface designs are copyright protected by thier creators and owners. In terms of design, I often use a system to complete each project. For User Journeys, I normally used a pencil to map out the navigatio system. After much information gathering and review, I finalized the user flow using mind node. Then I move on to sketch low fidelity wireframes by using a pen and sketchbook. I create high fidelity wireframes by using phone pads, ink pens, and colored pencils. After a series of approval, I move on to use Adobe Creative Cloud tools such as Photoshop and Illustrator to create mock ups. In the final steps, I use invision online software to create a movable prototype. The following portfolio is listed by most recent.
The idea and creation of AllowCash mobile application was pitched by Nelson Quintanilla, CEO of a small startup company called NQuest. The app is created to help individuals save time to withdraw money at their bank’s ATM without waiting in line and help categorize their money. Nelson needed his app to have a sleek design, intuitive controls, and simple navigation system. So a created 10 interface pages and Nelson loved my results. He was able to move forward to present his idea to potential investors.
The process I used for designing AllowCash user interface are the following steps:
The purpose of the storyboard is to get the client to focus on the target experience whenever the product is used. Therefore the team and I worked on a couple scenarios that would optimized the use of the product. I printed out and use a couple sheets of paper to draw a few the stories of the idea experience the team want the user to experience. This stage was not only helpful for everyone, it helped me understand the function of the app as well as preparing for the next step in sketching the user journey.
The first step was to map out the user flow for the app. I used a pencil to map out the flow. After much information gathering and review, I finalized the user flow using Mindnode:
I sketched 20 variations what my client wanted the logo to look like. His idea of solving financial problems is like solving a puzzle -finding the right pieces that go together. Therefore I designed the logo based on that idea. Instead of posting all sketches and wireframes, I only uploaded major milestones from my client feedback process. The same process is done to all AllowCash icons:
Below are low fidelity wireframes:
Followed by high fidelity wireframes:
After I completed all approved wireframes. The next step was to design mockups. The first set of mock ups are AllowCash logo and icons:
Followed by user interface design:
At the end of this stage, the company lacked funding to move forward with this mobile development process. Therefore, I don’t have a link for a functioning AllowCash prototype. I would normally use Invision software for my clients to comment and approve the entire prototype then send all photoshop files to their mobile developer.
I had a great time designing for this startup company. The longest phase were the high fidelity wireframes. There were a ton of adjustments and changing concepts that took some time to implement because of team member’s schedule. As a designer, clients often change their minds whether it’s before hand or last minute. Whichever it may be, I learned that it could be better controlled by attaining all the information as possible to avoid miscommunication along the way. The entire process was tedious but very rewarding. In this particular project, I gain valuable experience that I am able to take with me for the next user interface design project. I’m ready for the next one!
Send me a message. I'd love to listen to your needs.