The search for ideas

Since Rice+Bean members were students too, we began by looking inward. What kind of app do we need to have? How can we express ourselves creatively with the app? Keeping these two questions in mind, we went out on individual field trips around the campus to conduct contextual research using the POEMS framework and interviewed our potential users.

We found three key insights from our contextual research. Firstly, Rise and Refresh. This is a state when an individual wakes up, and immediately checks for new updates on social media. Next, The Loop of Despair, which is a constant yearning for new updates. Lastly, Like Coins, a social currency that measures a person's worth on social media and in real life. Based on the key insights, we steered clear from the kinds of apps that we thought we needed and began focusing on the essentials in our student lives.

The first attempt

We came up with several concepts and ultimately went with #GDFKNMRNG, a social alarm app that lets friends send wake-up alarms to annoy the shit out of each other. This was the beginning of SunnySideUp. 

Since everyone uses an alarm, #GDFKNMRNG spoke to us about its potential to become a fundamental app for all students. As we brainstormed further, we realized we needed to change direction. Our team was attracted to the idea of a social alarm app, but not as a platform to annoy friends with.

We got to the stage of designing MIDFI screens for #GDFKNMRNG, then paused to step back and rethink about the app. Since the target user of #GDFKNMRNG is so specific, it may not be well received by students who were not into the fun of annoying people. It can get aggressive, which may turn off users who do not want to annoy friends. Furthermore, being annoyed by somebody can get frustrating after a few mornings.

Integrity goes a long way

Going back to our team's core value of creating nourishing and wholesome experiences, we had to let go of #GDFKNMRNG and rethink our social alarm app. We referred back to our contextual research and realized alarms only wake us up, but not get us out of bed. Rice+Bean wants to design an alarm app that not only wakes you up but also jumpstarts your day the right way. 

SunnySideUp makes perfect sense. Everyone wants to wake up on the sunny side of the bed. What better way to start the morning hearing a sweet good morning from your loved one? Or an encouragement from a good friend to start your day fresh? SunnySideUp provides users with a fun way to wake up by not only stimulating their minds but also growing their relationships with friends and family who are far away.

 Sketching out ideas

We figured our alarm app requires 3 main features.

First, a user profile to allow users to manage their friend’s list with a notification feed to see who sent alarms, in chronological order. Initially, we wanted to include general app settings on this screen. However, we decided to keep away from having that by carefully planning our UI design so they feel integrated and purposeful.

Next is the alarm clock, to set an alarm and to select which friend to wake the user up when it rings. We decided to go with just one alarm since the whole point of SunnySideUp is to make sure the user wakes up the right way. Snoozing or having multiple alarms defeats this purpose.

Lastly, our signature feature, to send alarm messages to friends. Users will record vocal messages and send them to their friends for them to select it as their next alarm tone. The egg represents the recorded message, which hatches after it rings. Should the user not have friends added at the moment, our friendly mascot, the Rooster, will send a wake-up alarm instead.

Power-ups were initially part of the design, such as the ability to set alarm vibration strength, a disarm alarm puzzle, or overwriting chosen alarm messages. However, these power-ups create an unbalanced experience, and might prove annoying over-time as well, so we decided to drop it.

Stepping up to MIDFI

The first iteration of SunnySideUp UI was designed as a skeuomorph of a farm. We quickly realized this caused more confusion than it was worth, as users will not be able to directly relate a profile page to a house, or alarm messages to a coop. We decided to take a closer look at existing user interfaces and improve them according to the design needs.

The second iteration was a much simpler design where we began to consolidate the most important features into simple interactions with clear labels and large buttons.

Finally, we chose to display our 3 main features in individual cards laid on top of one another. This way, the home screen shows the user all the needed information at one glance.

Shaping it with meaning

We want our app to be delightful, farm-fresh, and fool-proof. Since the life of students does not just revolve around relationships within the school, our app has to be relevant to families as well.

Dekko is our font choice. It is neat, friendly, and casual. We also went with colors that represent sunrise on a farm. These qualities replicate our design metaphor, rise, and shine.

Bringing it to life

Based on the card’s layout design, we use sliding animation to easily orient the user in the app. Since sending eggs is our signature feature, we pumped more juice into creating delightful animation for it.

Our app in a glance

This information architecture diagram gives an overview of all the screens in our app.

Plotting a user's journey

This journey map shows how our app can fit in a user's life, and create a positive effect on others.

Feedback from fellow designers

With the alpha version of our prototype done, we proceeded with heuristic evaluation from our peers. The points include user control, familiar metaphors, recognition of errors, aesthetics, help, error prevention, and flexibility/efficiency.

Much of the feedback made sense to implement. However, not all were taken into consideration. Having an anonymous option to use the app conflicted with our app design and mission to connect friends with one another. We decided to not include this suggestion to maintain the integrity of our design. We decided that Facebook was the simplest way for friends to connect, but we understand not all users have Facebook accounts, so we will implement an account creation page using email addresses in the future.

Watch the fun 

As we moved further along our prototype development, we created this accompanying experience video. It introduces SunnySideUp to interested users, as it shows how the app solves the problem of snoozing and feeling unmotivated to wake up.

User Testing 

We used two main methods of user testing, on-site user tests using our interactive HIFI prototype on Proto.io, and remote testing on individual screens through UsabilityHub. We achieved a total of 20 on-site user tests and more than 50 remote testers.

Feedback from user tests 

Most users have difficulty logging out, since we have hidden the option behind the profile page, which is not very accessible and was not introduced to the users at all. Also, we realized that users felt nervous about waking up with only one alarm. They preferred to set multiple alarms, just in case. Overall, many other testers enjoyed using the app and would use it if it is released.

Moving forward

After conducting the user tests, the next steps for us are to implement the feedback received and bring this app to life. A large part of our app requires hands-on interaction, from recording vocal messages and waking up in the morning to a message. These interactions require the app to be developed to test with. Since developing an app is not part of the course, we have to leave this portion out for the future. 

Also, at the end of the course our team has gone their separate ways due to graduation. This is the most crippling deterrent to the successful execution of SunnySideUp by Rice+Bean. We all hope one day we can regroup once again to bring nourishing and wholesome experiences to people around the world. Working on SunnySideUp is not the only design problem to solve, working as a team is another. Through this course, we have learned that UX design is not just about users and the product, but how our team can work together. At the end of it, Rice+Bean members all agree that we are a great team.

Credits

Project Lead : John Sibert
Creative Direction : Fyn Ng
User Experience Design : Team
Prototype(Proto.io) : Team
Copywriting : John Sibert / Fyn Ng
User Interface Design : Fyn Ng / Joel Salomonsson
Motion Design : Fyn Ng
Graphic Design : Joel Salomonsson
Video Animation : Johel Rivera
Illustration : Johel Rivera
Prop Design(Team Flag) : Joel Salomonsson / John Sibert