AlignTab is a Google Chrome browser extension for productivity. Its purpose is to align the user with his or her aspirations. This product is directly associated with the law of attraction and the principles of alignment and manifestation. Following installation, the user creates a vision board– This is a collage of images representing their goals and respective deadline target dates. Optionally, the user can also add a daily mantra, daily habits, and to-do list items in the dashboard sidebar. Now, each time the user opens a new browser tab, their deepest desires are reinforced.
The goal was to create a logo design and a corresponding web UI design interface for macOS desktop screens. The logo design is for brand materials and marketing. The web UI design interfaces are for use by the in-house developer at AlignTab headquarters. Eventually, AlignTab will have an official company website, but for now, it offers a standalone digital product available in the Google Chrome store.
- Flat Design Colors
- Mindfulness advocates
- Momentum Chrome extension users
- Jay Shetty podcast listeners
- Primary Logo Design
- Web UI Design for Google Chrome extension (Desktop macOS)
The biggest challenge was creating a logo that would be both simple and concise. The logo design is a combination logo with semi-transparent and rounded elements. The icon adjacent to the text depicts two frames overlapping in perfect alignment. Alternatively, these frames represent fingers or tools overlapping to focus on the big picture. By design, the logo icon can be used separately as a brand mark or favicon, and the logo text can be used standalone as an alternative to the full logo.
Want to see the full-size logos? Tap on an image to enlarge it!
Next, I created the web UI design via Adobe Illustrator. For the web style, we agreed upon an analogous green-blue-violet color scheme and Circular, a sans-serif geometric font. I used the wireframes provided by the AlignTab developer to design the interfaces. The functions of the chrome extension are simple, so no interaction prototypes were necessary. My job was to make the elements as close to native as possible for the macOS desktop browser.
The main dashboard displays images in a gallery or grid style, date and time, daily mantra or quote, daily habits, and to-do list items. In addition to the main dashboard, there are four tabs: settings, news, notes, and bookmarks. The settings tab adjusts the layout of AlignTab. The news tab keeps users up-to-date on company and product announcements. The notes section is a place to jot down those epiphanies and bookmarks stores a list of hyperlinks.
Additional (cool) features of AlignTab include dark mode and private mode. The dark mode inverts the standard background, and personally, it is my favorite feature. The private setting hides AlignTab for those times when goal sharing is inappropriate. There are also options to switch between the gallery view (default) and the grid view. The grid view is only accessible with four images.
To see more AlignTab screens, tap on the images below!
The End Result
In summary, working with the team at AlignTab was positive and rewarding. We were both happy with the outcome of the project, and the developer is using my mockups to create the final product. As AlignTab launches its first product, I’m happy to be a contributor. In the future, I plan to work with them again to design interfaces and interactions for their company website. In the meantime, I’m perfecting my vision board and progressing towards alignment with daily reminders, thanks to AlignTab.
Legal note: The Mac desktop mockups are courtesy of anthonyboyd.graphics.