emma savage - Design Practice

Final Outcome

To the left is the fully functional final app prototype.

For a full screen version (opens in new tab) click here.

A video walk-through version, taking you through the app is available at the bottom of this page.

INTRODUCTION

Twine is a multi-functional mobile app that is a business and social tool for florists and British flower growers, as well as an e-commerce platform selling the best of seasonal British grown flowers directly to the consumer.

EXPLORING IDEAS

Spending four years working as a florist has exposed some ugly truths that lie behind the beauty and sentiment of cut flowers. A particularly surprising statistic is that ‘90% of the flowers sold in the UK are imported not just from Holland but flown from as far afield as Ecuador, Colombia, and even Ethiopia’ (Flowers from the Farm, [online]). The nation’s favourite flower- the rose, so very British in its symbolism and popularity, is almost always imported from Kenya. Even flowers that are grown closer to home in the Netherlands pose an equally damaging environmental impact, with flowers cultivated in vast heated glasshouses (Smithers, 2019 [online]).

Despite environmental benefits including a smaller carbon footprint due to fewer air-miles, and increased biodiversity on UK flower farms supporting wildlife like bees and butterflies, ‘the virtues of British cut flowers are not promoted to the wider consumer market’ (Gray, 2016:17 [online]). However, many florists have begun to make the shift towards seeking seasonal British produce, in light of factors including Brexit, the Coronavirus pandemic and the Climate Emergency.

As I started on the MA course a few weeks late, I knew that I would need to come up with a project idea at speed if I was going to keep up. While I was thinking about the aim to 'solve a problem', one of the first things that came to mind was my passion for floristry, but my concerns over its environmental impact from what I observed while working within the industry. When sharing my initial idea during our first presentations, it was made apparent to me that the air miles and mass-greenhouses is not wider knowledge amongst the public. It is up to those in the industry to talk to their consumers about why they should consider buying local, seasonal flowers- which would mean changing their buying habits, and question the ethics and sustainability around their business. This lack of public knowledge around the flower industry, and the shift towards more sustainable living, made the decision for me that this project would be an interesting and worthwhile one to pursue.

Presentation slides from initial project idea that was presented to peers in Week 4.

CONCEPT

Creating an app that makes it simple for florists and growers to connect offers scope to generate a collective of likeminded industry professionals, who with a shared goal to educate and reform the industry has real potential to make positive change. Also serving as an e-commerce platform, consumers can sign up to the app and use it to purchase directly from a florist they can trust has implemented sustainable practices into their businesses, and uses seasonal, British blooms in their designs. Engaging and informative content can share with the consumer the benefits of buying from sustainable florists and making more environmentally- considered buying choices, bridging the ‘green gap’ between consumer awareness and actions (Arnold, 2009:76).

There has been a sharp rise in online as a retail platform, and buying flowers is no exception. Twine offers opportunity for flower businesses who would struggle to create their own online presence, particularly in app form, to grow their businesses and expand their clientele to a new age of consumer.

In order to join Twine, businesses must adhere to some key guidelines as they are representing the app’s ethos. For example, only selling arrangements that are made with British flowers, use recyclable packaging, and having transparent growing practices. These guidelines can be presented in the form of a ‘Pledge’ which can be viewed by any visitors to the app.

PROJECT RESEARCH

Survey findings

SURVEY

I carried out two surveys via SurveyMonkey. The main purpose of conducting the surveys was to help to develop key features for the app. I also wanted to gain insight from florists and flower growers across the UK, so not to generalise my own experiences to the industry as a whole. Initially I created a survey aimed at florists only, and I shared it on two florist Facebook groups. I had a few responses from flower growers who were keen to take part, which inspired me to create a second survey aimed at flower growers, as I realised just how little I know about the sustainable floristry movement, but it is certainly growing. Conducting these surveys has also identified some key industry contacts that I aim to communicate with in the later stages of this project’s development.

