Echo and Tracking App are two of our earlier case studies that covered user interface (UI) and user experience (UX) design and redesign. Today, we are pleased to bring you yet another UI design project and add it to this growing collection of cases.
Working on every stage of a product’s development and release, from brainstorming to user experience design and finally user interface development, is the holy grail of designers. But in practice, there are many projects where the designer focuses solely on the user interface stage, using preexisting or created UX. This typically occurs when a product is already in existence and running well, but it could use a facelift to make it more modern and user-friendly. Given that the graphic designer only needs to picture the provided layout and scheme, rather than considering the user’s logic and behavior, this approach may seem even simpler to some. In reality, though, things are quite different; since effective user interface design is invariably predicated on well-executed user experience design, maintaining consistency necessitates that the designer delve deeply into the specifics of the provided layout and transitions, and occasionally resolve small UX issues while designing the UI. This occurs frequently due to the fact that outdated user interfaces do not support new user interface solutions.
This was the problem that Tamara, a designer at Tubik Studio, encountered while working on the PassFold project’s user interface. Together, let’s delve into the details.
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
Using the current UX/UI as a starting point, redesign the user interface of a mobile app for managing tickets (passes).
Software used: Adobe Photoshop and Illustrator.
Process
The underlying concept of the application under development was straightforward and useful: it offered a digital repository for online-purchased tickets and passes and provided numerous options for their administration.
The designer conducted extensive analysis and collaborated with the client to enhance the application’s overall usability by making minor adjustments or adding significant functions, even though general UX was already provided as a basis for UI solutions. A new feature that users can customize is the ability to receive notifications based on specific dates and events. This way, users can decide whether they want to be notified about all the events stored in their storage or just the ones they deem most important.
In order to further improve the app’s user experience and user interface, we shifted some of the items from the side menu to the tab bar. Moving the content of the basic menu to the tab bar makes the user experience more intuitive and comfortable. The reasoning behind this is rather simple, as there aren’t many options there. The tab bar is an excellent choice for the minimal set of essential options, as shown in earlier projects and studies.
Applications
Several conventions utilized across all screens of the app were also incorporated into the user interface of the provided application. In highly practical applications, where operations must be dynamic and not requiring too much time or effort, conventions play a crucial role in ensuring a positive user experience during product interaction. The image above shows the PassFold project’s consistent element—a tab that displayed the number of days until the event, represented by tickets of varying colors. In the app’s main menu, each color represented a different type of event. The ability to quickly and easily define the category of any item in the feed was made possible by them. That becomes even more valuable when the user is on the move and utilizing the app, as is common with extremely useful tools and applications.
Soft Ambience
The calendar, which shows all the plans based on the tickets and other things saved by the user, is undeniably a crucial component of this type of app. The calendar was also designed in an attractive and organized way, with a light background to make the colorful accents which show the dates of planned events easy to see. As previously said, the user could manually add notifications. When he did so, the calendar and the line describing the event would display the date with a small round mark.
Logo
Additionally, it ought to be mentioned that the application’s logo was another factor impacting the overall UI concept. Arthur Avakyan of Tubik Studio also designed it, and the next piece in our blog will soon be a case study detailing the entire process of its creation. It was sensible to maintain the overarching concept for both the logo and the user interface; as a result, their interdependence and relationship contributed to the overall impression of cohesive design. The logo was incorporated into the UI color palette along with its associated shapes and features, including the representation of tickets in the UI.
In summary
This task further proves the need of devoting time, energy, and creativity to designing an interface that is both easy on the eyes and accommodating to a wide range of user requirements.