Ellatronic
Design Portfolio

Blog

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
Just Chill Menu Design

I just finished my fall semester of graphic design classes and wanted to show the work I did for my Intro to Computer Graphics class. The assignment was to design a menu for a fictitious ice cream company called Just Chill.

Requirements

  • Incorporate the shop name and ice cream into the logo.
  • The brand needs to appeal to both millennials and children.
  • The message and tone is modern, youthful, and feminine.
  • The logo must fit into a square for easy posting on social media.

The Logo

I chose pastel colors and a cursive script to convey a feminine feel in meeting the requirements. The logo is made of simple geometric shapes, in the flat design style, brought together to make a more complex shape. This communicates a modern yet youthful aesthetic to appeal to both millennials and children. Ice cream, as well as the company name, is incorporated in the logo, which fits nicely into a square, as requested.

 Brainstorming ideas for the logo incorporating the shop name and ice cream.

Brainstorming ideas for the logo incorporating the shop name and ice cream.

 My pick for the logo.

My pick for the logo.

 Color palette and typography.

Color palette and typography.

 The logo design.

The logo design.

Creating the Menu

First I sketched out some ideas on paper, drawing from our tutorial design for inspiration. See the sample tutorial I completed.

 
 Sketches for the menu design.

Sketches for the menu design.

 

I ended up taking elements from both thumbnail menus that I liked and putting them together for the final design.

I went with the bicycle picture for the background on the front of the menu since the logo already featured ice cream; I felt a photo that also featured ice cream would be too repetitive. The bicycle photo is also a nice pink color which matches the branding, a large portion of the top of the photo is also just the metal wall, so it was not too busy but still had some texture thus making it a good background. I added a white, partially transparent rectangle behind the logo to help increase contrast against the logo since two of the ice creams would have been pink on a pink background otherwise. 

 The front menu page.

The front menu page.

I added the size, cup or cone, and flavor assets from Illustrator and used a marble background image. I added the cups of ice cream photo to the bottom of the third page, retouching that picture in Photoshop to change the color of the marble to better match the other marble background. I used the directional feather to help blend the two assets as well as make the flavor text more readable where it intersects with one of the ice cream cups.

 Ordering options.

Ordering options.

For pages four and five, I added two photos and some text with the company headline. I decided to keep it simple here and not add more menu options like in the thumbnails since having too many options can sometimes feel overwhelming. I wanted the focus to be on the ice cream.

 Images I edited in Photoshop that helped convey the brand.

Images I edited in Photoshop that helped convey the brand.

Finally, for page six, I repeated the background photo, white transparency, text pattern from the front page to promote consistency but with a different photo and text.

 Back page with the shop's business information.

Back page with the shop's business information.

Note: I was having problems with the images and vectors showing up pixelated when I used the Publish Online feature in InDesign even though I adjusted the resolution and image quality settings. I found this article to be helpful in fixing the problem.

DesignElla ChiangComment
This Year in Books: 2016

I love this little graphic Goodreads sends out every year displaying the books you've read over the year. It gives a nice little summary and reflection. I'm proud of myself for sticking to my reading habit too. ;)