From Beyond Eco to BEYOND

The product

Coming from the original version of the product, Beyond ECO, it was now the moment for the first full iteration, in which I would be improving, not only the visual aspect but the whole user experience. This served as an excuse for improving the brand image as well.

This is the process of how Beyond ECO turns into BEYOND.

The challenge:

It was important to set some main objectives to work on.

Objectives:

  • Give a completely new image.
    It's the moment to iterate, creating a better quality of the interface of the original version of the app. But that's not all, the Brand has to grow at the same time.
  • Improve user experience through visual design.
  • Generate a friendly and reliable environment. The new visuals should offer the user a comfortable feeling. The point is to achieve a really friendly environment, but a secure and trustworthy experience, since it would be a platform with plenty of information about Ecological help and sustainable consumption. We want to transform our help, our ecological and sustainable resources, into a reference in this field.

The solution

Steps to improve better Beyond Eco into Beyond.

IDEAS

The first step to handle properly the challenge is to review the original material that we had.

The first version we will work on.

Starting with visual research allows me to come up with better solutions through the combination of multiple approaches from different sources.

The best way to begin is by building a Moodboard.

From this point, it becomes easier to start focusing on different tasks to improve the original interface.

Having the previous architecture as a reference, now we can design a better wireframe for the flow I had in mind, resulting in a highly improved distribution of the content within our product.

Sketch of the main wireframes for the new version.

Style Guide

Based on a design system structure (with an Atomic Design hierarchy), the most effective way to continue is to stablish a style guide, that will be the reference for the whole app and future devices. Nonetheless at the moment we are dealing with a native app for iOS.

Let's start with the foundations of the platform:

Typography:

We wanted to keep the essence Apple uses in their interfaces. Remaining closer to the native appearance, but introducing at the same time the font we used in our brand name. It will be used in multiple titles that appear in our digital product.

Colour Scheme:

Working with colours, was another challenge in the process, since we wanted to keep as much as we could from the original version. It was our intention to connect our palette with natural colours, since we wanted to show the user its connection with the environment.

So for that reason, our primary colours are more connected with leaves, an element that expresses life in nature. That's why is based on green colours.
We stablished orange as a primary colour, but is working as an accent to create contrast.

On the other hand, we have secondary colours that get a connection with the earth getting closer to the sand. But in this case, we used brighter tones of brown/ beige.

Components:

Developing the components for the app, I follow the structure that offers more efficiency when working with Figma, creating the main components with variants to have the most efficient and versatile workflow.
(Software used: Figma)

Figma: Components of BEYOND DSL.

Here is the new BEYOND!

We’ve been focusing on keeping the spirit of the brand and at the same time creating a new product that fits perfectly with the brand identity. Fitting better with the message that BEYOND brings to the user.

Deep work was devoted to every aspect that each screen demanded.

If you look back to the starting point design, you will be able to verify how significant are the changes I’ve introduced on every screen of this iteration.
The “Challenge” screen was left out, resting in the Backlog to see if it's really needed.

Let’s remember from where it comes
And now, check how it turned out in this new version and what it has become

Home

The new iteration begins with a home page full of content.
We wanted to bring the user the latest news, tips and helpful information.
Every article has its own page, expanding the content and, at the bottom, the related news that could be of interest to the user. If the user needs more new information he just has to scroll down to reload the page, always offering fresh news.

One of the main objectives here was to create an intuitive interface that we will use in the following screens of the digital product.
Simple, clean and easy to use. We will have a lot of information so we have to avoid creating something full of chaos and difficult to understand.

Community

This was a strong point of the app. Here we wanted to create an enjoyable experience and foster easier connections between the users.

They will be here as creators of their own content, sharing and helping others with their own experiences.

For this, we took references from Social media that currently is working properly. So we decided to create 3 strong parts that form this page:

  • Stories: A special space for contacts and people with a high level of influence.
  • Events: A section where we promote special activities for a higher consciousness of sustainable lifestyle, motivating the users and allowing them to connect with others that have the same interests.
  • Posts: This is the personal space that every user will have, showing the community the personal actions they are doing.

Market

With the market page, we used the same structure as the home page. We wanted to create a consistent design, because by doing that on similar pages, the user won't have to learn new interactive actions.
Here at the top of the page, we included a recommendation of the day and the top-rated business in which the user could be interested.

One of the differences that we have from the news item is that when you go inside of a specific business, you can access to additional information. You will see three chips before the description allowing the user to: call the business, see the location in your maps app or save it for later.
As well, after the description, you will have a little gallery where you will be able to see the details of the business you are looking for.

Search-Results-Filters

Search — Results page — Filters

We dedicated a special effort to this part. Search is where the user is going to develop new consumption habits, looking for new businesses that will help them to create sustainable consumption.

Search: It was really important to create fast access to the search bar, so anywhere you are in the app you will always have access to it. You can search what you want at any moment, but you have also the possibility to check what is around with“Current location”, or even just check the search history of the past few days.

Results: We created two options to visualize the results. You have the chance to check them through a map or maybe you want to check them more thoroughly, so you are able to expand the results list.

Filters: We added a highly customizable filters panel, that will allow for very specific search request, offering an extremely personal experience.

Profile

The final part, but not less important, is the profile.

Here the users are able to manage all the content they are using in the app.

From this section, we have access to the settings of the app, where it's possible to configure your profile picture, personal information, set tags you like, etc., Allowing to offer a unique experience for every user.

Then we have, in the same section, three different categories, all together to set a clean design.

The first is Contacts. Here you have access to manage your contacts and at the moment is where you have all your private messages with other users.
Then Events and Saved. It is the place where all the events you joined, or the ones you’ll be joining, are archived. Saved is where you store all the posts, news, tip,… you have found.

Now it's time to test, to see how can we keep growing to improve our service and create a memorable experience!

“Thank you so much for your time”

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store