top of page

IOS mobile application


PRoject Details

  • Role: UI/UX design

  • Tools: Google docs, Adobe XD, Adobe Premiere

  • Timeline: 

    • Feburary - April 2021

      • Total duration: 10 weeks

PRoject Description 

Challenge: Many people have picked up planting due to the stay-at-home order caused by the pandemic. Retail oftentimes overprice their products which makes plants unobtainable.

Goal: Create and facilitate a supportive environment for plant-lovers to connect and grow together.

PRoduct Description 

GRO is an IOS mobile app bringing together plant enthusiasts by offering them a platform to connect and expand their plant collection through sharing. People can trade and donate plants, clippings or seeds, gardening resources with other app users. They can discover, organize and attend plant-related events and workshops around them and share green-thumbing knowledge with each other. They can also track the growth of their plants by creating time-lapse videos. The app is for plant lovers interested in fulfilling their horticultural desires while diversifying their plant collection.  

tracking growth-01.png

Primary research 

A generative research data collection method based on inquiries of using survey and one-on-one stakeholder interviews were conducted to help generate insights. The survey gathers quantitative data whereas one-on-one interviews encourage individual thinking and allow me to probe deeper into the interview questions. At this stage of the design process, the aim is to explore and ideate potential solutions with the primary goal of figuring out who are the users and what are their unmet needs. In order to identify how they think, feel, do, know, believe, and expect, users’ current and ideal behavior should also be identified to seek out the core problem they encounter.  By understanding their needs, pain points, behaviors, and goals, we can tap into the missed opportunities and inspire new ideas. The sample size for the survey was 55 participants. The pie charts below depict the quantitative research findings:

tracking growth-03.png

Affinity diagram 

The affinity diagram displays categories of interest by grouping. These are the groups discovered after synthesizing findings.

Concept Map


PErsonas & empathy mapping

Persona profiles defines target user’s characteristics, interests, goals and pain points. Personas generate empathy; and empathy is essential to core of UX design. Empathy is the capacity to understand or feel what another person is experiencing from within their frame of reference. Below here are the two personas and their empathy mappings.

persona damien-01.png
persona damien empathy-05.png

User Journey

User journey is a timeline of user actions that describe the relationship between the product and the users. It is a visual representation of a user’s interaction with the product from their point of view. It focuses on what the users see and what they do. Based on the same user scenario, I have created two versions of the the user journey. One is the as-is state, the other is the to-be.

user journey-01.png
user journey-02.png

User Flow

User flow is a visualized path that the user follows through an app to complete single or multiple tasks. It represents the workflow or process from the user’s perspective. User flow is fast to create and they’re the first step to creating your app. When thinking about user flow, it is essentially task flows combined into one. .

user flow gro-01.png

Information architecture

The information architecture. In other words, the site map. A site map is a visual map of all pages/screens that exist within the digital product. The purpose of a site map is to help designers visualize the hierarchy of pages based on their order through optimized navigation. It is essential for planning a website or an app.

Site map gro.png


The wireframe is the preliminary step to structure the skeleton of the app. At this point, the wireframe should be kept in greyscale so it isn’t distracting. It should also be structured linearly so we can follow the order easily. Wireframe is an important communication tool that articulates the design visually.

trade wireframespng.png
events wireframes.png
Style guide.png
logo iterations-27.png

logo iterations & Style guide

Promo video


bottom of page