Modern Garden

Since cloud storage for this niche market doesn’t exist, I conducted a competitive analysis between the three most popular cloud storage services: Google Drive, Dropbox, and One Drive. By looking at their strengths and weaknesses, I determined I definitely wanted an ample free storage plan as well as good prices for the paid plans. I also determined that since the big names in cloud storage are multi-purpose and general, the best way for a new competitor to enter the market is by specializing in something specific, finding an unexploited niche.

Once “all natural, DIY recipes” was the decided niche, I looked at Pinterest, but it didn’t solve the problems. It only provides links to outside sources. So I looked at websites and blogs that feature these recipes to get an idea of how the recipes are displayed, what types of people would use this, and how I could later brand the app.

I also looked at Cookpad, a recipe creating and sharing app, to get an idea of what to include for the recipe creation page. Although food recipes are different, so it was merely for inspiration.

I conducted a survey to determine if and how users would use this type of app and what features to include.

From the results of my survey, I came up with two personas. The users for this app include an enthusiast who wants to consolidate all the types of recipes she’s discovered in one place for herself and her family and a social media influencer who wants to create, organize, and share content in tandem with her social media channels.

In order to come up with plenty of stories to choose from, I thought of what general cloud storage users would want. After I generated some User Stories and prioritized them, I thought of what my niche users would specifically want and selected the following to focus on:

From the User Stories, I iterated how users would perform each task. I initially chose Create Account, Sign In, Upload File, and Create File, but then to help create a more complete minimal viable product I added Select Plan to the Create Account flow and added Share File and Upgrade Plan.

After doing some Content Strategy, I sketched out and digitized the wireframes for each page needed in the User Flows. Moving from the sketches to the digital versions, I added the payment plans, testimonials, and footer to the landing page to again make a more complete minimal viable product. I also wireframed out each page for each step in each flow to help me visualize the flows better and how the prototype will work.

I turned these wireframes into a clickable prototype and conducted some usability tests. My participants had the following feedback:

Looking again at those DIY recipe websites, I got some inspiration for how I want this app to look. I decided on a peaceful, bright, and modern brand.
Next I created a mood board and style guide to complete the branding process. The greens in the color palette represent the peacefulness of nature and the pinks give it that bright pop. The ample white space and high contrast gives it that modern feel.

I chose SeoulNamsan CB for the headers and Source Sans Pro as the complementary text. SeoulNamsan CB is sans serif and naturally bold to reflect the modern characteristic and humanist to look more flowy and natural. Source Sans Pro was chosen because it showed enough contrast to ensure proper hierarchy yet looked similar enough to promote continuity.

After a plethora of sketches of a potential logo, I took my favorites to the digital drawing board and initially decided on this:

I really liked how the M and G served as a visual representation of part of a flower, but the feedback I received was that it looked like a tooth and that a more abstract approach might work better. My second attempt looked like this:

Now that the logo was more abstract, I was told that it would be better to type out Modern Garden and have the logo be separate to avoid confusion. Here’s the final version:

For a “modern” app, my 1st attempt was a little dated looking, but a few tweaks after some feedback got things going.

Making the images bigger and the logo smaller give the landing page more balance, expanding the colored sectional and skewing the edges makes the page more interesting, and the large thin arrows, shadowed cards for the plan types, and sharp edges all push it to that modern look. The pages with the form fields looked pretty good overall, I just removed the black borders around the field entries and gave them inner shadows which looks much sleeker.

I conducted some preference tests for the final logo design, and the mobile landing page. I learned that while the users give amazing feedback on your designs and can help you make better decisions, sometimes it's better to go with your gut.

While 67% prefer the iteration on the right, I actually prefer the left iteration as I like the text and image being roughly the same height, but I know it’s about what the user prefers. Since both iterations are strong choices, I would consider using both iterations depending on where the logo is being placed in regards to the rest of the content around in or what type of device the page is being viewed on.

79% prefer the iteration on the right. I definitely agree with these results. I think the right iteration still maximizes the viewing space while looking more aligned and crisp.

69% prefer the left iteration. One person also said that although they like how all 3 plans are visible in the one they chose, they also like the idea of graying out the less emphasized options. So, next I’ll toy around with the idea of incorporating gray into the left iteration or just leaving it as it is. Although I really like the idea of the right iteration, I agree that having all 3 plans visible looks more clear and doesn’t give the user as much “work to do” (ie: scroll side to side to view options).

I did another round of usability tests with my mockups and made the following changes based on the results:

Which created the final product:

I found that off the bat, I nailed the color scheme. There was good balance of negative space and contrast in colors. However, I didn’t have a good eye for modern design, but after some guidance from the lead designer I was able to re-imagine my ideas into a more appealing site. As a junior designer with only one project under my belt thus far, I had plenty of doubts in my ability in general. There’s a reason the design process exists though. It really helps you walk through every detail and make informed design decisions. Constant feedback and iterations is also key. As I keep practicing I’ll only get better and faster. With more time I probably would’ve included more detail and functionality. I learned a lot about borders, shadows, iconography, and how they’re all incorporated to portray the branding accurately. I’ll use this to make my first iterations on future projects a bit more solid and fleshed out so that subsequent iterations can be even more detailed and refined.