Sunny Side Up

1.-TeamBrief_1400.jpg

What, and who?
SunnySideUp is a social alarm app that lets friends wake each other up. It is a product of an intensive 10-week course on UX design. Our team consists of 4 student designers. John Sibert and Joel Salomonsson from Industrial Design, Fyn Ng from Motion Design, and Johel Rivera from Sequential Art.

We call ourselves, Rice+Bean. The name embraces our differences in culture and influence. As a team, we are committed to creating a wholesome and nourishing experience for our users. We set our core values right from the start to direct how we design our social media app.

1.RiceBean_1400.jpg

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.

2.-ResearchLocation_1400.JPG

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 with 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.

2.-AppsChoose_1400.jpg

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 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 mind, 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 friends list with a notification feed to see who sent alarms, in a chronological order. Initially, we wanted to include a 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 it 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.

SunnySideUp-LOFI_03_1400.jpg

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.

brainstorm_1400.jpg

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.

Mid-Fi-Protos_1400.jpg

Shaping it with meaning
We want our app to be delightful, farm-fresh and fool-proof. Since the life of students do 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.

4.-Styleguide__1400.jpg

Bringing it to life
Based on the cards 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.

5.Animation_1.gif

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

Architecture-Map_Landcape_1920.jpg

Plotting a user's journey
This journey map shows how our app can fit in an 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 address in 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.

surveyform-01_1400.jpg
 

For remote testing, we set up individual screens and gave specific tasks to our tester to complete. The above heat map shows where most users interact on.

User-tests1_1401.jpg

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

Software
Sketch
Illustrator
After Effects
Proto.io
Keynote