Ellatronic
Design Portfolio

Blog

Posts in Design
Hanging Punctuation

I read this article the other day about hanging punctuation. Hanging punctuation allows the text on the left side to flow uninterrupted by placing the bullets in the gutter.

HangingPunctuationv2.0.png

To be honest, I don't remember ever seeing hanging bullets. This may be because I do the majority of my reading on screens either through a browser or an e-reader rather than print. Plus, growing up on MS Word, which uses the indented bullets, I just assumed that was the normal way for bulleted lists to look.

However, now that I've seen hanging bullets, I like how it creates a straight line on the left side of the text which looks cleaner and more pleasant.

DesignElla ChiangComment
How To Add a Sidebar to Squarespace

I found and installed a super awesome sidebar plugin for Squarespace. I use Squarespace for my website and the theme I have, Jasper, does not come with a sidebar for the blog section.

The plugin works by using an unlinked page and importing that content onto your desired blog list/post pages.

Start by creating an unlinked page named sidebar. This is where the desired sidebar content is added. It's super easy to do since it's just a regular page but skinnier (default 260px, or however you want to set your sidebar width to), so you have all the same Squarespace blocks. Add the plugin's css and js as unlinked files in your Squarespace dashboard. Then paste some code into the Code Injection sections for your blog.

The plugin is easy to set up and there's step by step video instructions. The plugin costs $50 and it's a more satisfying solution than any workarounds I encountered. The first workaround is changing my Squarespace theme to one that supports a blog sidebar. After spending a month and a half customizing my current theme, I am not about to change themes now.

The second is creating a page with a fake sidebar by using a two column 3/4 + 1/4 layout and placing the sidebar content in the 1/4 section. Then using a summary block for the blog excerpts. With this second option, the fake sidebar would not show up on every blog post without manually creating it nor is there the ability to click Next or Previous to see more blog posts.

Desktop Layout

 Using the plugin: how the sidebar looks alongside a blog post.

Using the plugin: how the sidebar looks alongside a blog post.

 

Customizations

Following the installation instructions, I added a 50px margin-top in addition to the default 30px margin-left. This is so the top of my photo will be lower than the top of the blog post date.

Then I made one small change to the code to remove the margin around the sidebar when viewed on a mobile device (or a device under 767px). I simply added the following media query to the bottom of the plugin-sidebar.css file.

@media (max-width: 767px) {
  .sidebar__inner {
    margin: auto;
  }
}
 

The change on mobile

 Before (left) and after (right) setting the margin to auto. The difference is subtle.

Before (left) and after (right) setting the margin to auto. The difference is subtle.

App Critique: Yelp
 Yelp's search result page (left) and restaurant information page (right).

Yelp's search result page (left) and restaurant information page (right).

The Target Audience

