Visual design for an app tailored to budding plant parents
As part of a 5-day visual design challenge at General Assembly, I was tasked with curating the visual design for a mobile application to help budding gardeners connect, learn, and share tips and tricks. The app would include picture uploads, an index of common plants with care instructions, top tips from the community, as well as a blog and community forum.
By exploring visual design methodologies, I created UrbanSprout — a one-stop-shop mobile app with the purpose of building a community for budding gardeners.
I took the structure of the Double Diamond Design Process (divergent and convergent approaches) and adapted it for this Visual Design project.
To kick off this project, I began by considering the demographic and personas for my app. Though I was given the brief and list of deliverables, I wanted to ensure I was ultimately designing for the target user.
Therefore, I brainstormed potential users that fall under “budding gardeners.” I categorized these users into various skill levels ranging from serial (plant) killers to connoisseurs.
Although there was no time budgeted for user research, I felt it was important to hear from at least one potential user. Under the restricted timeline, I managed to squeeze in an interview with a 25-year-old budding plant dad and gathered some insight on his goals and pain points throughout his journey through plant parenthood (ok that was the last one, I promise!).
I also conducted a research sprint to identify similar apps on the market to gather visual references and common features.
Since the depth and breadth of the plant kingdom are so vast, I decided to tailor the app specifically to young house plant owners living in the city — in part because the user I interviewed is one, and also because I’m a proud plant mom and wanted to see if I could incorporate features to ultimately improve the experience for house plant owners with this app. Recently, with quarantine amidst the pandemic, I’ve also seen an uptick in city-dwellers wanting to spruce up their apartments with house plants and thought it would be fitting to tailor this app to them.
With a good foundation of the end-user demographic in mind and some potential features I wanted to incorporate, I began the first step of this visual design exercise: selecting brand values.
To start, I used a variety of brainstorming and mind-mapping techniques to build and define the brand values and keywords that the app embodies.
To create a more holistic brand identity, I selected personality traits that aligned with the aforementioned brand values. I then crafted Goldilocks Statements to identify the limits of my app’s personality traits by describing them in the context of a more extreme trait.
It may look like chaos, but I promise there was a method to the madness! The one rule for what you see below is… embrace the chaos. I used the following mind-mapping technique to rapidly brainstorm word associations and generate ideas for the app.
For my next step in this creative chaos, I conducted another word association for one of the app’s core values, community, and drew rapid sketches for each keyword to serve as the foundation of potential visual elements to include down the line.
After reviewing the output of my creative process, I narrowed down the following keywords that I wanted the app to embody:
Based on my brand values and keywords, I started creating a visual representation of the app’s brand personality via a mood board. I particularly wanted this app to emulate a sense of trustworthiness, approachability, and comfort.
Ultimately, I opted for simple, modern, and sophisticated designs that communicated the comfort, calmness, and supportiveness of the brand.
With a clear idea of the app’s value proposition, I knew I needed a name that could captivate my target audience while reflecting the app’s purpose of providing a community forum…
With that in mind, I explored various options through mind-mapping. Once I had a good selection, I consolidated ideas into the following:
I have to admit, I was juggling between a few viable options, but couldn’t quite decide…
Ultimately, I found myself drawn to “Urban” because of my target audience, and “Sprout” for a play on words — on one hand, it signifies growth and learning. On the other, it denotes the development of plants.
With a good sense of the app’s brand values, personality, value proposition, and name, I began curating its visual identity.
In selecting the color palette, I wanted to reflect the same feelings of trust, comfort, and support conveyed in my mood board. I wanted the app to visually communicate that “we’re a supportive community of plant parents who are here to grow, together.” To do so, I extrapolated key colors from my mood board and focused on greens, greys, warm tones, and pastels.
I then played around with different levels of opacity and brightness to build various color grids.
After a few iterations, I landed on UrbanSprout’s color palette below.
Again, I wanted to create a holistic and consistent brand identity — all the way down to typography. I thought to myself, how can I convey a sense of sophistication, informativeness, and trust, all within the confines of typography? After some exploration, I selected a Serif font for headers and a Sans-Serif font for body copy.
I wanted to strike a balance between the formal, sophisticated look and feel of the Serif font, and the modern, approachable vibe of a Sans Serif font.
.png)
With a good foundation of the brand’s visual identity and offerings, I began sketching out rough UI wireframes based on the brief.
I wanted to ensure that the logo aligned with UrbanSprout’s visual identity. To convey a clean, sophisticated, and informative look, I opted for a logotype instead of a pictorial or abstract mark.
.png)
I used an all-caps logotype to capture the urban-esque feel of a concrete jungle, juxtaposed with notes of nature to create a symbiotic relationship.
I began by putting together my onboarding page and used this to set the tone for the remaining pages.
On the onboarding page, I wanted to imbue a minimalist and clean design, while incorporating UrbanSprout’s primary color, green. Since UrbanSprout would help budding house plant parents connect, learn, and share tips and tricks, I thought to symbolize that on the onboarding page and thus created a mountain-like shape with an upward curve to reflect positive growth from using the app.
Having developed general UI elements, I wanted to continue the trend of organic shapes throughout my app. Although this was my first time playing around with illustrative shapes, I have to say, it was rather fun to explore this new technique!
After a few iterations, I landed on the sandy / beige shapes seen on the profile and navigation pages. I wanted to create abstract leaves that weren’t overpowering but still served as consistent elements weaving the nature theme throughout the app. These shapes reflect the different “leaves” of information you can learn with the app, helping you grow as a plant parent.
As I’m writing this away from the design process, I now realize that I was subconsciously inspired by the leaf of an Alocasia Frydek (or Alfie, as I like to call mine).
With a draft of the UI design, I sought feedback from prospective users. The general consensus on the visual design was very positive. Many felt that the color palette worked really well with the organic shapes to reflect the brand values and keywords I had chosen.
Here’s some of the feedback I received:
Once I synthesized the feedback, I made the following adjustments:
.png)
After iterating upon the first round of feedback, it was time for more in the form of a critique session with 20+ prospective users!
This time around, the feedback was largely quite positive — many commented on how clean, simple, and sophisticated the screens looked, as well as how the app’s design really reflected the brand values and keywords I selected. I also received positive feedback on the color palette and abstract leaf shapes, which I’m very grateful for because I had stepped out of my comfort zone by creating them manually!
The main constructive feedback from this session related to the content-heavy screen. A few users mentioned that it had too much text and could use some balancing out. Others suggested using more images or perhaps even creating content filters to facilitate readability.
All of this was extremely valuable insight because it meant that more iterations could be made to further improve the usability and visual appeal of UrbanSprout.
.jpg)
As with any project, there’s always room to grow! Due to the time constraints of this 5-day visual design sprint, I had to prioritize the key features of the app. Given more time, here’s what I would do…
