LindiTilli Floral Designer

Interactive Prototype Design

Company/Client

LindiTilli

Project Date

July - September 2021

My Role

LindiTilli has asked that I create a website that features her floral design work and includes a contact form for potential clients to work with her and connect. My roles and responsibilities included research, information architecture, task and user flows, wireframes, responsive design, prototyping, testing, and design implementation.

Project Summary

LindiTilli is a floral designer website, designed to appeal to users who need to hire a florist for their wedding or event, and order floral gifts. LindiTilli is not only a floral website, but a personal brand. I was able to work with a client who wants to make this a potential full-time job from part-time experience. While working together I was able to create a fully interactive prototype for her future business.

This project needed to happen because a client needed a website design for a business that she wants to start casually doing. I expressed interest in designing something for her so she can start small with a career that she loves and wants to get into. My client has had more experience creating beautiful designs for weddings, and with me knowing that I began creating it as a wedding floral website only. After doing more research and hearing out my clients thoughts we pivoted to a website that sells more than just wedding flowers, but also included other events and gifts for sale from her. During this research I found that flowers are most sold as gifts, and floral designers are most used for weddings. Therefore, the outcome I wanted from this site is to showcase flower arrangements and designs for the user, and have the final outcome of users to be to contact my client for a consultation on any of there flower needs.

The Design Process

Understanding Challenges and Problems

My goal for LindiTilli was to create a responsive website that is easy to use and allows customers to browse through all the different flower arrangements and have an easy contact form.

  • The website needs to be responsive so users can access it from any device (laptop, tablet and mobile, mainly)

  • The website should be able to show all products with easy to use filtering.

  • Create a welcoming feeling and sense of ease when contacting LindiTilli

Competitor Analysis

My process began with looking at the competition. I found all the competitors through a website called theweddingwire.com, on this website people can search for floral contractors for their wedding. Once on the website I decided to search by location in Denver, this is because my client is only doing in-state or local deliveries. The best way to find the local competition is to search locally and see what else there is in the area to provide floral designs.

These were the four main competitors that I found and felt the most comparable to LindiTilli.

Persona 1

After reviewing what the competition had to offer I looked for patterns and who their audience was for each site. I narrowed it down to two personas. The main persona is going to be a bride to be, she needs to have a simple, stream-lined process to figure out what wedding flowers she needs. She also has a vision board filled with ideas, but needs help to find what will fit her budget and ideal look.

Persona 2

The second persona is a person is a relationship looking for a beautiful floral gift for there partner. This person wants something personable and to be able to work with someone who will help them to create something as special and unique as their partner.

 

Task Flow

After I created my personas I decided to work on what I thought the user and task flows would be. I started with a general task flow the task flow of the user. I found that I want the end goal to be that the user contacts LindiTilli for a free consultation and ends up buying flowers.

User Flows

From the main task flow I created two user flows the two main flows that will be used. One flow would be the user searching by event looking at past work based on the event they were used for. Another user flow option is to search by type of gift.

Logo Design Process

With this first draft I also created my first style tile page to show the client. I began with a light design as many other competitors had brighter sites that had minimal color so the eyes could be drawn to the products.

When creating my Logo I kept to the rust orange for her name and decided on the green leaf background because my client does a lot of work with greenery and I think that makes her stand out from the competition. I thought I would incorporate the typewriter font for all fonts used. For the colors I picked a red color that goes well with the orange and green.

This style tile was minimal due to me wanting to make sure the client liked all the fonts and colors before I continued to make a full design. I also showed my client the first draft of my logo for her.

After showing her my work I had some notes and fixes to work through.

I then created a minimalist logo that included the mountain-like flowers she wanted. I also included her name in serif “typewriter” font that she liked and wanted as well. I decided to create a few more color schemes for her to choose from as well.

Wireframe to Prototype Iterations

After creating my main task flow and user flows, I was able to create some wireframes for the site. I had a few ideas for each page and how I wanted them to look, I started with a desktop size for the wireframe templates. These four wireframe templates include a Home, About Me, Prices, and Contact Page.

From these sketches I created desktop pages. From my client I gathered what she wanted her brand to look and feel like. These are the statements I took to direct my design: Whimsical like the flowers, the earth is speaking to them Rust orange Brick red Tan Minimal/typewriter, notices minor details/perfectionist

I then started to create and fill in the wireframes for her website. I decided to use a lighter colored logo for her site, this is due to weddings and other events being bright and fun occasions I thought the white would work well with her shop mission.

Once showing her my first draft she liked the highlights and main tan color used for her site. She loved the logos and fonts as well, but felt like the site was too bright. So I decided to try out using my darker logo with the site and used that base grey as the header and footer.

For my second draft I took my clients needs into consideration and made a darker looking site. I still did not want it to be too dark so I kept the buttons light and hover states lighter as well as to not make the site too dark.

  Wireframes

My process began with creating a first draft , before showing to my client.

Final Style Tile and UI Kit

Once I settled on a color scheme and my client was happy with it as well I created my style tile for the company.

My style tile includes both logos used on the site and all the colors used. It also includes the font used and the sizes used and each button state and color. This also shows the photos and textures I used to help direct me and inspire my style. It also helped me to understand and communicate my style with my client.

Usability Testing Results

When it came time for testing my design I created set tasks for users to complete on my website. I had to users talk out loud about their experience on each page while they completed their tasks.

Once reviewing all the feedback I made an affinity map to find patterns and things I could do to make LindiTilli a more clear and streamlined process.

Homepage - Prices:

  • Clear message on what the site is

  • Prices is nicely laid out

Contact Me:

  • Add phone number input field

  • Add option to pick contact method

Search:

  • Hover option to show where arrangement was used

  • Filters work well and are clear

Review:

  • Clear photos and text

Overall, I found that I needed to work on my “Contact Me” page. I needed to make sure it was clear how the communication would be going forward and have clear options for the consumer. I also added a hover option so users could see where past work was used.

Final Draft

My final draft has come together as fully functional interactive prototype.

The outcome of this prototype has shows a fully successful test and an understanding of functionality from all users and testers. This project was different from my past ones, because I had a real client that I needed to work with and keep up to date on my work.

Review

The outcome of this prototype has shows a fully successful test and an understanding of functionality from all users and testers. This project was different from my past ones, because I had a real client that I needed to work with and keep up to date on my work.

My initial intent for this site was to make a site that would just cater to wedding flowers and design. Since working with my client I had to pivot and adapt to create a site that fits her needs and her creative vision. This site has been a success for both the client and myself.