Rose. Bud. Thorn — An Update

Rose. Bud. Thorn.

Earlier this year, I wrote about Rose.Bud.Thorn, an app idea I’ve had for a while. Over the past few months, I have been working on creating a brand and general workflows for the app. I would like to share some updates with you all! Here is a link to the first article I wrote if you want to see where I started.

When I started working on this idea in August, I didn’t really know where to start. However, I decided that I would spend an hour or two every week working on something related to the app.

Goals

First, I came up with goals that I wanted the user to get out of using the app. Here’s what I came up with.

Write a sentence. Write a paragraph. Write an emoji. Just. Write. Something

Mission Statement(s)

I wanted to expand on these goals a little bit, so I drafted up a bunch of mission statements.

  • To give people a place to write down their thoughts to create a daily routine of reflection and introspection, no matter how busy and hectic their life might be.
  • To create a safe place for reflection and introspection.
  • To inspire people to write down their thoughts without limitations.
  • To empower people to create a reflection routine that eventually betters their mental health.
  • To give people a starting point for creating a daily writing routine.
  • To create something friendly and inviting that is easy to use.
  • To get people to look at the highs and lows in their life and have an honest conversation with themselves.
  • To get people to start writing about themselves and their problems.
  • To get people thinking about mental health and mental health resources.

I found it really useful to start with these ideas because it gave me a foundation of what values I was looking to embody while designing the brand and ultimately the app.

Competitive Research

Then, I decided it would be important to see what other apps were out there. This gave me a lot of insight into what I wanted and didn’t want in the final design. Here is my finalized Brand Audit.

From this, I knew I wanted several things.

  • Customizable: typefaces, handwriting, apple pencil.
  • Clean design with few clicks.
  • Locks for personal notes.
  • I want it to be more structured with the “rose, bud, thorn” format.
  • End of the day reminder for the person to reflect on their day.

Branding

At this point, I thought I would be ready to start thinking about what I wanted this app to look like aesthetically.

Inspiration

I wanted to start by creating the logo, for which I looked up a lot of different roses in a lot of different styles. The final rose I came up with was very similar to the initial idea I sketched out over 6 months ago. The colors I chose for the logo are also the primary colors used throughout the app design.

Logo

The final rose I decided on…

Rose.Bud.Thorn Logo

Typography

I knew I wanted a friendlier typeface for the app, so I decided on quicksand. I experimented a lot on Google Fonts to figure out exactly what I wanted. With its wider letter forms and rounded edges, it is inviting and kinda cute!

Colors

The colors were mainly based off of the logo. Again, I wanted a friendly, warm interface that users could keep coming back to. As you will see later, I use a lot of white to keep the interface as clean as possible. The text used throughout the app is a dark gray instead of black.

Primary App Design

After working on the app for a couple of months, I was fortunate enough to continue working on the app design in one of my classes. I took Interaction Design — Mobile this past semester, where my professor allowed us to work on whatever we wanted for our final project. I decided that it would be useful for me to workshop Rose.Bud.Thorn in the class. Luckily, I had most of the branding done, so I got right into the user workflows.

Hero’s Journey

Primary Hero’s Journey
Primary Hero’s Journey
Primary Hero’s Journey

My professor really wanted us to focus on what type of user would use this application, and a story for that person. I initially drafted a Hero’s Journey using sticky notes to show how my user persona, Beth would use this application and how it would fit into her life. Based on my initial user research and interviews, I decided Beth would be a newly graduated student who is employed but unhappy with her job. She wants to create routine in her life and become a writer. This narrative was really easy to turn into a journey because I could think of Beth and her general pain points.

Hero’s Journey — Digitized

I then translated this primary Hero’s Journey into a more finalized digital version. It really takes you through how Beth might use the app, and the benefits and rewards she gets throughout the journey. This is a really cool way to figure out how your app fits into the larger ecosystem.

Finalized Hero’s Journey

Storyboarding

My professor asked us to create a simple storyboard using the Hero’s Journey. Here I drew out the scenes of the journey, as well as the screens that Beth might be seeing throughout her day and life.

I found this to be really helpful for creating my initial UI Spec for the app. I had a set of screens to start designing. I would recommend every designer to start with some sort of storyboard. Even if you aren’t a good artist, it can be helpful to visually walk through the process.

Final App Design

With most of the ideation done, I started to work on the logistical digital user workflows. This process includes more technical design of sitemaps, UI and VD specs.

Sitemap

I wanted the app to have a very simple design, thus with this very simple sitemap. Each branch has very few screens, and it is easy for an user to get back to the home screen whenever they want.

UI Spec

The sitemap resulted in creating initial wireframes for the app. A UI spec is a really good way to think about the intention behind every part of the screen. It is generally a gray scale set of wireframes that focus on the function of each screen. It is a useful technique to employ meaningful design for every step of whatever you are creating.

A couple of screens from my UI Spec

Throughout this design process, I would present the work I had done so far to the rest of the class. I would be critiqued and make improvements to my designs.

VD Spec

Using my UI Spec, I translated the screens into a full color prototype. The VD Spec shows a couple of the important screens as well as a high level overview of the color palette, typefaces and buttons I would be using.

Clickable Prototype

Here is a link to my final clickable prototype. My professor suggested that I keep each of the workflows clean and distinct. I used my color scheme to ensure that users know which workflow they are on. For example, if they are writing their rose, bud and thorn, everything is pink. If they are in their archives, everything is green.

Future Plans

Over the course of the next semester, I want to make this app real. I have created a working plan for the coding portion of the project. I hope to have an update on that in the upcoming weeks.

boop a snoot today