Michael Ligier
Michael Ligier

daily ui - overview

This past summer, I challenged myself to design every day so I started doing a 100 day UI challenge (which is still ongoing). Each day I'm given a design challenge and I give myself a maximum of 45 minutes to ideate and come up with a final design. This was an exercise for me to get creative, try new styles, and learn to design under time constraints and the pieces that I've put on this page are some of the selected works that I've chosen to display for various reasons. 


ui_ecommerce_day12.png

day 12: e-commerce

E-commerce has seen explosive growth in the past few years, but mobile sites seem to always be overcrowded, difficult to use, and overall bulky. In this design, I wanted to focus on one particular product page and how I could make it simple, easy to use, and beautiful.

The main elements for any product page are the name of the product, the price, a brief description, an image, and a call to action. I wanted the product to stand out and be the center of attention, so by placing it in between two contrasting colors, it both looks like it's a part of the top section, but also stands out against the lower section.

The reason the lower section is in white is to make the call to action stand out a bit more and emphasize the ability to add the product to your cart. 


ui_directmessage_day13.png

day 13: direct message

This was a simple design concept for a direct messaging platform for various purposes. The main components that I wanted to include were the messaging section itself, a quick way to access conversations that you've already had, and a way to search for previous messages. I also wanted to be able to include an attachment section since many messages include attachments. 

As such, I decided to create a simple interface that's relatively standard across other messaging platforms with a few minor improvements. I've noticed that a lot of messaging platforms don't easily show all of the participants in a group conversation so I made that evident on the messaging area itself and in the current conversations area. Rather than clicking on a group, each group will have a send message call to action, making it easier to send messages in groups. Finally, in case there are large organizations using a tool like this, each person's image is in the current conversations list so you can easily tell who's in which groups. 


ui_dashboard_day21.png

day 21: dashboard

I've been interested in analytics/analytics interface design for a while so I decided to take the time to design a dashboard that you could use at home to manage different settings in the home (perhaps this could be mounted on the wall or a tablet or mobile application). 

There were two distinct features that I wanted to capture here from a usability perspective: getting an overview of utility usage and controlling certain features of the house. 

Nowadays, many people are concerned with their utility usage, so making that section feature bold, contrasting colored text allows the user to quickly get an overview of how much energy they're using and what's the state of their utilities. 

For on-off features such as lights, garages, and security systems, a simple switch design is familiar and easy to use for many people who have used similar features on their mobile phones. By using green and grey to indicate when something is on or off, it makes it easy to distinguish without much effort. 


ui_boardingpass_day24.png

day 24: boarding pass

I've always felt that boarding passes are so difficult to use and not great to look at. While I understand that there are some limitations to what can be done (ex: color might be a more costly option that doesn't make much of a difference), I still wanted to explore what a simple board pass would look like. 

The main elements of a boarding pass that I included were the flight information, name, seat, class, boarding time and group. Additionally, the flight number and code to scan are separate from the rest so you know exactly where it is when you look at the pass. The two sections feature rounded edges which separate the two, but also make it easy to tear if the paper is perforated because you can simply grab one of the rounded corners in the middle.


ui_pricing_day30.png

day 30: pricing

There are a lot of companies nowadays that offer tiered pricing models, yet the displays to choose which price tier you want to be a part of are often complex or cluttered. In this design, I wanted to create a barebones sort of tiered pricing concept that still effectively gets across the same message.

From a UX perspective, showing all of the features on all of the price tiers at once may be overwhelming and might not actually generate as much revenue as you want. For example, if all of the features of the lite offering were shown, people might determine that that's a "good enough" level and choose that. By only showing the pre-selected tier (in this case the pro tier), and only showing a call to action on that price, a company can more effectively funnel people in to that price tier. 

I also wanted to play around with ways of making the pre-selected tier stand out more. This was done with the pop of purple color in the lower section text and button, the bold and darker type for the price and tier name, and a bit of a blurred image in the background to give it a little bit more color than the others as well. 


