El Jardín de los Colores App

The Challenge was to design an app to give people the possibility of having a more reliable, easy and friendly way to buy flowers and the florist their self’s the opportunity of having flowers stock and the products related available and reachable.

El jardín de los colores, an app design to make users shop experience more easy allowing them to personalize and schedule purchase to be picked up at the store.

Project General Description - App for florists

This app design, comes up after identifying the imperative need florist have and also their customers to be able to purchase in advance, making processes more dynamics, saving time and effort.
This project is one of the case studies executed during the Google Professional Certificate User Experience (UX) Design, was a six month course where I play the role as lead designer.

Metodology

Mission statement and user flows

This project emerges in response to the challenge to design an app for catalog flowers for florist.

Interviews, getting insights, empathy maps, creation of “persona”, user stories, and users journey maps were the used tools in this case study to try to help broad our comprehension of the final users who are finally the ones we are designing for, trying to analyze and understand pain points and developing ideas to solve them.

User Persona

Margarita, is the “user persona” she works as a landscaper, she is 31 years old, lives with her parents and her two younger sisters, in Bogotá, Colombia.

She is a flower lover and since she is actually, in an self conscious interior change, she is trying to integrate flowers to many aspects of her life, mostly because this new life philosophy establish that is positive to try to found mindful connections and find balance with her environment through natural elements.

Problem Statement

Margarita is a raising career young landscaper who needs to be able to configure her own workspace at her own way because that would help her to get more physical and mental balance

User Story

Fictional story told in one sentence, from “the persona” point of view to para inspire and implement design decisions.

“Be able to configure a workspace consequent with my new life philosophy”.

StoryBoards

There are two types of storyboards: 1. Big picture and 2. Close up.

Series of panels or frames that visually describe and explore and user experience with a product. It is a tool to visualize potential solutions to problems users are facing and usually formed by four key elements:

  • Character: The user in your story

  • Scene: User environment

  • Plot: Benefit or solution of the design

  • Narrative: The user need or problem and how the design will solve it

Big picture storyboard:

Focus on the “how” and the “why”, What the USER needs, Their context and why the digital product will be useful for them.

  • The sketches must be user centered.

  • The sketches must indicate the context or space where the user is.

  • The sketches must be user need centered or pain point centered.

Close up storyboard

Focuses on the what, the PRODUCT and how the product works

  • The sketches must be product centered instead of the user who is going to use the product.

  • The sketches must indicate how the user interacts with the product, preferably using screen draws.

  • The sketches must indicate the transition between screens or the different steps or stages that the user have to go through.

User Flow

The path taken by a typical user on an app or a website, so they can complete a task from start to finish.

Margarita’s user flow, shows examples of some of the steps she should follow to get from point A to point B inside the app flows, or to execute a precise action, in this case, personalize a bouquet, schedule the pick time and check out.

Prototypes:

It is an early model of a product that demonstrates functionality, without actually building the entire product. Helps and allows users to experience how it feels to use the product.

There are two types: Low fidelity prototype and High fidelity prototype:

Look and Feel

High fidelity prototype:

Working on the visual getting, to the right look and feel.

Steps to create a high fidelity prototype in Figma:

  1. Layout the mockups

  2. Connect the screens

  3. Add interaction details

  4. Adjust the animation

  5. Complete for all screens

  6. Share your work

Design Kit

Flows:

Flow 1: Actions taken by the user from home page to product purchase.

This journey stars at home page clicking on menu button, navigating to product category screen, searching for a product that the user likes, next step is adding the chosen product to the cart, scheduling the pick up assigning a date and a time, navigating next to checkout page and getting the purchase confirmation on the thank you screen.

Link to functional prototype in Figma:
https://www.figma.com/proto/7oQXKmTy3ovkeAh7KbiUKH/El-Jard%C3%ADn-de-los-Colores-APP?node-id=491-4&scaling=scale-down&page-id=491%3A2&starting-point-node-id=491%3A4

Conclusion

The outcome results from this project was an capable to give the stakeholders what they ask for in terms of product inventory, process purchases digitally and provide their clients with and easy, fast and secure way to buy their products.
Concerning the user, the app allows them to choose the product from a catalog, schedule the pick up and purchase in an easy, secure way.

The app improved the user experience, facilitating the purchase process and also, as a consequence having a digital product, the florist has been able to reach more people.

Previous
Previous

Santander Bank - Design System revamp project

Next
Next

Huellitas de Corazón - Website