The target audience is college educated (65.8%), upper income (46.3%), between the ages of 18-54 with the 18-34 demographic and 35-54 demographic being pretty evenly split at 36.5% and 36.7% respectively for 2017 (https://www.yelp.com/factsheet). The interface was recently updated so it feels more cluttered than it used to. However, the users in the target audience are tech savvy and can likely navigate the interface fine. The app uses typical UI elements as explained below. 

Does the content, organization, and navigation make sense for a mobile or touch context?

Yes, the content, organization, and navigation makes sense for mobile. 79% of searches on Yelp were done through a mobile device and 65% of new reviews were written on a mobile device (https://www.yelp.com/factsheet).

Yelp is information heavy and includes both text and photographs. The challenge is displaying all the information in a way that is easy for users to find what they are looking for. Yelp employs many different types of content display and navigation including a top search bar with filters, horizontal sliding collection views embedded inside a table view - this is mostly used to display photos or filters for the search results,  as well as a bottom tab bar for navigation to different sections of the app itself such as nearby, search, profile, activity, etc.

I like, I wish, what if?

I like how Yelp orders reviews by displaying your friends’ reviews first in the list before other users. I am are more likely to trust my friends’ reviews, giving them more weight than reviews of people I don’t know. I also like the cute icons for sandwiches, American, burgers, etc. above the restaurant ads.

I wish Yelp went back to their old search result display where the list of queries shows up first and the ability to toggle to the map view is off in the corner, instead of their current update with the map and list both displayed on the initial search result screen. The map is on the top half of the screen and the list is below it. In most cases, I am searching in an area I am familiar with, and thus do not need the map (or I can look at the map location for a specific restaurant that interests me). I would rather just see the list since it shows a location’s distance (ex: .01 miles) from the user anyways.

What if Yelp hid some of its ancillary content in its UI through dropdown menus or other elements in order to streamline the app and make it feel less overwhelming.

Additional Thoughts

Yelp tries to do too many things at once. It started out as a simple search app for local businesses, but now you can order food off the app, view curated lists of businesses, make reservations, or even save a real-time place in line for a restaurant. There’s also a gamification aspect where users’ check-ins earn them badges. When there are too many features in an app, it can feel cluttered and that the main purpose of the app is diluted. I still use Yelp as my go-to search for restaurants, and I generally just use the search functionality and not the other features.

DesignElla ChiangComment
App Critique: Wünderlist

The Target Audience 

The target audience are people who are technically savvy and want to use a to-do list app on their mobile device to keep track of their tasks. The demographic probably skews younger in the 22-39 range. Wunderlist’s design is appropriate for their target audience since they offer advanced features like conversations and shared lists in addition to the typical features a user would expect of a to-do list. The advanced features require more familiarity and integration with technology, such as syncing with a Google account.

Does the content, organization, and navigation make sense for a mobile or touch context? 

Yes, navigation is touch based, relying mostly on taps and swipes. Positioning of the Add button is in the bottom center which is an easy position for the user to tap with their thumb. There’s the standard swipe left to delete function as well. Taps on different areas of a to-do list item also offers different functionality: tapping the checkbox checks or unchecks the item, tapping in the center of the list item brings up a more detailed screen where the user can edit their list item or add subtasks, tapping to the right side stars/favorites the item for easier sorting and viewing.

 
 Wünderlist's main list screen (left) and to-do item screen (right).

Wünderlist's main list screen (left) and to-do item screen (right).

 

I like, I wish, what if?

I like using a to-do list app over traditional paper and pen for recurring tasks. It’s so easy to set up a recurring task and customize how often the task should recur. The organization of the app is also simple and clean allowing for groups of lists and folders.

I wish the app continually auto-sorted tasks by the user’s preferences. For example, I frequently choose to sort my tasks by due date, however, if I add a new task, that tasks just goes to the top of the list instead of in the proper spot according to its due date. I need to manually re-apply the sort by due date filter if I would like the new task sorted by it’s due date rather than added at the top.

What if Wünderlist allowed more user customization for the visual design? Wünderlist currently allows users to choose from a limited set of preset themes that changes the background and color of the UI elements. It would be nice if the user could choose their own colors for more customization or import their own photos to use as a background.

Additional Thoughts

The visual design is nice for the app’s functionality - essentially a list of items - so form follows function. The navigation and user flow is also standard, making use of the back button in the upper left corner to navigate to previous screens and using taps on the to-do list items to navigate forward into more detailed screens. 

Countdown App
 
CountdownSpace@3x_v1.0.png
 

Disclosure: Some of the links below are affiliate links. This means, at no additional cost to you, I will earn a commission if you click through and make a purchase.

The Challenge

June is a travel addict and she can't wait to go to Hawaii this year. She wants to create a countdown to her vacation in 100 days to keep her motivated. June believes her vacation reminder will inspire her throughout her workday.

Create a mobile app that is simple, meaningful, and compelling for June while keeping in mind June's experience and story.

First Steps

I created some sketches of the mobile countdown app and then uploaded them to Marvel Pop. Thinking about what information is necessary to show on the screen, I decided on:

  • the countdown
  • the event info including the date, name, and location
  • a background photo - so the experience feels more customized

I wanted the countdown displayed vertically to maximize the use of screen real estate and for the countdown to take front and center as the most important aspect of information on the screen.

CountdownAppWireframeSketches.jpg

My sketches using the iPhone 6 Plus Marvel Sketch Pad template and these awesome grey markers. This illustrates the screens for the forward flow of adding an event.

Creating the Prototype

I found uploading the screens into Marvel to be fairly straightforward and similar to Invision. Hotspots are created on one screen that links to another screen with different screen transitions and triggers available such as click/tap, swipe, and hover.

 All uploaded in Marvel and ready to start making those hotspots!

All uploaded in Marvel and ready to start making those hotspots!

One problem I did have was getting a longer screen to load with the bottom of the screen aligned with the bottom of the phone.

The keep scroll position function works when navigating from one long screen to another long screen but not from a short screen to a long screen.

When tapping on Event Name, the keyboard should pop up at the bottom and the rest of the content gets bumped up above the keyboard, so the text field will be just above the keyboard. This way the user does not have to scroll up or down to see what they're typing.

Ideally, when the user presses Enter to complete one text field, the cursor automatically moves to the next text field which is repositioned into place just above the keyboard.

As a workaround, I tried creating the keyboard and text field as a fixed footer, but this resulted in the countdown being cut off and partially displayed below the footer. I also tried a smaller screen with the top cut off to fit the phone size, but this obviously gets rid of the scrolling ability from the longer screen. 

Anyone have a good solution to this problem? If you do, please let me know! Leave a comment below.

 
 With June's vacation date and a tropical photo.

With June's vacation date and a tropical photo.

 
 

Watch the video or

 
DesignElla ChiangComment