ui_crowdfund_day32.png

day 32: crowdfunding

Personally, I love crowdfunding sites. I think the concept is clever and enables people to get funding for smaller scale projects that they're working on. However, one thing that's bugged me about these sites is that there's no easy way to get an overview of a project. If I click on a project card on the homepage, I'm directed to their page which includes pages of information, rewards, etc. Instead, I wanted to think of a popup or modal that would appear if you clicked on a project card on the homepage. 

Here, I wanted to highlight the ability to back the project first as well as the product name and image. For people who want to back the project immediately because they heard about it somewhere else, they can just click the back it option which is in Indiegogo's typical pink to make it stand out more.

The user can then read a little bit more in depth about the project than what's available on a homepage card and if they do want to go to the full site, they can click learn more to do so. 

 


ui_customizeproduct_day33.png

day 33: customization

Tesla has always been one of my favorite companies, so I decided I wanted to come up with a simple way to customize the color of a Tesla Model 3 before you reserve it. This option currently isn't offered readily on the site so I created a sample Model 3 landing page to see a quick overview of the features and allow a user to choose a color and reserve the car. 

Offering easy buttons to scroll through all the different colors allows a user to quickly and easily see what's offered from a Model 3. Furthermore, all of the basic information including starting price, production timeline, and the reserve now call to action are present. 

A more neutral grey was used instead of the alternating white and grey that's on the current site in order to make the page feel more consistent while allowing the contrasting colors to stand out a little bit more. Only a few options are offered on the entire page which all link to more information about the Model 3. This encourages purchase behavior rather than more general exploratory behavior because all of the information a person is given is about the Model 3.

The font choice keeps some of the thinness that Tesla generally uses such as in the price, navigation area, and parts of the features, while a bolder font makes certain aspects pop out so users who are taking a quick glance can have a good overview of the car. 


ui_blogpost_day35.png

day 35: blog post

There are a lot of websites nowadays that offer blog hosting and they've gotten more complex over time. I wanted to design a concept similar to Medium where it's the simplest possible blog design so the user can focus entirely on the reading. 

Here, a bold, sans serif font is used for the titles throughout the page to stand out, while the overall text and the body is in a serif font which makes the blog content seem a bit more academic, like a book, and easier to read. The user can also choose a photo which will blend into the white background to the text. 

Additionally, the text is an off-black color so it's not as harsh on the eyes. On mobile, only the titles are visible, so a subtle read more indicator and arrow icon allow the user to treat the blog post more like a book and page through the content. 


ui_calendar_day38.png

day 38: calendar

For this design, I wanted to create a redesign of the Asana calendar view. While I love looking at my month as a whole, I wanted to see if there was a way to get a quick overview of all the work I had to do this week. 

I opted for a basic 5-day calendar view which has several main features. Editing events is extremely easy, as there's an intuitive call to action on each event itself. Events are color-coded based on whatever the user sets as the colors. 

One other feature is that when the weekly calendar view is open, the sidebar populates with some upcoming deadlines, some info about those deadlines, and the color that it's coded with. These can easily marked as completed and acts as a quick checklist to complement the calendar.


ui_menu_day43.png

day 43: menu

For this last design, I redesigned a menu both as a physical paper and as a mobile menu on something like Yelp. While this is a simplified menu, I wanted a way to not only display the menu items, descriptions, and prices, but also show some imagery to make the menu pop with a little bit more color. 

On the physical menu, all of the standard items that you would find on a typical menu are there, just with a little bit more white space between each entry. The name of the dish is bolded while the description is in a lighter grey and a thinner font. Finally, there's also a sidebar with images to give it a more clean way of viewing some of the food options. 

On the mobile menu, a few of the options are initially shown and a user can tap on any option to view more info (including images, reviews, price, etc.) and the bottom option is faded out to indicate that the user can scroll to view more options. The tabs at the top of the page also allow a user to switch between lunch, dinner, and dessert menus.