Survey 1: Florists & Flower Industry Sustainability Research Survey

Survey 2: British Flower Grower & Flower Industry Sustainability Research Survey

The survey responses revealed the following:-
• Florists are keen to use more locally sourced flowers, and are aware of the carbon-footprint and lack of transparency from suppliers selling imported flowers
• Aside from Flowers From The Farm, no other websites or platforms were identified as a means of easily finding suppliers/florists
• There is a lack of efficient communication between growers and florists at present
• There is a need for consumer education to change their buying behaviours of flowers

INFLUENCES

FLOWERS FROM THE FARM

I have been unable to find any existing application or website that offers the service that I aim to with this app. I am however aware of a website called Flowers From The Farm, which is an not-for-profit organisation that is building a database of florists and British flower growers across the UK. Florists and flower growers can join as a member, which adds their contact details to the UK map. FFTF attracts many of the sustainable florists in the UK, but there isn't the option for consumers to browse and buy from UK florists and growers, so is more like a directory for those within industry. Flowers From The Farm website.

BLOOM & WILD

Bloom & Wild are a British online florist, and the only florist company I have identified with their own app. Their e-commerce app works much in the same way as their website, allowing customers to order flowers 3 and personalise their account. What I really like about Bloom & Wild is their commitment to building their brand online and championing sustainability. They break the mould of traditional florists, who often struggle with building a successful online aspect to their businesses due to alack of time and financial constraints. A tech-forward florist, Bloom & Wild has developed an app version of their online store, and promote themselves through online and television ad campaigns- most recently the 'Care Wildly' campaign.

WIREFRAMES

Above: My very first wireframes, setting out the core features for developing two different interfaces for the app- one for the general public and consumers, and one for business accounts.

___

Below: Final low-fidelity wireframes produced before the prototyping stage. I tried to consider as many features as possible, and this also helped to determine which pages were a priority to make and which may not be created.

Before I finalised my colour palette for the app, and went any further with the time consuming illustration process, I applied some of my illustrations onto my low-fidelity wireframes to see how they worked. After receiving positive feedback during a peer review session, I was happy to continue with my plans to make illustrated elements a key design feature for Twine. Putting colour and image into context also helped to visualise and gave me a greater sense of direction for the overall appearance of the app.

BRANDING

An earthy colour palette of rich and vibrant tones. I worked from this core swatch I created and would create new colours through lightning and darkening the shades, to maintain brand consistency.

COLOUR PALETTE

With my hopes to make Twine an app that engages users, incorporating colour correctly was very important. I decided to use a fairly broad colour palette, in reflection of the illustrations I hoped to create. While I selected vibrant and positive colours, their is also a slight earthiness and muted tone in places, as a nod to Twine's ethos as a florist app motivated by looking after the environment and a more organic approach to floristry.

The final two names I chose between - Twine and Bloom Bud. I decided that Bloom Bud was too similar to Bloom & Wild and didn't have the same effectiveness as a name from a consumer perspective.

BRAND NAME

