Works

Overview

Boost.ly Was created to help users find and share engaging web content with social media communities, in a way that is simple and quick.

This platform allows users to curate articles from the web and share them on social networks, by using RSS feeds to aggregate content of interest and synchrorize it with the platform. The app can currently be synchronized with Twitter and Facebook.

OUR CONTRIBUTIONS
  • Discovery and definitions
  • Brand redesign
  • Benchmark analysis
  • Information architecture
  • Interaction design
  • Visual design

Context and challenge

1. Project background and description

Boost.ly is a webapp that was created in the US for small businesses and individuals who want to make their social media updates more engaging. Businesses and people often lack the time to create content that is relevant and valuable for their social networks. Boost.ly intends to make the task easier and offers suggestions and options from RSS sources.

2. The problem

The existing platform didn’t have a solid user experience nor an optimal design that could compete with other similar apps. This caused the app to have only 50 users registered. One of the main features of the app is the Ripple Gauge, which measures the effectiveness of posts and publications, yet it was being underestimated by the users. Also, the platform didn’t have an attractive and memorable brand to clearly identify the app.

img work img work

3. Project goals and objectives

  • Build an MVP (minimum viable product) to test the success of the platform and later build up on it during a future phase.
  • Create an efficient user experience and a potent visual design.
  • Expose the value of the platform through design and interactions.
  • Prove the app’s power to increase engagement through the Ripple Gauge.
  • Generate an increase in the conversion funnel.

Process

1. Discovery phase

During an initial discovery phase, we gathered information that was used to establish the platform’s audience, context and objectives. We received documentation from the client, stating his expectations for the product in terms of behaviour and appearance.

The requirements were laid out on a design brief we created for the purpose of guiding and acting as an agreement between the client and our design studio. This brief described the project, its objectives, audience, competitors and features for the different phases of the project, and the technology in which it should be built. This document guided all our design efforts.

img work

2. Brand redesign phase

Our team started the brand redesign process by doing research around the app’s direct and indirect competitors. The goal was to identify if there was a common visual language to later decide how to position the app’s brand and how to set it apart from the competition.

img work

From the insights gathered during research, we created a moodboard to display some options for color palettes, fonts, shapes and more. This board was shared with the client and his input was crucial in the decision making process around the visual possibilities for the app.

Finally, we presented three brand proposals, from which the client selected the final version. For this, the new Boost.ly app brand, we prepared the necessary guidelines that would be applied throughout the visual design of the platform.

img work

img work

img work

img work

3. Benchmark analysis

For the app’s structural redesign, we began doing research around the competitors of the platform, to identify visual design and technological complexity trends. We used the findings to decide how to position the Boost.ly app in comparison to its competition.

We expressed this on a benchmark analysis graph. This analysis allowed us to have a clear idea of where the development of the product was heading towards, and how robust it needed to be.

img work

4. Interaction design phase

In a further stage of the process we built an app map. Our objective was to create a straight forward and intuitive information architecture.

From the functional requirements stated on the design brief, we built the wireframes and the animated prototype to express the user experience strategy and to display the relationship between the functional elements that were necessary to fulfill the app’s business goals.

The wireframes were revised with the client and polished. Prototypes for both the marketing website and the webapp were created.

img work img work img work img work
img work img work img work

5. Visual design phase

Once the information architecture and the structure of the app were defined, we started to work on the visual design for the project.

The moodboard that we had previously built helped us determine the graphic language. We created high resolution mockups for the key screens of both the marketing website and the webapp. Once the visual styles were signed-off by the client, we created the mockups for the remaining screens of the app. Once the desktop mockups were finished, we generated designs for tablets and smartphones.

img work
img work
img work
img work
img work
img work
img work
img work

Finally, we created the style guide and the redline. These documents serve as an important guide in the Front-end development phase. The team worked around best practices in order to guarantee the quality of the product and to avoid re-processes in the development stage.

img work
Marketing site
img work
Shared article – Ripple gauge
img work
Article detail
img work
Add new RSS
img work
Settings
img work
RSS Panel