stevia project cover photo

Stevia Desserts Website


Development of an E-commerce website for a private bakery.
The main design challenges were to make the product stand out, to build a frictionless ordering system as well as make it attractive for future prospects. Since the bakery is an early startup that is on its rise, and it was essential to making design decisions that fit in a specific budget.


I decided to focus on a bright colour palette and memorable branding that will catch the eye of site users. I put a lot of attention to enrich the design with lots of real photos and space for customers' feedback so businesses can build a high level of trust with users from day one. In order to deliver the highest level of user satisfaction and ensure high user conversion, I made a design clear and the ordering system intuitive and fast.

My Role:

User Research, UX Strategy, Information Architecture, Interaction Design, Visual Design, Prototyping & Testing

Hide Process Details


I started by gathering the clients' requirements then I analyzed existed competitors and then I identified the target audiences as well as the stakeholders. Once I defined the target audience, I started collecting the data via interviews, observations, and surveys of users. I noticed that too often, designers instinctively distance themselves from customers and focus on themselves, relatives, or acquaintances when creating products. That is why I thoroughly analyzed the data and clearly defined users and client needs and modelled the "Personas". Those are incredibly useful to constantly remind designers whom their products are intended for.

User Needs:

  • To know if the Bakery delivers to their area
  • To order desserts online
  • To know more about the brand and learn more about stevia
  • To see previous pastry work and testimonials
  • To know delivery methods and payment options
  • To know order terms and minimum order
  • To find out the pricing policy

Client Needs:

  • To sell food online that will be delivered
  • To Provide a system for order customization
  • To have a simple and clear system
  • To Tell more about the brand and stevia
  • To appear professional, trustworthy and friendly
personas description

Content and Functionality

“The user will be looking for…”

  • The menu of cakes: biscuit cakes, cheesecakes, mousse cakes
  • Cake prices and their weight
  • Images of the past orders
  • View testimonials
  • Contact information
  • Information about the brand and stevia
  • FAQ - What are the questions?
    • Where do you deliver?
    • Do you have a minimum order?
    • Do you charge for the delivery?
    • How much time do you need prior to an order?
    • Who I can contact?
    • How can I pay for the order?
    • Can I change my order?
    • What’s the use of stevia?

“The user will be able to…”

  • Change or cancel the order after one has been placed
  • Place the order
    • Specify the contact information
    • Specify the delivery information
    • Receive the order confirmation
  • Customize the order
    • Indicate date/time of delivery
    • Specify the weight of the cake
    • Choose the taste and design options for the cake
    • Choose a gift box


Once both content and functional requirements are ready, I move to the card sorting task and then to the site map designing. The site map contains user-oriented navigation solutions, labeling, and structure. It is a planning tool that consists of a list of website pages and is an integral part of site information architecture. This helps me to have a bird's-eye view on the site content and spot any possible issues and confusion that users might experience



The next step is to create wireframes. This facilitates the decision-making process by providing a visual representation and possible experience before project development. I start by creating low-fidelity wireframes. The advantage of this method is a direct buy-in of the approximate structure. At the stage of the low-fidelity prototype, it is not difficult to abandon any solutions, add new solutions, adjust the product, or even completely redesign it. Because at this stage very little resources are spent on development. When they are ready and tested, I pass to the creation wireframes with help of Adobe XD.

low-fidelity wireframes
wireframws example
wireframws example2

Visual Design

Mood Board —> Color Palette —> Logo —> Illustration

Creating a visual design is probably the brightest and most creative part of working on a project. After the framework and before the prototype, I develop a mood board. The mood board is extremely useful for creating an aesthetic feeling of the site. It also helps me in choosing the color palette of the site.

hand writing illustration
logo examples

Clickable Prototype

After the Visual Design, it is time to build a Clickable Prototype. At this stage, I build a computer-based interactive representation of the product that has its closest resemblance to the final design in terms of details and functionality. The Clickable Prototype offers an interactive experience that is very similar to a finalized website and makes it possible to test the designs with users and other stakeholders and bring them into the design process in a meaningful way. One also allows testing information architecture, layouts, visual hierarchy, and interactive elements. Adobe XD is a toll of my preference at this stage.

prototype example
prorotype flow


At this stage of my workflow, I implement a website using HTML, CSS, and JavaScript. It is a really important stage as here I give life to the design I created and represent it into a code. I also put a lot of effort to closely collaborate with the customer to ensure the best results. I believe that it is really important to make search engine optimization, fast loading, responsive layout, and the code structure extremely simple and readable. And I made it an integral part of each design implementation.


Working on this project from the initial stage to the completed prototype and implementation was exciting and sometimes challenging. I learned quite a few new things and developed my design skills. It was very interesting to solve problems that arose in the process of research and implementation of the product. Limited resources motivated me to think out of the box and to find solutions that will be the most effective and useful but will remain within the budget.

I can confidently say that collecting both qualitative and quantitative information throughout the research process ensures that the business makes data-driven decisions based on the voice of real customers. Although research is really important, it is also important to remember that constant testing and improvement, as well as user-centered thinking, are also key components of a successful project.

Other Projects

© Helen Vintoniak. All Rights Reserved.