When deciding on a name for the app, I brainstormed a variety of key words relevant to the brand's ethos and identity. I was keen to think of particular flowers or plant terms that refer to a 'connection' or working in unison with others, but was unable to find any words that would work. I considered 'vine' but felt that vines can have negative, restrictive connotations and don't truly reflect the brand (I went on to name the app's forum section The Vine- in reference to the phrase 'heard it through the grapevine'). I then thought about floristry tools which is what led me to twine, as it is one of the most eco-friendly florist tools and evoked the feeling of being entwined and connected with others.

LOGO

During Twine's logo development, I started by looking at existing fonts. I was initially drawn to calligraphy style, as it would reflect the brand well, however I noticed it was very difficult to find a font that was easy to read, and the word 'twine' proved to be quite difficult to get right in a calligraphy format. I then moved away from typography and aimed to create a logo that would work as an app icon, favouring colour and form over font. During the peer review sessions, I was unable to establish a clear favourite design to continue with, as each had their own pros and cons.

Ultimately I decided to go with one of my hand-drawn logos, as its simplicity works well against the more detailed and colourful illustrations. I am not entirely happy with the final logo, as I feel that the word Twine itself could be improved. However, the logo ended up being a very small part of the overall app, only appearing at the beginning, and so I couldn't justify spending more time on it and decided to focus on other design areas instead, such as illustration.

ILLUSTRATIONS

Twine florists Illustrations for use on the homepage and in 'The Pledge' page

Illustration for 'Find Flowers' pages

Illustrations for Twine intro carousel

Illustrations for 'Save the Date' icons

Illustrations for Caring for your Cut Flowers 'How To' guide

Illustration ultimately become the most important element in Twine's design. I haven't drawn since college, but wanted to challenge myself with trying illustration as its always been a medium I have adored. The first digital illustrations I ever created were my florist characters. I tried not to put too much pressure on the quality in these early stages, and I think that's why the characters were successful from their first attempt. I created them initially just as an experiment, but in the end their naive style and block colours work well in a contemporary app design.

I also illustrated other elements throughout the app, and haven't included everything here. All illustrations in the app are original artworks, created by myself. I tried not to look at existing illustration as I didn't want the risk of copying someone else's style too much. I did sometimes refer to photographs as a reference, as you will see in one of my time-lapse videos for the planet earth illustration.

ILLUSTRATION PROCESS

'Find Flowers' illustration

Twine florist illustration

Planet Earth with flowers for intro carousel

PROTOTYPE DEVELOPMENT

PREPARING ADOBE XD WORKSPACE

I set up this space on my Adobe XD canvas so that I would have easy access to icons and fonts throughout the design process. As I knew that I would be working with many artboards and assets, it was important to keep the workspace as organised as possible.

Having colour swatches enabled me to quickly and efficiently apply colour to content using the eyedropper tool, and allowed me to keep a consistent colour palette throughout.

I also set aside iconography and my custom navigation icons (see below) and had a sample of typography sizes and fonts.

NAVIGATION

I custom drew all of Twine's icons using Procreate as I couldn't find existing icons that met the app's needs, and I decided that mixing pre-existing icons with my own would cause an inconsistent design. I decided that the slightly uneven brush strokes lent itself well to Twine's informal and organic brand identity.

I created navigation bars for both business and guest user accounts which each had their own iconography. Grouping the navigation bar components together made it much easier to apply them to each artboard.

I applied a larger square around my icons to create transitions with, allowing a bigger surface area to be tapped, which is beneficial for small screens.

I also added a small detail with the use of a red and yellow flower, which acts as a marker to show which tab you are currently on.

ANIMATING IN ADOBE XD

I have not animated beyond simple GIFs in Photoshop before, but I was keen to incorporate some simple animation to my app wherever possible. Animation is an effective way of evoking positive emotive responses in UX design, as these animated details, no matter how small, add a touch of personality and character to an interface. As I created quite a lot of illustrated elements, putting some of them in motion would also help to break up content and further engage the user and enhancing their shopping experience.

Adobe XD is also quite limited in terms of its animation capabilities, and it doesn't currently support GIFs or video to be included in prototypes. Therefore I had to create my animations by giving each frame an artboard and applying the auto-animate function when creating the transitions. This was a time consuming process, so I was unable to include as many animated assets as I would have liked. Had I been a bit more experienced with the process, and had more time, I would have improved the home screen animation and applied movements to the florists or the flower graphics themselves to enhance their charm.

Flower petal load-screen in GIF form

OTHER DESIGN CONTENT

PRIMARY IMAGES

Knowing that many members of the florist community, including some of my friends, have been having a very difficult time as a result of the pandemic, it didn't feel appropriate for me to reach out to the community for photos or business information to create my prototype user profiles. Instead, I used my own floristry and photographs as part of the Florist profile page. The bouquet in the Shop is also my own image as I didn't want to use other's work without their permission.

SECONDARY IMAGES

Images required to build business profile pages.

I gathered these images by google searching for stock photos relating to florists and flowers. As I was unable to contact actual florists to gain genuine images and business content, I used a combination of my own photography with secondary sourced images and created fictional users, company names and non-specified locations.

Sources in captions.

ARTBOARDS

Twine final outcome artboards - Guest/Customer version

Twine final outcome artboards - Business (Florists & Flower Growers) version

My Adobe XD workspace

FINAL OUTCOME

Phone Mockup of Twine app - Guest / Consumer version

Phone Mockup of Twine app - Business version

SUMMARY OF KEY FEATURES

An introduction in the form of an image carousel, telling the user about Twine

'Continue as Guest' button leads to the general public version of the app. 'Business' button leads to the version of the app aimed at florists and flower growers who have signed up to a Twine membership.

GUEST VERSION

1) Shop tab: a sample shopping experience of searching for and ordering a bouquet of flowers

