UX/UI on an 8pt grid :)

Project: Flowerrange

Role: Lead Designer

Duration: Four Months

Watch a Screen Recording

Project Vision

Flowerrange was designed to be a tool where people could make their own flower arrangements online, rather than having to settle for pre-made arrangements. It allows them to make flower arrangements in their own time from the comfort of home without feeling rushed or pressured.

Challenges

Give people the ability to create realistic flower arrangements that accurately resemble the finished product in real life.
Maintain cohesion throughout the website.
Provide users with a seamless payment process.

Kick Off

As always, I took a goal-directed design approach and this once again proved to be a very effective strategy. Qualitative research methods were used. A competitive analysis and theoretical stakeholder meeting were conducted. User personas were also constructed. Some of the initial questions for consideration were;

"What is the product and who is it for?"

"What do our main users require most?"

"Which users are the most important to the business?"

"What challenges could we face as we move forward?"

"Who are our main competitors?"

"What research do we need to conduct?"

The insights gleaned from the user research process provided valuable information. To structure and consolidate this data, I developed an affinity diagram. By identifying the specific needs of each user group, I gained a clearer understanding of their goals. This, in turn, allowed me to align those user goals with the overarching business objectives.

Meet the Users

Competitive Analysis

Flowerrange competes against other independently run florists in its locality. They also have to compete against the well-known florist delivery company, Interflora.

In most cases, competing florists rely on using marketplace applications to take care of their ordering and delivery process. Along with Interflora, other competing applications include Floom and Bloom & Wild.

These applications are very beneficial to florist owners because they do away with the need for technical expertise. Customers also trust these services.

However, the downside of relying on such applications is that florist owners have to pay significant fees for every transaction. Independent operators like Flowerrange are also likely to become lost in the competitive environment of overcrowded marketplaces.

This makes the idea of owning a standalone website very appealing to the owners of Flowerrange.

Preparing the Journey

A user flow was constructed to show the journey that a user follows when logging in, creating a flower arrangement, and choosing the delivery or pick-up option. This helped me to gain an understanding of how users would interact with the site and how they see the navigation process.

Paper Wireframes

Wireflow

The first step in visualizing the user flow was to create some paper wireframes. This helped to clarify what the essential features of the service would be. It also helped to identify any unnecessary distractions. A critical process, it set the foundation before moving on to the more creative aspects of the visual design of the website.

Iteration

After creating the low-fidelity wireframes, five people were asked to try out the prototype and give feedback. Some of the consistent feedback that was garnered includes;

Overall, the website has a good look and feel. The colours were seen as being very apt for a florist website.
The design of the Create page was seen as needing the most attention as this would be the main feature of the site and is where people would spend most of their time.

Create Page – Before & After Usability Study

Challenge 1

Gain People's Trust

Most people are familiar and comfortable with using mainstream delivery sites. Therefore, gaining people's trust is always an essential task. Designing the site to look credible and professional with a familiar user flow went a long way to achieving this all-important trust.

Challenge 2

Maintain Cohesion & Accessibility

Along with gaining people's trust, it was essential to maintain cohesion throughout the site. With that in mind, Material Design iconography was used to the greatest extent possible throughout the site so that all users would feel comfortable while interacting with the service.

Challenge 3

Payment Process

The payment process is an essential feature of many sites. Because this is a standalone website rather than a well-known marketplace site, users will naturally be cautious. Therefore, a smooth, seamless transition from the Create page to the cart to the checkout is emphasised in the design.

Style Guide

Like flowers themselves, Flowerrange was designed to be bright and beautiful. To achieve this, a large colour palette was developed, with a vibrant shade of purple acting as the base colour. Bright green was chosen for call-to-action buttons. To further enhance the feeling of artistic design, Lora was chosen as the font family for heading text. This was then paired with Montserrat on body text as it was seen as being an elegant, modern font with good readability.

Takeaways

Despite the ubiquity of technology, many people still value and appreciate traditional concepts. This is a key reason for the continued popularity of flower arranging. However, as in many other industries, people now expect florists to operate in the modern online economy. While some florists have basic, static websites, few engage successfully with e-commerce. Most florists are satisfied with using marketplace delivery services. The design and development of a standalone flower-arranging website will give Flowerrange a competitive advantage and set them apart from the crowd.

Page updated

Google Sites

Report abuse