Today we bring you a different kind of post. We’re opening Trilogi’s doors a little so you can see how we approach online store design. We’ll briefly explain what we take into account to achieve great eCommerce design, and you’ll see the different stages we go through to reach the final result.
Summary
We don’t want to bore you! So this is just a quick overview to help you understand how we make our design decisions. Shall we begin?
01 – Introduction
eCommerce design, or online store design, aims to solve the various problems someone might have around product functionality, especially in online retail. As designers, we’ll offer every possible option to help you reach your goals. The end result will bring together aesthetics and functionality: an attractive, consistent and practical visual experience.
Every web design project starts with a design process. It helps us outline the steps to follow and guides us to the final result. Let’s see how an online store is created!
02 – Research and documentation
To start, it’s very important to carry out initial research that gives us enough knowledge about the company, our direct client and the end user, to understand the goals to be achieved and to study the professional market it operates in.
Key points to kick off eCommerce design:
- Company
It’s very important to know how you think, how you want to showcase your product and how you want to be recognized. - Goals
To focus our design strategy properly, we need to know what you want to achieve, what message you want to convey, whether it’s B2B or B2C… Either way, since it’s an eCommerce, the main goal will be to increase the conversion rate (in other words, to sell!). - The user
Almost more important than the business owner, we especially need to understand the needs of the user who will browse the store. Remember, they’re the ones who will generate the profits. - The competition
Another key point is analyzing the competition: what they do, what they don’t and, above all, how they present themselves to stand out. Visually, each sector has its own associated colors and a more or less aggressive way of standing out (yes, colors influence our emotional state and our inclination to buy a product!).
“… If it’s an online store, its main goal will be to increase the conversion rate.”
03 – Defining concepts
Once we’ve completed the research, we pin down the most important and up-to-date aspects to take into account. Online stores are no exception.
As new technologies have a growing impact on our culture, we need to develop new strategies and guidelines to keep stores up to date and ready for all kinds of devices.
The concept of responsive or adaptive design, the specific foundations of the Bootstrap framework (which we use at Trilogi), the Mobile first philosophy, usability and user experience (UX), applying on-page SEO techniques…
So we can say these are all must-have practices: essential elements we need to build properly into all our eCommerce designs, whether new builds or redesigns.
04 – Ideation and first ideas
It’s time to sketch out the first design ideas and create wireframes. These drawings help us understand and remember all the ideas that come up during the process
In short, what we take into account:
- Corporate brand identity: we define how typefaces, colors and graphic styles are applied, based on the company’s brand guidelines or our own design proposal.
- We define the most important features based on the goals set.
- We decide which content elements will appear and which will be the most important.
- Information architecture (IA). This means organizing and prioritizing that content in descending order so it’s as easy to understand as possible — from most to least relevant.
- We think about how every element will adapt to different screens (mobile, tablet and desktop): responsive or adaptive technology.
- Usability and user experience (UX). Broadly speaking, this is the set of techniques and know-how that ensure users have a good experience with the product, both physically and emotionally — easy and intuitive.
E.g. knowing how users think, whether they can read and find everything they’re looking for, good page accessibility, optimal loading speed, an efficient product search, a clearly placed category menu, a clean and attractive look…
Overall, we consider many aspects when creating an eCommerce design. But what seems especially important is this: the happier (or less stressed) a user feels, the more likely they are to come back to the online store. As a result, the chances of a purchase go up and the conversion rate rises (meaning more sales!).
05 – Design proposals: mock-ups
Time to get down to work in earnest (it’s actually the most creative, experimental phase. We rack our brains — and challenge ourselves — to find new, innovative solutions. The more technical folks call it the “let’s produce!” phase).
We bring all our ideas together in an image file (.jpg) showing the design proposal. We also show how the page will respond to user actions (what color a button changes to on hover, how the category drop-down displays, how links look, etc.).
This type of document is called a mock-up because it’s a more advanced representation of the graphic design (almost like the final design), but without real interaction or navigation.
What it covers:
- Images and content. Images can be samples and the text can be “dummy text” (the famous Lorem ipsum ).
- The color palette
- The typefaces
- The iconography
- The dimensions of content and services
- We add our creativity — without forgetting functionality!
This process can be longer or shorter depending on the project’s complexity. We send all the files needed to explain how the whole eCommerce design works. Then we wait for feedback and analyze every impression it has generated.
Generally, this phase involves ongoing one-on-one exchanges between designer and client. The Project Manager manages the project to help reach agreement. Every page design and version we present must be approved and accepted. Finally, at this point, we close the design phase itself.
06 – Validating and testing the store’s functionality
But it doesn’t end there! We’re almost done…
We also create and provide all the material the developer may need to start their work. We like to look after our projects with great care and want to help with any issue that may come up.
That’s why we follow up on the process to propose solutions and/or answer any questions. Situations that weren’t initially foreseen may arise (unfortunately, these things tend to happen more often than we’d like!).
Once the store is “finished” and most or all of the real content has been uploaded, we take one final step: a review of usability (UX), bugs, and effects and transitions (an eagerly awaited document that can be as long or as short as needed — which is why people fear and love us at the same time).
As soon as all the necessary tweaks are made, all that’s left is to wait! Launch day arrives, we start browsing and enjoy our lovely work!
07 – Trilogi: we work as a team
But not everything is down to design (obviously). Opening an online store takes a lot of involvement and organization. Collaboration between all departments is essential. Without any one of them, we wouldn’t see our efforts go live!
I hope you enjoyed this look at our day-to-day and that it encourages you to explore this creative world a bit more. In the Design department we love it when clients enjoy our work and end up grinning from ear to ear. So if you’d like more information, don’t hesitate to contact us. We’ll be glad to advise you.