2) Features tab: Acting like a homepage, this would update with interesting articles and act as a way of promoting British flowers and educating the user in a friendly and inspiring way. There is a sample article on this page- Caring For Your Cut Flowers.

3) Account tab: a sample page of how a customer with a Twine account would be able to get extra features from the app, including setting flower-buying occasion reminders

4) Info tab - There is a button here to 'Switch to Business' which is for the sake of the prototype only. It will take you to the Business version instead of restarting the app.

BUSINESS VERSION

1) Homepage containing Find Flowers, Featured & Forum buttons.

2) Search tab / Find Flowers: a sample search experience to find florists and flower growers in your area. There are 2 sample profile pages - one for a Flower Grower (The Flower Cart) and one for a florist (Fleuri Studio). The florist sample page also includes a button for 'The Pledge' which is a document that members would follow (and personalise if they wish) in order to adhere to Twine's message.

3) Featured tab: A sample of article and features (headings only) aimed at the flower industry community.

4) Forum: Accessed from the homepage, The Vine is a sample of a forum style feature where members of the community can read and share advice, suggestions or post job vacancies.

5) Chat tab: A sample direct message conversation between florist and flower grower.

TWINE APP

(VIDEO WALK-THROUGH VERSION)

This is a video demonstrating all features of the Twine prototype, including both Guest and Business versions.

FURTHER POTENTIAL FOR TWINE

I really enjoyed working on this prototype, as it revolved around a subject that I am passionate about. The research conducted has suggested that there is a shift beginning to happen amongst consumers who are shopping more sustainably. While many of us are becoming more conscious of where our food comes from, it is time we also consider how our fresh flowers are also produced. With factors including Brexit and Covid-19, florists are looking more locally to get their flowers, and this is set to continue, with the UK flower grower industry also on the increase. Twine has potential to be part of that new wave of floristry, by reaching out to the modern consumer through digital means.

If I was to continue with this project, I would be looking at ways of presenting the idea to those in industry who are instigating a change towards sustainable floristry, and develop a marketing strategy to help Twine reach its audience and share its story.

DESIGN PRACTICE

REFERENCES

Books:

Allen, J., Chudley, J. (2012) Smashing UX Design: Foundations for Designing Online User Experiences. Chichester: John Wiley & Sons

Arnold, C. (2009) Ethical Marketing and the New Consumer. Chichester: John Wiley & Sons Online:

McLeod, S. (2020) Maslow’s Hierarchy of Needs. Simply Psychology web page. Available at: https://www. simplypsychology.org/maslow.html [Accessed on: October 16th 2020]

Bradley, S. (2010) Designing For A Hierarchy Of Needs. Smashing Magazine online article. Available at: https:// www.smashingmagazine.com/2010/04/designing-for-a-hierarchy-of-needs/ [Accessed on: October 16th 2020]

