UI of the Week

Sign In/Sign Up Page

For my exploration of a sign up/ sign in page, I chose to go with the landing page for a dating app called Soulmates. The highlighted button, one that draws the eye in, is the sign in button, encouraging new users to sign up. The sign in button is less prominent, assuming a returning user knows the app and to sign in below.

Buttons/Sliders

In creating an app utilizing buttons and sliders, I thought that there was no better app than a home rental app. Buttons, pictured on the left, indicate that the user can message the host, reserve a booking, and even save the booking to their profile for future use.

Bottom Navigation Bar

When thinking of applications that use bottom app bars, a music app came to mind. The icons home, search, library, and profile are accompanied by helper text and a highlight color on the selected page for accessibility purposes.

Progress Indicator

Image lists were something I was very familiar with. As a consistent user of Pinterest, Instagram, Tumblr etc. creating a shape system for an image list came naturally for me. In creating chips, I wanted them to be high contrast, match the rest of the app, and be collective at the top of the list so the user can easily delete or change before looking at the images.

Lickety Split is a food delivery app that utilizes a progress indicator to let users know that their food is en route. The colored in icons indicate that that task has been completed by the restaurant or the driver or even indicating arrival.

For the sliders on the right, the user can swipe to indicate price range, number of beds, baths, and vehicles to narrow their search.

Bottom /Top App Bar

In my banking app, Virtual Wallet, a top app bar indicates that users can switch between this page and other options. The bottom app bar indicates that the current page is not the home page and users can go back even further in the app.

Text fields/error handling

In creating text fields and error handling, I wanted to use colors with great contrast to help the text fields stand out amongst the background. I also strived to make the text fields as obvious as possible with what information was necessary and what was optional. In error handling, I used red to indicate a problem, but not too harsh of a red so the user would be encouraged to fix the problem. I also made sure to label exactly what the problem was in a concise and kind way.

Date picker

Image lists/chips

Map/Selection Controls

For a map and selection controls UI, I wanted to branch out from what I normally design and go with something super feminine. I chose to do a Sephora-like makeup company delivery service. Pink and black were my primary colors for this design which I felt gave good contrast and reflected the brand well.

Since this is a delivery service, I thought that the selection controls might be useful in letting the user know they can choose to be notified when their package is nearby, arriving, or already been delivered.

Using new features in social media apps can come with a particularly large learning curve especially when users have become accustomed to usual features in popular apps. For this reason, I chose to do a tooltip UI featuring a social media app. When the new feature is added into the app, the screen will fade and a tooltip will pop up to show the user the new tool and how to use it.

Tooltips

Understanding the difference between a calendar widget and a date picker was pivotal in the UI design of my car rental app. I created a date picker with the ability to toggle between months as well as drop down for years. You can also select multiple dates on the date picker and the dates that are selected will be reiterated at the top of the widget.

Menus

In creating a menu for my music app, I wanted to make one that was simple, concise, yet featured everything that needed to be included that the user might utilize. In this case, clicking the three dots at the top right allows for a dropdown menu to pop up, making changes to a playlist easy and simple.

Banners/Snackbars

For a banner design, I went with a home rental/leasing app design much like Zillow or Apartment Finder. For a banner, I designed a network disconnect message giving the user two options - either continue without network connection or to connect to a wifi network.

When it comes to the banner, it made sense for me due to the scope of this particular app to make an error/incomplete message pop up due to the user closing out of a lease application without submission or completion.

File Upload

To create a file upload UI screen, I went with the traditional approach. This app is an image list app with features that allow the user to upload images and sort them within albums.

Tabs

In researching references for a tabs UI screen, I came across many apps in which the user could toggle between screens on applications that had to do with money (taxes, stocks, banks). I wanted to take a stab at creating a mobile credit card app that was luxurious but also had clean UI.

Timer (apple watch)

To create a timer for an apple watch, I used lots of references, many of which were very similar. Due to the popularity of Apple’s timer UI, there was not much variation to reference. Nonetheless, I feel that the circular countdown with STOP and PAUSE buttons is very effective when it comes to usability and accessibility.

Que’d Promo

In creating a music app through this UI/UX project, Que’d came to be. This is the promo page for the app on web and on mobile.