In early March this year, we decided to rebuild lemon.markets from the inside out. While we completely reinvented our “prototype API” and started our closed beta last week (you can sign up for our waitlist now), another crucial step for us was to also give lemon.markets a new look and feel. In this blog post, we dive deeper into the process of creating a new design for lemon.markets, what the new design elements stand for and what we hope to communicate with them.
Start somewhere, then iterate
For us, it was and is always about doing something, no matter how imperfect/unfinished it may be at the beginning, then getting (external) feedback and integrating it as quickly as possible. When it comes to our product, this currently means that we developed a first version and now try to implement desired features on-the-go. So far, this approach really helped us in creating something that we think fills an actual need for our users (for example, see this blog post on Spaces, a feature that directly emerged from community feedback). lemon.markets is not (and never will be) just us sitting in an office, developing features that we think make sense without consulting our users first.
In an early-stage startup, you will always have a thousand different things in front of you, and it is hard to tackle everything perfectly at the same time. In our first prototype that we launched at the end of 2020, that was especially true for our design. We knew we needed something, but we did not have the time or resources to tackle this topic in the way we wanted to.
The result was a long Friday night, a few WhatsApp messages back and forth, and voilà: our first logo and a rather elementary color scheme were born. And while the logo did serve its purpose for our prototype, and we still proudly wear our lemon.markets socks, we also knew that it was time to let it go at some point in time. And that point in time is now.
We lovingly call our old logo the “Croissant Lemon” (make sure it rhymes when you say it)
Still kinda proud of that merch, though.
Doing things properly
Even though we are an API-first company, we still strongly believe in the importance of a great design. And while we obviously strive to provide a flawless experience with our API, there will also always be a number of visual touch points for our users and we want to make sure that it is fun and visually appealing to use them. So, we decided to tackle this issue properly and searched for a design agency that could lead our redesign. Tech-heavy companies like Stripe, Strapi, or Typeform served as great examples for what direction we saw ourselves in and what we think a modern tech firm should look like.
After a lot of emails and “get-to-know-each-other”-meetings with different agencies, many of which convinced us with stunning expertise in various areas (+ the fact that it was super fun and insightful to see different approaches to and opinions about our rebranding), we decided to go with tonik, a design agency based in Poznań, Poland. We liked their hands-on, collaborative process that promised to be a constant back and forth with straightforward feedback loops. Plus, they regularly work together with early-stage startups, many of them from the famous Y combinator, which was the kind of expertise we were looking for.
What did we need for our Rebranding?
Our rebranding was clearly a big project that included many different aspects:
- Development of a new Corporate Identity (CI) including logo set, colour scheme, and general brand guide
- Specific designs for our new website, documentation and web app
- Custom (animated) illustrations
- Reusable templates for our social media touch points
And while we had a broad idea of the outcome/how we wanted things to look or not look like, we were happy that we had a partner by our side who knew how to execute efficiently, prioritise on when to do what and react to our constant input. Initially, we needed to groove ourselves in a little bit until we found a fitting way of communication, but once that was solved we quickly made progress in all areas.
Tackling things step-by-step
It made sense to approach the CI topic first, as this was the foundation of all other things to come. Although there has been some progress in recent years, we noticed that the stock market may still be rather scary for some people. Additionally, all tech-related things seem to still be a bit of a black box, with many people still perceiving it as some kind of extraterrestrial skill that is impossible to master (just search for “Coding” in Pixabay and you’ll see what we mean). From a design perspective, we wanted to completely step away from these “shady, not trustworthy, mysterious, alone-in-the-basement” prejudices and instead present lemon.markets in the way we see it:
A modern, transparent and reliable brokerage infrastructure that gives you the freedom to build your own trading product at the stock market.
In our humble opinion, tonik did a great job in reflecting this vision in our design. We started very basic: with a new logo. In the end, it was probably the most nerve-wrecking topic that took us some time until we could close the chapter. But now, we really love our new logo, as it works with friendly colours, has a modern but still special and edgy look and in general transports perfectly how we think about us as a company.
Our new logo
During our collaboration, we spent a lot of time in figma files, which we found really convenient, as figma allows to easily give feedback on specific elements and enables concurrent collaboration. Below, you can see a snapshot from our brand book, which serves as a general guideline for all things that are design-related at lemon.markets and our custom lemon.markets shapes that appear throughout all of our touch points. Shoutout to Jacek who dug through all of our comments and translated them into something that we love.
A looot of figma files — our Brand Book in this case.
Our custom reusable “lemon.markets shapes”
Many Page Designs — many Loom videos
The next logical step was to use the brand book and shapes and develop specific designs for our different customer touch points: our website, the dashboard and our API documentation. The whole process was very iterative, with new page designs being presented by the fantastic Damian as soon as they were ready, almost always accompanied by an explaining Loom video (highly recommended to use quick videos to communicate changes by the way). As with the Corporate Identity, it was important for us to communicate transparency, security, but also innovativeness and a in general modern company that wants to do things differently.
Figma Designs for Website
Figma Designs for Documentation
Looking back, this time period was really fun, because we were making so much visible progress: Damian providing us with new designs, we internally reviewing every little corner and color choice, communicating back to tonik who implemented our changes in record speed, afterwards starting to implement the finished designs on our side to see it in live action. A big thanks to everyone involved in that stage: you were great! You can see the final website version here and you will experience the dashboard and documentation as part of our onboarding process once you’ve signed up for our waitlist (which you should do here immediately).
The most complex “sub-project” — our Dashboard
Bringing some movement to our Website
If you look at the figma drafts above, you will notice a few empty spaces here and there: that’s where we wanted to add illustrations. From the beginning, we wanted the lemon.markets design to be special and unique, which is why it was no option to use publicly available illustration sets to demonstrate our use cases. Instead, we decided to only use custom-made illustrations, which resulted in a lot more work for both tonik and us, but also in a much more personal outcome that now makes us happy every time we see it in on our website. Some of those illustrations are even animated, in many cases to visualise some kind of flow or dependency, but sometimes simply because we thought it was fun :D
Custom Illustrations for Website and Documentation. Check out lemon.markets to see them move ;)
Key Learnings from the Project
For all of us at lemon.projects, our redesign was the first major project with a design agency and there were a a number of key learnings we took away from it.
- Find a communication channel that works for you: it took us some time to figure out the best way to communicate. In the end, it was a combination of a shared Slack channel where all changes were shared transparently for everyone to see, figma files with the option to directly comment on specific elements, Loom videos that explained the changes first-hand and a weekly meeting with all relevant stakeholders. While this approach may not be the right one for other teams, we still strongly encourage you to really think about how you want to communicate and then focus on bringing your preferences to life. Having a functioning flow of information was key for this project to succeed in our opinion.
- Really focus on getting the feedback right: from the beginning, we tried to make our feedback on specific design drafts as detailed as possible. This was often time-consuming, because we sometimes did 2–3 internal feedback loops before we reported our feedback back to tonik. However, in the end we think that this effort paid off, as our instructions and change requests were clear and tonik was able to execute fast and without many enquiries afterwards.
- Leave space for creativity: while we did have our own ideas about how we wanted certain things to look like, we also knew that it was important to let go of that a little bit and let the experienced designers come up with something cool. Our approach was mainly to provide a few keywords or ideas at the beginning of a specific project part and then let the respective designer get creative. If things went into a totally wrong direction, we could very easily react in the first feedback round and shift the design towards something that reflected our style better. However, after a while that was not really necessary anymore, as tonik understood what we were looking for. In general, the first feedback loop for a new design was always the most important one for us, where we tried to be as detailed as possible. Before that, our goal was to not limit the designer’s creativity by giving to detailed instructions, which worked really well for us.
To be continued…
We relaunched lemon.markets last week, which means that we successfully finished and implemented the design collaboration on this major project. However, there are many more things to come. Internally, we are already working on a mobile app, additional features for our dashboard, social media campaigns, YouTube videos, blog posts, […]. So, our work with tonik has not ended, but instead will continue, which we are quite happy about.
We are really excited to get your feedback on our new design. Feel free to comment your thoughts under this post, write us an email to [email protected] or join our Slack community. And obviously: sign up for out waitlist if you haven’t done so, yet.
We are looking forward to seeing you on lemon.markets 🍋
You might also be interested in
Setting up your own Telegram bot to trade with the lemon.markets API (Part 1 of 2)
Hi! My name is Joanne and I’m part of the team at lemon.markets. I’ve been working on a fun use-case for our product for the past few weeks and I’m very excited to share it with you! There’s hundreds of use-cases for our product, from automated trading strategies to portfolio visualisation dashboards. Today, I’ll show you how you can connect the lemon.markets API to the Telegram API. Why? So you can have a personalised butler — ahem, bot — that can place trades with a few very simple messages.
Creating your own lemon.markets Dashboard using Flutter
Hey there. My name is Marius, and I am part of lemon.markets, an early-stage startup from the heart of Berlin that is working on an infrastructure that lets you build your own brokerage experience at the stock market. In this blog post, I will walk you through a project developed by our community member Melanie, where we will tackle the basics of building your own mobile-optimised Trading dashboard using Flutter. Does that sound like fun to you? Then let’s not waste any more time and get going.
Building a Mean Reversion Strategy with the lemon.markets API & hosting it in the cloud
In this post, I want to diveinto how you can use the lemon.markets API to build one of the most well-known trading strategies: the Mean reversion Strategy. And, to set you up for success, I will also walk you through the steps to host your strategy up in the cloud using Heroku, to make sure your program continues to run, even when your laptop is closed.
Find more resources to get started easily
Check out our documentation to find out more about our API structure, different endpoints and specific use cases.
Join lemon.markets community
Join our Slack channel to actively participate in our community, ask questions to other users and stay up to date at all times.
Interested in building lemon.markets with us?
We are always looking for great additions to our team that help us build a brokerage infrastructure for the 21st century.