Experience UX (2016) What is user-centred design? Experience UX web page. Available at: http://www. experienceux.co.uk/faqs/what-is-user-centred-design/ [Accessed on: October 20th 2020]

Gladkiy, S. User-Centred Design: Process And Benefits. Product Tribe web page. Available at: https:// producttribe.com/ux-design/user-centered-design-guide [Accessed on: October 20th 2020]

Chung, E (2014) 3 Core UX Design Process Principles. Edward Designer blog post. Available at: http://edward- designer.com/web/ux-design-process/ [Accessed on: October 16th 2020]

Valdellon, L. (2019) What Are the Different Types of Mobile Apps? And How Do You Choose? Clever Tap Blog Post. Available at: https://clevertap.com/blog/types-of-mobile-apps/ [Accessed on: October 20th 2020]

______

Smithers, R. (2019) UK flower-growing industry in full bloom and worth £121m. The Guardian web article. Available at: https://www.theguardian.com/environment/2019/jun/13/uk-flower-growing-industry-in-full- bloom-and-worth-121m [Accessed on: October 21st 2020]

Gray, A. (2016) Backing British Blooms: The State of the British Cut Flower Industry. Great British Flowers PDF. Available at: https://greatbritishflowers.co.uk/library/Backing-British-Blooms-NFU-report-2016.pdf [Accessed on: October 21st 2020]

Flowers From The Farm. About Us page. Available at: https://www.flowersfromthefarm.co.uk/about-us-1 [Accessed on: October 21st 2020]

_______

Bloom & Wild – App: Available at: https://www.bloomandwild.com/app [Accessed on: October 16th 2020]

Flowers from the Farm – Website: Available at https://www.flowersfromthefarm.co.uk [Accessed on: October 16th 2020]

Twine Low Fidelity Wireframes - Customer Version

Twine Low Fidelity Wireframes - Business Version

Twine Low Fidelity Wireframes - Business Version Continued

Existing font tests for Twine. Calligraphy styles were hard to read, and the serif fonts didn't have the scope for working in an app icon.

Logos drawn on Procreate

Initially I selected these 3 logos as my favourites, as I felt they would work well as an app icon, particularly the 2nd one. However I found that in the prototype itself, they weren't as effective.

Custom Iconography created by hand using Procreate.

Larger squares give a bigger clicking area when layered onto navigation.

A small flower appears on the corresponding page that you're on.

The animated load-screen was created by adding an extra petal with each frame to complete the flower.

Individual artboards of the Find Flowers animated search bar. The search bar was an Asset available with Adobe's UI kits and I altered the colours and style to suit Twine's aesthetic.

The Twine logo on the homepage was rotated very slightly on each artboard and then auto-animate transitions were applied.

Florist Stock Photo. Source: https://media.istockphoto.com/photos/flower-shop-led-by-young-woman-picture-id1038838634?k=6&m=1038838634&s=612x612&w=0&h=E1r7PwafHsYXf6K4HRQ6O2cctcOMh4wuF3xd3Ng7uPA=

Flower Grower Photo. Source: https://eco-age.com/wp-content/uploads/2020/02/flowers9.jpg

Flower Grower Photo. Source: https://www.floretflowers.com/wp-content/uploads/2014/02/IMG_0810.jpg

Flower Stock Sample 1. Source: https://images-na.ssl-images-amazon.com/images/I/611lNPFoEaL._AC_SL1024_.jpg

Flower Stock Sample 2. Source: https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F37%2F2020%2F07%2F23%2Fcluster-of-dahlia-flowers.jpg

Flower Stock Sample 3. Source: https://img.crocdn.co.uk/images/products2/pl/20/00/01/73/pl2000017392.jpg?width=940&height=940

Flower Stock Sample 4. Source: https://img.crocdn.co.uk/images/products2/pl/20/00/02/48/pl2000024838.jpg?width=940&height=940