Traken.io

Summary

Traken.io was a freelance project to create a link-shortening web app. This project was split into three phases: designing a logo, brand guidelines, conducting competitive research, and planning a minimally viable product (MVP). The second phase focused on the development and launch of the MVP to establish a user base. The final phase will add more advanced features to help with user acquisition and perform refinements from user feedback. The link shortening app was built on a Ruby on Rails stack and deployed on Heroku.

SKip to the good stuff

REquirements

Phase 1: Branding, research, and planning

  1. Develop a logo and basic brand guidelines
  2. Conduct competitive research
  3. Establish requirements for a minimal viable product (MVP)
  4. Create a scalable site architecture

Phase 2: Build a Minimal Viable Product (MVP)

  1. Create low-fidelity wireframes for both the second and third phase of the project
  2. Refine the wireframes into high-fidelity mockups
  3. Develop the web app and establish the following core functionality
    • Offer visitors a way to shorten links
    • Allow visitors to sign up for a free account
    • Provide basic link analytics (exclusive to users with accounts)
    • Add essential Create, Read, Update, & Delete (CRUD) functions for links (exclusive to users with accounts)

Phase 3: Build out functionality available to users

  1. Add Workspaces – a separate database that allows links to be grouped so users can track sets of links with specific purposes
  2. Add the ability for users to add external domains
  3. Implement a bulk upload feature for links
  4. Enhance the available data analytics for links, workspaces, and eventually domains
  5. Create an Admin user level and dashboard, CRUD functionality for links and users, including resetting passwords
  6. Begin live user testing to identify pain points and evolve the design

GEtting STarted

It’s difficult to design a web app that doesn’t have a logo or brand guidelines, so that’s where I started. While creating a brand wasn’t the primary intention of this project, it was important to the UI’s development. I began by ideating logo concepts and some basic brand colors and elements to evolve as the project progressed.


Traken is a portmanteau of “Track” and “Kraken” which offered a strong branding opportunity in imparting a deep-sea feel to the brand. However, it also presented a challenge. A link shortening app relies on end-users to click a link and redirect through the web app, but users aren’t likely to click a link if they don’t trust it. Today, cybersecurity is an issue at the forefront of many people’s minds, and “Track” can negatively connotate. Likewise, Krakens are famously unfriendly. Navigating these issues and fostering a lighthearted and trustworthy appearance was an important aspect of the development of the brand and capturing new users.

Below is the final logo that the client decided on for Traken.io. The logo is intended to represent a Kraken’s eye while remaining simple, clean, and friendly. The font is a modified Josefin Sans, an open-source font similar to Futura. Notably, the logo can work together as a wordmark or alone as an icon.

Traken.io Logos displayed in vertical and horizontal formats

After I developed the logo, I settled on fonts and colors. While the logo uses Josefin Sans, the rest of the app uses Nunito Sans. It shares a similar geometric style but is more balanced and legible for user interface elements. Nunito Sans also supports an array of glyphs and diacritical marks. This ensures that, while internationalization was not a primary concern in this project, Traken.io can accept most Western languages.

The colors went through several iterations as the design progressed. The initial starting point was dark indigo, and I added additional colors to help espouse a deep-sea feel. As the design progressed, so did the colors. Particularly important was adjusting the palette and adding high contrast colors for data visualization.

A style and branding guideline document for Traken.io

Planning

With so many link-shortening web apps available, establishing the minimum requirements for an MVP was relatively straightforward. Established competitors in the field have proven business models and have most likely conducted user testing or analysis to refine their user journeys. Borrowing features from these sites gave a roadmap to a fully-fledged project which was parred down to its core features for an MVP. Simultaneously as I created the site architecture, I mapped out user journeys to identify important interactions with users.

Planned features for the web app split into two phases
Traken.io site map made during the planning phase
A map of the processes and data collected during a user visit

Final Design

Despite this being a two-phase project, I designed all necessary UIs from the beginning. Doing so allowed me to evolve the branding and develop a UI component system to ensure future updates would remain consistent and familiar for the user.

Below is the final design for the marketing page. The marketing page is critical to establishing legitimacy with users, familiarizing them with the Traken.io brand, and growing the user base. Because link shorteners are simple apps, I designed this as a one-page site; the top navigation links are anchor links to the page’s lower sections. In the first phase of the project, the Customize section would be removed as this functionality is not yet supported.

The marketing landing page (Lorem Ipsum still in place pending copy enhancements)

Key interactions

Essential to the functionality of the marketing page was the link shortener partial at the top. This was designed to minimize friction and make it as easily understandable as possible. Once a user shortens a link, confetti falls from the top of the page with the shortened link, and the various actions the user can take sliding into view underneath. This small interaction helps leave a lasting impression on first-time users. A create an account CTA is also shown, and if the user attempts to edit the link slug, they will be asked to create an account.

Final Web App Designs

The following sections highlight some of the critical areas in the final web app designs. The web-app is the application available to a logged-in user. For instance, below is the final design for the Links page, where users can manage their existing links and view their performance. Because initially, only basic information about user’s links will be available, a table paradigm was used to showcase the link’s performance. When a user clicks on the link, the table expands and displays a bar chart of link clicks over time and some basic information. The “view complete analysis” button will lead to a separate links dashboard in the third phase of this project, where a user can view more in-depth information.

Creating new Links

Below are the user flows for a signed-up user to create links individually (left) and in bulk via a CSV file (right).

Dashboards

Below are the dashboards for users to view either a single or a group of links (workspaces) performance. It was important to design these dashboards to present the various metrics to the user in a readily understandable way while structuring the information in order of importance. I expect these pages to evolve as the user base grows and the hierarchy of important information becomes more apparent.

Mobile First

Despite link shorteners often being used by businesses, today, it’s critical to design with the expectation that a large portion of users will be accessing your site via a mobile device. I ensured that Traken.io would afford a similar functionality and usability level to mobile users as desktop users. Using the bootstrap framework helped with this thanks to their library of responsive components that let me rapidly develop the app and only customize where necessary. The mobile navbar is one example of this.

Implementation and Next Steps

This project was developed using Ruby on Rails and deployed on Heroku. Sometimes, the development influenced or modified the design for ease of deployability. For instance, I changed the login and signup pages design to better fit with the stock functionality provided by Devise – a session and user management gem. Or for instance, using datatables.js helped evolve the functionality offered on the links page.

While the web app is fully functional within the first phase’s requirements, it has yet to be connected to the Traken.io domain. Currently, I handle the admin’s role, and an important next step will be building out an admin role and a corresponding dashboard to manage users and links. Additionally, once the web app is launched, we can begin user testing and making iterative improvements.

Thanks for reading!

Jump to Top

Contact Me