Peakseekers

Figma, Node.js, Firebase, Next.js
2020

Challenge

Peakseekers arose from the motivation to explore the contents learned in a Rocketseat bootcamp, which covered NodeJS, ReactJS, and React Native technologies, with the aim of creating a viable product for the real world.

I decided to combine two passions (mountaineering and technology) to create a product that would allow mountain explorers to share stories about their achievements. To achieve this goal, it was necessary to use UX Design methodologies and processes in building the brand and service, as well as conducting extensive research on digital products, ranging from conception to final product availability.

In addition, it was important to follow some standards in choosing the development stack, such as considering the performance and scalability of the product, as well as my prior knowledge, since I would be responsible for developing both the back-end and front-end. After considering these factors, I decided to use NodeJS in conjunction with Firebase Cloud Functions for the API, and Next.js with TypeScript for the front-end.

Process

The first step was to think about Branding. I wanted to find a name that reflected the passion for mountains, a feeling very present in this field, since after conquering a summit (the top of the mountain), the individual is "instinctively" encouraged to seek the next one. In addition, I was looking for a name that would be easily recognized worldwide, which is why I preferred English. After researching which mountain-related domains were still available, I chose the name "Peakseekers".

The premise for creating the logo was to create an easily recognizable brand. For the symbol, I used a combination of geometric shapes - including a triangle, which is the geometric shape most associated with a mountain - to create the letter P. In addition, I chose a symbol that represented the achievement, as well as the triangular flags often seen at the top of major mountains around the world.

Peakseekers - Logo

After this stage, it was necessary to define the persona for the product. To do so, we conducted research on similar products and gathered information from websites frequented by mountaineers. Based on this data, we arrived at the following persona:

peakseekers-persona.png

With this clear definition, I focused on solving the problem below, prioritizing the development of an MVP:

An application for mountaineers to display the mountains they have already conquered (in the form of a story, with a brief summary and some photos), and the mountains they want to conquer, a kind of Instagram for mountaineers.

UX Writing and Prototyping

Based on the persona, I planned the tone of voice to be used in the textual elements of the product, aiming to bring the user closer to Peakseekers' mission: to share inspiring stories about achievements. Below is the tone of voice based on the 4 dimensions defined by the Nielsen Norman Group:

Peakseekers - Tone of voice

And after some prototypes, interface and usability tests, it was time to get down to business and create the user interfaces.

Peakseekers

Solution

Based on some inspiration projects on Dribbble, I decided I wanted something unconventional for Peakseekers: a design with a minimalist aesthetic, without standout colors, privileging images of mountains sent by users. With that in mind, it was easy to come up with a color palette.

Peakseekers - Color pallete

All interfaces follow a cleaner design, focusing on typography and information hierarchy through consistent white-spaces.

Peakseekers - Desktop light version

The iconography follows an outline pattern, emphasizing the simplicity of shapes and affordance, using icons that are present in the user's cultural repertoire.

Peakseekers - Mobile light versionPeakseekers - Mobile light version

Dark mode

In this project, I decided to develop a dark-themed interface, following the trend observed in digital products and thinking about contexts of use in low-light environments. To ensure a smooth transition between the light and dark versions, I carefully studied the contrast and reused the original color palette from the light version.

Peakseekers - Desktop dark versionPeakseekers - Mobile dark versionPeakseekers - Mobile dark version

The MVP (web version) was released in December 2020, marking a milestone for my professional development, both as a Designer and as a Developer. Although I believe the product has a considerable audience (even in a niche market), I couldn't dedicate enough time between my professional and personal life to create advertising campaigns and promote the project launch.

Furthermore, there were not enough financial resources to develop a native application, both for Android and iOS. Nonetheless, this is a project I am very proud of, as it was developed only in my spare time.

If you want to know more about this project, you can read this post on my blog in Portugueses: Criando uma rede social. Do zero.