Elegant iOS app design. Building Quotie, a quote collection and discovery app. Part 2.
It’s all in the details. Pixel-perfect and emotionally connecting. The user not only expects the app to work perfectly, feel fast, and be functionally bug free, but they also (usually subconsciously) expect the design to be delightful. I mentioned delight in the first part of this blog series, but what does it truly mean? In this second installment (see the first one) of the Quotie development blog I want to delve into delight, WWDC, beta testing Quotie, and Quotie’s fresh coat of paint.
Just last week I completed my 114 day long Disney College Program internship at Walt Disney World in Orlando, Florida. In my time there I learned a lot about what it means to have “interactions as opposed to just transactions.” An interaction means something. A transaction is emotionless and generic. Often, apps focus a lot on the technical details, but forget about the end user.
This results in an app that feels like a transaction, but lacks the emotional interaction.
This is what Apple (and Disney) have been known to succeed in. They try to delight users in unexpected ways. To give personality to their products and services. The iPhone isn’t just another phone; it’s a brand. It’s an ecosystem. It’s a feeling of luxury.
So why would you use Quotie instead of just pulling up Evernote or a notebook? Perhaps because you think it’ll be more convenient, more elegant, or perhaps even more simple. Maybe you want to try a new app, or think it looks cool.
Whatever the reasons, Quotie must live up to the expectations of its users — or else, 86% of those users won’t open the app ever again.
Managing these expectations is important — maybe even one of the most important things in developing any app. Unfortunately user expectations can be incredibly high; especially since they can simply delete the app if it “doesn’t work.”
Most successful apps nowadays rely on a team of people. One person working on design, another on the website. One on marketing, and maybe a few on the backend database work. A couple guys will be working long nights to finish the actual code for the app, and then finally release the app to the masses.
I’m not really at a point where I can hire people to work on Quotie — at least not yet. So I’m going to have to manage these incredibly high user expectations by myself.
Thankfully, delight and user expectation go hand in hand. By working to make the app fun and intuitive to use, I will actually be meeting many user expectations without even trying! I’ll be “killing two birds with one stone,” as they say.
For example; the app doesn’t actually have to be fast, as long as it feels fast. This could mean loading things in the background even after the app has loaded. This is a technique used by Twitter, Facebook, Instagram, and many others. Instead of just showing a blank screen, they manage the expectations of the user by instead showing content placeholders.
This creates a seamless transition between the loading state and actually seeing new content.
More on how this looks in practice later.
WWDC, and failure
Let’s talk about WWDC. WWDC is Apple’s yearly conference aimed at developers. They often announce new tools or versions of software that developers can use to develop apps, as well as showcase creative or innovative apps that were created in the past year.
As their conference grows in popularity (and everyone and their aunt Gina is making apps), Apple has introduced a lottery-only system of purchasing tickets to the conference in San Fransisco.
The $1500+ tickets can only be purchased if you’re randomly selected from the pool of people that submit their details. This creates an incredible sense of exclusivity around the conference.
Fortunately for young developers, Apple also provides a WWDC scholarship (which sometimes includes transportation and lodging for the duration) to 350 young developers in school or in STEM programs.
In past years, the application consisted of a few essay questions, a letter of recommendation (for the transportation and lodging, if needed), and a “resume app.”
This year, however, the app did not need to be a resume, but instead the guidelines asked for an app that “demonstrates creative use of Apple technologies.”
This broad requirement prompted many young developers to submit apps that made use of 3D Touch, HealthKit, or similar Apple technologies.
Of course, I hastily submitted Quotie without much consideration for the “Apple technologies” part of the prompt.
After a week of anxious waiting I’m proud to announce…! I was kindly rejected from the scholarship.
You’d think after four years of reading essay prompts, I’d learn to pay closer attention!
Oh well. Next year, Quotie will make another appearance.
Alas, I’ll be watching this years WWDC conference through the live stream. It’s slated to be an interesting one, with tentative announcements of new hardware, and new versions of software for Mac and iDevices.
What’s new, and beta testing
“So,” you may ask, “what’s up with Quotie?! It’s been TWO MONTHS since I’ve heard from you last.”
Well, my kind friend, yes it has. But fret not, I have not jumped ship quite yet.
Just a few weeks ago I acquired an official Apple Developer license which allows me to distribute my app on the App Store, as well as provide special versions of the app for people to beta test.
“So,” you may say, “release it then!”
Well, my kind friend, I will; but not yet. First I’ve gotta finish it, test it extensively, polish a little, build a moderate community around the app so I have someone to release it to and then I can finally release it.
Thankfully though, now that I have the developer license, those of you who’ve signed up (on the homepage) will receive an email in the next few weeks asking if you’d like to beta test the app.
Your input will be greatly appreciated. I cannot stress enough that the app will not have all of its features when beta testers first download it. Things like searching for quotes, filtering quotes, a good implementation of the Quote of the Day, push notifications, discovery of new quotes, cloud syncing, and many other things will not be done. Of course, the design will be fluid for as long as the app exists, but I hope to establish a good design baseline at some point in the near future.
Beta testing is an important step I must take before I can introduce more robust features. After all, if the app doesn’t even start you won’t really care too much if you can’t search for a quote.
Which brings me to some of the changes I’ve made in the app since we last spoke. All of the changes I’ve made are cosmetic. I’m still working on finding the right personality for Quotie.
Delight in design
My last design felt frail for some reason. The text weight wasn’t bold enough. It didn’t carry enough oomph! I also didn’t like how the background gradient started with a “negative color” (being red), so I changed the colors.
I also felt like the app icon wasn’t the best. So I cleaned it and made it more simple.
A few “delight” related improvements were also made. Something *incredibly* minor that had been bugging me for a while was how the headers animated when moving from section to section. The way I was doing it before caused the headers to move up and down and jiggle around a little as they got bigger or smaller. An end user wouldn’t notice unless they really paid attention to it.
Being the kind of person that I am, I spent a whole day reworking how the headers animated. Now they’re more smooth and don’t jiggle around.
I also wanted the user to feel comfortable when they first opened the app. A new user wouldn’t have any saved quotes, so they couldn’t possibly have a Quote of the Day… so what would I show them in the meantime?
The new home screen kindly lets the user know that they have yet to add any quotes, and then presents a featured quote.
I’m still working on figuring out where this featured quote will come from, and I’m also trying to develop a system for displaying new and interesting quotes from the community.
The user will be able to choose how frequently new quotes appear in the Quote of Day section. At some point, sponsors will also be able to push an inspiring or interesting quote to users.
There are other notable (yet subtle) changes to the design. As stated before, the background gradient now matches the redesigned app icon. Instead of going from a “negative” color (red) to the more “positive” color (blue), it is now reversed.
When a user scrolls down to see the (yet to be implemented) inspiration section, the header fades out of view and shrinks to give some context of where the user is located.
I also changed the design of where some of the sections were located. The inspiration section used to be located on the right. I thought that this didn’t make any sense, and as the app grows and social features are implemented I wanted it to feel more like Tumblr, Facebook, and other content discovery services.
It may seem trivial, but these small changes make a difference.
It takes just one swipe and one tap to add a new quote. Or one swipe to see all of your collected quotes, or one swipe to start discovering new content (as the app grows). I’ve thought a lot about how quickly a user can navigate between sections. I hate having to tap tons of times just to get something simple accomplished.
The colors feel more natural and clean, the fonts are bolder and convey strength, and the user is naturally given context, without giving too much away.
In the next few weeks as the app progresses, there will be a slew of small design changes, improvements, and new features. It may take time, but it’s worth it.
Once again, if you’d like to receive updates sign up on the homepage. Watch for a beta testing email in the next few week. Goodbye till next time!
Remember to delight yourself first, then others can be truly delighted. — SARK