You may remember that Tubik Studio created the logo for Saily App in one of our earlier case studies. Here we will take you behind the scenes of the UI redesign for Saily App, continuing this optimistic designer story.
Welcome to MavericksMedia, your premier web design company in Toronto delivering top-notch web design services tailored to amplify your online presence. As a leading team of dedicated web design company in mississauga, we pride ourselves on crafting stunning, user-centric websites that resonate with your audience and elevate your brand’s digital footprint.
Task
The user interface of the mobile app for local user-to-user e-commerce has been redefine.
Tools
Procreate, Adobe Photoshop, Adobe Illustrator
Process
Interface with Users
In case anyone forgot from our last case study, Saily is an app that allows neighbors to buy and sell used goods. Despite its classification as an e-commerce app, its primary function is to facilitate user-to-user communication. The Saily App team’s commitment to design and culture as the foundation of their work is a key differentiator. Designer Tamara of Tubik Studio reworked the app’s user interface to make it more entertaining and fun, per the client’s request. The designer reimagined Saily App with this goal in mind, tasked with making the product modern, straightforward, and easy to use; the result was an updated visual concept and additional features requested by the clients.
The designer focused on a user interface solution that highlighted key features with bright accents and offered simple microinteractions after researching and analyzing the current overall concept of layout and transitions. E-commerce is all about making the process easy and quick for the user. The features should also be informative and easily recognizable for a wide range of people.
Navigation
The overall aesthetic was based on a light background with bright accents in the navigation and notification elements of the interface. The goal was to create an upbeat and humorous interface that is also informative and useful. The decision lets in a lot of natural light, which improves readability—crucial for an e-commerce app—as can seen in the big picture up there. Additionally, any product put out for sale will more effectively showcased against a light background.
There were two paths that the search took: first, it looked for the specific items, and second, it followed the requests made by other users. Users specified the desired item in their requests. Additionally, the user has the option to save their own request history. An extra way for users to easily match sellers and buyers was through requests, which let them know what was actually in demand at any given moment. It would even more efficient to match the buyer with the desired item if requests could filter by location. The search bar was conceal while the content was being review in order to avoid user distraction and make more room.
The choice to highlight the content photos in a variety of colors was one of several aesthetic touches add with the intention of drawing the user’s eye. By using color-coding to establish conventions and boost usability, colors were utilize to visually aid navigation. Using original icons and background photos, the navigation categories were represent.
Set Up
Everything was neatly laid out along the cards, as you can see. The item’s card provided the prospective buyer with all the information they needed about the item for sale and allowed them to instantly connect with the seller. One to four photos, chosen by the user from their device’s gallery or capture directly from the app screen, could upload and edit to visually represent the item being sold. The sharing function was move to a separate screen to avoid overusing the card.
I should also highlight the application’s functional aspects, which include its chat and planning features. Even users without much experience communicating via digital channels should feel at ease using this chat because it is simple, easy to use, and organized according to the standard and common scheme of native chats, which is essential given the app’s positioning as a highly social platform.
The “meetings” feature allowed users to fix the time and day of the meeting with the seller or buyer in the app calendar and see this information on the item’s card, allowing for planning functionality. The item’s picture shrank and shifted to the item description field in the “meetings” mode, while the larger image displayed the meeting location and details.
Thus, the user’s feed could display the chats, meetings, and requests in three distinct modes. The seller can also inform users who might interested in the item by changing its status in the item’s own card. In addition, the app let users save certain items to favorites so they wouldn’t lose track of them amidst all the clutter.
Illustrations
The Saily brand mascot, a charming little ghost with a fascinating backstory, was mention in the earlier case study. The branding process, which began with the logo Designer by Arthur Avakyan of Tubik Studio, continued with the next stage of branding, which was user interface Designer.
In a number of humorous illustrations, the mascot and other friendly characters served as both an entertaining element and a means of alerting the user to the matters requiring their attention.
