Daily UI Challenge
Tools used: Sketch, Adobe illustrator, Flinto, Principle, Framer
This is a collection of user interface mock-ups I designed in response to the Daily UI Challenge (dailyui.co). The goal of the challenge was to design an interface based on a given prompt within 24 hours for a consecutive amount of days.
Participating in this design challenge will provide me with the opportunity to learn, explore and experiment with a variety of different visual design styles, interaction methods, and prototyping tools within a condensed timeframe.
Lego.com Sign-up Page
I recently read an interesting article on medium by Eiko Nagase (Creative Director at AQ Tokyo) on designing in Japanese. So I thought I would try it with my day one user interface challenge. For clarity, I have also done it in english as well.
This is my attempt at re-designing the sign up page for Lego.com. In my design, I combine the log in and register options into a single page. This is because the current hitbox to toggle either log in or register is very small, which makes it hard to click on the desired option. Furthermore, combining the two pages into one reduces user frustration if they find themselves in the wrong menu.
Credit Card Checkout
I wanted to imagine an all purpose checkout system for the mobile version of clothing curation website (Whatdropsnow.com) by magazine (Highsnobiety). I wanted to include features that are popular in checkouts nowadays, such as being able to take a photograph of your credit card. Having this feature liberates the user from having to manually type in the information, but the option is still there to do so.
Sometimes, I wish I could just tell the calculator exactly what I want to know. So why not take this literally, and turn the classic calculator into a chalkboard? Enter the question, and the calculator will do the hard work!
SoundCloud Go +
In March of 2016, SoundCloud launched it's own subscription service SoundCloud Go. Over the last year, SoundCloud has focused on trying to scale its subscription business while making modest improvements to its product, like the addition of personalized radio stations.
With competition for music subscription dollars is heating up fast: Amazon, Apple, YouTube, Pandora, and Spotify all entered the music subscription market while SoundCloud was preparing its own foray.
In order for SoundCloud to stay competitive, it needs to start growing it's userbase. As of now, the SoundCloud mobile offering does not encourage users to sign up for its subscription service. What I have done is put that information up front and center so users can think about and consider this possibility. My design also lets SoundCloud advertise individual artists or albums as another reinforcement to why people should sign up for SoundCloud Go.
Getting started with Framer
During my free time, I sometimes like to try and learn new tools or read up on the perspectives of other creative designers. Framer has always been a tool that I had been interested in learning how to use. The ability to combine code and design had me really excited about breaking past the limitations of other prototyping tools. Above are some of my early attempts at re-creating short prototypes that were done by the Framer design community.
Onboarding for HereNow's Mobile App
In this quick prototype built with Framer, I wanted to update HereNow's mobile onboarding process. Some objectives for this prototype was to bring the experience back to the users. (Locals, Travellers, Contributors). Below this paragraph is screenshots of the current onboarding process of the app. Rather than having cut off screen shots of the product, I restructured the information visual hierarchy to better take advantage of the screen. This allows the users to quickly read and move through each screen while building product trust.
If you would like to play with the prototype, here is the link.
Above are screenshots of the current onboarding process. Issues include the visual hierarchy of the information in relation to the images, the final step of the onboarding process was not scrollable despite it welcoming me to.