Next Case Study:

Ebay

Building a design with Xcode and Swift.
  • Sketches
  • Visual Design
  • Animations
  • Xcode Prototyping

Project Summary

I joined up with two other designers to build our own app called "Workday", a personal task management tool. We worked on the app while taking an intensive iOS development course. We designed the application and built a functioning prototype in Xcode using Swift for iOS in about 2 weeks.

The Problem

Project Management tools like Asana, Basecamp, Trello, Pivotal, etc. are great for working in teams. But on a day to day basis trying to figure out just what you need to accomplish can be overwhelming, especially if you are working on multiple teams. And as any member of a product teams knows, you are constantly having to work with other teams, and with multiple tools.

Trello Board From a 30 person startup team

Tools like these are built to scope out an entire project or product, for an entire team. Sure there is the ability to assign things to certain people, but the primary target is the entire team. Talking amongst us we realized that we all lose quit a bit of time struggling through these tools trying to figure out what we need to get done. So we decided to build a solution.

The idea was simple. We wanted to take all Basecamp to-dos, Trello boards, Pivotal stories, etc. assigned to you and gather them into one organized list of tasks. Giving you one place to use to track, respond to, and complete them.

Sketching

We started sketching right away. We started simple, what do we need? A list of tasks. Maybe that's all you'd need. You could swipe to complete, or even select one to view details.

However, as we were discussing the needs of the user, an important idea struck us. It's not what you need to, but when. Let's say you get assigned two tasks. The first one is due in a week, and then the second is due tomorrow. The second task is going to be first on your list of priority right? So our first thought was to allow the user to reorder their tasks.

But was that enough? What if you could delay a task, and not worry about it until you needed to again? Much like the delay feature in Dropbox's Mailbox app.

Quick and dirty illustration of imporatance and time due

Then we started to think about this as more of an inbox of items, rather than a list. It gave more weight to the tasks. A user could slide a task to either complete it, or put it off until a certain date. Now they have a list of items that they only need to get done today, and when they're all complete their "inbox" is empty.

But what about when you are going to work on them? What if a user not only had the ability to organize the order in which they worked on something but also for how long they worked on it, and at what time in the day?

Sketch of a list and a calendar on the same screen

This brought up another issue however. Say a user has finished all of their tasks for the day and they are ready to go home. How do they know what their day is going to look like tomorrow? Did they accidentally move too many tasks to tomorrow? Is there something they need to prepare for tomorrow's tasks? Do they have to wait until the clock strikes 12 to see what their tasks for tomorrow are? What if we gave them a way to peek into tomorrow's tasks and see what it was looking like?

Quick sketch of viewing tomorrows tasks

We spent some time skecthing and whiteboarding this concept out until we got to a point we thought worked successfully enough to test.

Quick sketch of viewing tomorrows tasks

We even spent some time, before diving into mockups, understanding how we were going to build certain more difficult parts of the App. We didn't want these to be barriers in terms of our designs, but we wanted to get an understanding of what exactly we were designing before asking someone (in this case ourselves) to build it.

Screenshot of Workday in Xcode

Mockups

Now we thought we were onto something, so we started to dive into Mockups. We knew were going to be building this in Xcode so we used Sketch App to make exporting assets a breeze.

Screenshot of Sketch app with mockups in progress

We spent a few days iterating and flushing out all of the screens for the dashboard, task details, settings pages etc.

A few of the several iterations for the main dashboard

At this point I also started to mock up some animations and transitions in Adobe After Effects. Building these animations in swift was not going to be exactly the same, but After Effects made it possible to whip up some quick and dirty animations.

Possible animation for transition between screens

While working on these animations we also got to a finalized place with the mockups. We had developed a nice, simple visual style and completed all of the screens we needed.

Final Mockups

We wanted this app and prototype to feel as real as possible so we also created all the other, less important screens such as settings, launch screen, etc.

Final Mockups

Prototyping in Swift

With the mockups completed and most of the custom animations and transitions completed we moved on to the prototype. We worked with Xcode and wrote in Swift for iOS to build out the app.

Screenshot of Workday in Xcode

The best part about this is that it's almost 100% real (we faked most of the data). It's written in the same code any developer would write, and because we can test it right on out phones it makes iterating on animations and interactions so much easier, and more likely to come out as you planned. As an exmaple below is the custom modal transition we built.

Custom modal transitions

We were able to test out interactions that would be extremely hard to test with something like Invision, Flinto, or other prototyping tools. Below is an example of a reordering, drag and drop, and pinch to expand interactions.

Reorder, drag and drop, and pinch interaction

The Final Result

In about 2 weeks (in addition to having full-time jobs) we designed and built a working, high fidelity prototype. Being able to code and build out our ideas was an amazing asset and lead to some pretty exciting results. Check out the video below for a 1 minute tour of the working app.