Daily UI 896 & 003: Donation Pop-up and Donation Form
I designed a donation pop-up and a mobile donation form for the Pancreatic Cancer Action Network, in honor of hashtag#givingtuesday and a very dear friend.
Donate today! https://lnkd.in/g62KH-e Pancreatic Cancer Action Network hashtag#dailyUI896 hashtag#dailyUI003 hashtag#cancersucks |
Daily UI 087: Tool TipI focused on what the user may be considering when clicking on details. I placed the word 'Details' close to the three CTA buttons - proximity - and included a red question mark. When the user clicks on the question mark, they would see an explanation of the content found within the three buttons. At first the box was white with black font but found it easier to read due to contrast of the light image behind it. I also wrote the content in a casual voice for easy reading of all users.
|
Daily UI 006: Profile PageAfter reading an article highlighting the efforts of Mark Barone who raises awareness for shelter dogs, I designed a profile page for a dog-breed that struggles to be viewed in a positive light: the pit bull.
My thought process focused on three things: 1. Functionality of the page. It gives you basic information such as age and location. It also gives potential owners direct information on three categories when shopping for fur-baby - 1) Basic information on the breed and the particular dog itself, 2) how much exercise they will need, 3) and what type of needs they require, or in other words how expensive will this dog be. 2. Aesthetics: I focused on challenging the perception of the pit bull by countering it with bright, energetic, and positive colors. Fonts are modern and classic, challenging the viewer to consider the pit bull as popular choice for a family pet. For the main photo, I included a smiling, welcoming photo. The user can see that there are three total images to consider. 3. Icons and pro-tip: If one hovers over the Details section, further information about the type of content is on the page. I also redesigned the icons to be clear to the information that is beyond each visual. |
First version shared on LinkedIn. Designers provided feedback about the text on the photo. They wanted me to consider how the text will be seen if the image itself has a dark background? I kept thinking about the lives of the users who would be using this application. They are busy, have a lot of responsibilities, and the last thing they need to do is edit of the dog portraits. I needed to change the original design.
|
The final version includes a tab that appears along the side and sits on top of the photos. It contains important information for easy shopping but it is displayed in a composition that supports all backgrounds.
|
Daily UI 036: Special OfferI chose to focus on my favorite football team for this design challenge. I took an actual promotion they were running on Fridays and modernized the design. I simplified the experience by streamlining the information, which would pull the user downward to the CTA button, and participate. |
Daily UI 037: Weather AppI designed a mobile UI for a weather app. Users can scroll left or right on the screen, communicated through the circles placed at the upper part of the application. As they scroll, the name of the area and visual would change. Users would see at the bottom a seven-day forecast with a dominant current temperature in the upper third of the screen. A brief sentence would provide some additional information around the weather of the day. I created the visual of the mountains using Sketch, capturing the summer light on the mountains.
|
Daily UI 004: Calculator AppI designed a UI of a calculator application. I choose a color palette of light and dark teals, #7EB9BA and #1C4750, with a CTA orange: #EB6B56. The teals are the background of the action buttons, and users can see a visual display of their actions in the upper part of the screen. It's helpful to see the input of data to prevent errors. Buttons are large for a variety of finger sizes.
|
Daily UI 002: Credit Card Check-outCredit card check-out consists of supportive visuals including the color green and check-marks. The visuals guide the user through the flow of purchasing a product, giving them calming alerts as they successfully complete the form.
Design decisions: - User have three payment methods at the top, and when selected, the icon turns greens with a white check mark to communicate the current choice. - The form is larger in size to help with the input of numbers. Users are given the option to remember their card details at the end of the flow and if selected would take them to another screen to set up a profile. - I designed these choices intentionally because of the type of user shopping on this app. It gives the user control to decide whether to continue with the flow of a purchase or set up a profile for future use. - At the bottom of the screen is a sliding CTA purchase button. The gradient provides additional encouragement to swipe from left to right. |
Daily UI 042: To-Do ListThe to-do list UI utilizes a color palette of calming blues #7EB9BA & #8ECFCE with a CTA color: #FDA7A4. The colors are intentional as to-do lists are created to manage stress and responsibilities. I want my users to continue using an application that helps manage stress therefore created an UI that generates a sense of accomplishment and calm.
As items are checked off the list, the user can see those items travel back into a card behind the main list. I designed this intentionally to give the user a sense of accomplishment in viewing what they have done. I have discovered from user research that the physical checking off the list is satisfying because it allows the user to visually see what they have accomplished. To supplement this action, once the task has been completed, the item is checked off, moving into the card behind. If users need to add more, the CTA plus sign is located at the bottom for the thumb to easily select. |
Daily UI 042: RecipeThe recipe was designed for a user who is creating a shopping list and needs to know whether this recipe will be easy or not. It gives user with quick details immediately upon opening. Meal planning or baking requires preparation, and the user needs to know this information immediately before committing a recipe. If the information is satisfactory, the user can scroll further into the recipe. They can also save this recipe for future use, prompting a login screen, or like the recipe for other users to see a rating.
|