Spring 2019, I had the chance to work as a part-time Design Associate at GrowSquares, which offers a platform that marries remote microclimate and weather forecasts with a mobile app which captures on-site environmental data to tailor recommendations on what to grow.
I researched and designed features for the mobile app's payment flow, worked on interactive prototypes using UI designed by another design associate, and designed the company's new website.
Duration: 3 months.
Results: App Prototype, Interaction Flows, and Website Design.
Team: 1 Design Associate, 1 Product Manager, 1 Front-End Engineer.
Design Tools: Sketch, Principle for Mac, Adobe Photoshop, Illustrator, and Zeplin.
My Role: Research, User Testing, Visual Design, and Prototyping.
Created High Fidelity Prototypes for iOS application.
Although I was involved in the product thinking stage, some of the designs shown here were created by the other design associate and animated by me using Principle for Mac to how each screen interacts with each other.
At GrowSquares, I had the opportunity to work with a fast-paced, highly-motivated team dedicated to producing a quickly-evolving product with great user experience. Within this startup environment, I’ve honed my skills in product thinking, visual design, interaction design, and motion design, while using Sketch to create mockups and Principle tool for animations for the company's emerging features throughout the platform.
Designed new iOS application's checkout process.
Please scroll down to read the full case study on GrowSquare app's checkout process design.
Checkout Process Design
Project Vision & Challenges
GrowSquares app walks users through the lifecycle of their garden from plant selection to harvest and every steps in between. The app provides live notifications of plant life-cycle changes along with tailored advice on how to best maintain your garden for optimal yield. In order to provide a delightful gardening experience and make users order the products again, there were three challenges to answer.
Visualize the products and Prices in engaging way → Fun.
Aligns with the theme of other parts of the application and works as one → Seamless.
Create easy-to-understand checkout process for gardeners → Intuitive.
In this project, we will try to break up the checkout process into smaller experiences.
Payment and Shipping.
Let's see if we can improve them one by one, starting with the shopping cart.
Starting off, I asked myself a few initial questions to figure out where the team should be heading to. Who is the app's primary user? What kind of goals do they want to accomplish? Why would someone use this application? We talked to the stakeholder on the business side, our product manager, Daeshaun McClintock to learn about GrowSquares' business and product goals. This conversation helped us learn about previous research, determine scope for the project and to better understand the opportunity. In order to gain a deeper understanding of our users and their needs, we moved onto user research phase.
User Research: Understanding the Why
Competitive Analysis: How Other Products Handle Checkout
Goal: Enable users to purchase the products for their gardens easily in order to make sure they lead to profit for the company.
In order to construct a concise and solid foundation for GrowSquares's checkout flow, I had to venture out and see what the prominent
e-commerce applications were already doing and what user goals they were not reaching well. I evaluated several features deemed vital from user surveys and identified which ones GrowSquares app could capitalize on to have more presence among other applications.
Evaluating the Activity
Just how popular is urban gardening in general? Across gardeners located in the United States, close to 1.2 Billion dollars are spent. Since 208, food gardening has shown close to 308% growth in 10 years and participation among families from middle socioeconomic status has increased by 242%.
With this in mind, it became clear that people's passion for gardening is not going to disappear, at least not for a long time.
Instacart: Grocery Shopping App
Market research: instacart app
Immediate feedback is given to the user by changing the color of the selected form to green.
Possible actions are communicated clearly by distinguishing active buttons and inactive ones using two colors (namely green for active and grey for inactive).
Having separate screens for filling out the address and payment information prevents the app from having a long scroll.
The expand/collapse interaction summarizes the whole process in one view.
Instacart checkout process actually consists of two carts. In the place order screen, users see the list of items they are purchasing. But in order to arrive at this screen, they must click [Check out] button in the shopping cart. Even though it might be there to prevent users from buying the wrong items, it might be redundant information for some users.
A lot of users have the same address for shipping and billing. Having users fill out the same information twice seems to be unnecessary.
Goat: Sneakers Shopping App
Market research: goat app
Pros: For users of Goat's iOS app, the app has the default option of paying with Apple Pay and using the Apple Pay Address for shopping. In case the user is not a fan of Apple Pay, let's consider the credit card option, which is the most common choice. After the user selects a payment option to use, the user is taken to a separate screen where the user can type in the credit card information and the billing address. What is convenient for users is the fact that this application offers the option to use the billing address as their shipping address. The whole process is very quick. Depending on the payment option, the user can even check out the product in one screen. It also has great feedback to users by providing error/warning messages under the text field. The feedback is not intrusive and does not disrupt the process.
Cons: The app actually does not have a concept of "a cart." When the user selects an item and size, the user is taken to the [Check Out] screen (pictured above) right away. It does not allow the user to check out multiple items at the same time. Even if it can be done, the user cannot figure out how to do it because one is taken to the screen without any warning. If the user wants to purchase multiple items, the user will have to go through each process multiple times.
Farfetch: Fashion E-commerce App
Market research: goat app
Pros: Farfetch provides feedback to users by using icons rather than text. The use of image and color allows the user to know what is going on as they are performing the tasks, but they do not have to process extra information when communicated via texts. The scan your card feature saves a lot of user's time.
Cons: One of the biggest cons of Farfetch app's check out process was that there were too many steps (screens). Also, the button on the bottom seems clickable all the time, not communicating well which actions are possible or which should be done. The information in the shopping cart screen also seems like it can be placed in the check out screen. Along with the analysis of Instacart, it led me to question if the shopping cart is necessary and if it can be designed differently. Also, the promo code field appears after the user clicks "proceed to checkout" but users might want to use the code before deciding whether they should move on.
1) The part I discovered to be an essential part of a great checkout process was providing the proper feedback to the user in an appropriate method. This discovery is especially relevant to the forms which users must fill out.
2) Even though the process may be boring, some of these apps were doing a great job by making the process fast and intuitive.
3) Navigating through the checkout process is a two-way road: users must be able to go back to the previous step. If necessary, review the information and move forward to fix it. Users must be able to check their progress all the time.
4) Screens should have the same context (Styling). If each screen has a unique layout and styling, users will have to study every screen before one can start interacting with confidence.
User Testing & Findings
Using the checkout screen designed by a designer who worked at GrowSquares previously, I did a user testing to figure out any issues with the pre-existing user interface and find rooms for further improvement.
Previous Shopping cart and checkout process design
1) Too long scroll.
"Because everything [the cart, delivery information, and payment] belongs to one screen, I had to scroll a lot and it was difficult to remember where I was in the process."
2) Hard to skim the information.
"Information is not collapsible, so it was hard to check if my information was right."
3) No feedback.
"There is no indication is the app accepted my input."
4) Does not account for multiple use cases.
"What if I have more than 1 garden? What if I just want to purchase individual products? Is there a way the items will be organized?"
Persona: Meet the User
Defining the Problem
The People Problem
After several rounds of testing and conducting market research, I found that the current design does not inform the user of the current stage and deters users from purchasing the product.
People want to check their progress throughout the process but they have a hard time keeping track of their information and if that information is correct.
The Product Goals
While considering the product goals that address the people problem, I kept in mind the three challenges that we formed in the beginning: Fun, Intuitive, and Seamless.
Support multiple garden use cases but make it fun for users by visualizing each cart.
Separate the payment and delivery information so that users are not overwhelmed.
Allow users to check the information before confirming the purchase.
Provide proper feedback throughout the process.
Sketch Explorations: Initial Approach
Low-Fidelity Sketches for Scheduling Posts
I learned that a screen for shipping address is not required because the application collects the address from users before allowing them to choose the products. The shipping address can be prefilled, and the option to use the shipping address as the billing address should be given in the payment screen.
Designing the "Shopping Cart"
I then explored different ways to design the most intuitive and fun "Shopping Cart" card for the Check Out page.
I initially explored a way to present the most information (price, type of Growsquares product, variety of the plant, garden type, etc.). A was not suitable because the information was too abstract. Meanwhile, C was not able to account for the mutiple garden scenario. Users were not able to learn how to use D in a short amount of time. If organized in the traditional way F, users had to scroll and other parts of the checkout process were not visible. The design that was able to show the most information while not taking too much space was B.
I changed the design to E since it was more visually appealing while showing more information and not taking too much space on the screen. Design E made better use of screen real estate.
Designing the "Product Information"
I then explored different ways to design and present the product information for the Shopping Cart. Talking with the product manager, we organized the information required to be shown into two categories: GrowSquares Product Information and Garden Information.
For each GrowSquares product: Plant Type (Hot Pepper), Plant Variety (Cozumel Hot Pepper), and Quantity.
For the Garden: Type of Garden (Raised Bed), Quantity of GrowSquares, Price of each Product, and Total Price.
The only design that accounted for the information that must be presented was F.
Designing the "Payment and Shipping"
Visual Explorations for Payment, Shipping, and Promotion Code
I decided to pursue option A because it aligned better with the card design of the upper half of the screen (cart part).
Designing the "Form Feedback"
Visual Explorations for Form Feedback
I tried to create a form feedback that fits into the GrowSquares app's current style and clearly indicate positive and negative feedback. With B, I found that using text message and icons together was most effective in conveying the two types of messages. A was sometimes not clear enough to users.
Final Design: Putting it together
User Flow for Check Out
Conclusion: What I Learned
The part-time internship during the semester was both a challenging and rewarding experience for me.
While balancing coursework under a given deadline, I learned how to prioritize features and managed to finish the MVP of the application. More importantly, I learned how to utilize and adapt multiple design methods in order to solve the user's problem under a tight timeframe. I was also able to create prototypes of multiple interactions and practice prototyping and interaction design skills in depth.
Overall, designing a mobile app and a website with the help of a product manager, design associate, and front-end engineer was a meaningful experience.
1) Design for payment methods other than credit cards.
2) Conduct more rounds of user testing.
Full Demo: GrowSquares App
Below is the full demo of the application. From onboarding to the payment, this is a demo of the first half of the application, which allow users to select their garden, location, plants, and checkout.
Here are designs of the website the team has been working on so far! It is currently being built by our awesome front-end developer. A full case study on website design is coming soon!
Aiden Yeonsuk Kim's Portfolio