Iton Silva
An app for the Vitória soccer sports club that updates fans about the teams, games, and club. The app is free but also offers some premium content.
Redesign the app with a clean and functional interface, improve app navigation, and provide a positive user experience.
• Content strategist
• Interaction designer
• Interface designer
Designed a clean and polished interface. Toned down the colors, chose a conventional legible font, streamlined the menu, used cards to organize information, and increased navigation connectivity.
• Engineering
• Brand ambassador
• Club president
Implemented a single menu using the drop-down menu to expand to subcategories without leaving the page. Eliminated the intense contrasting colors, opting for a single-page menu.
The result? A significantly cleaner interface that's easy on the eyes, along with intuitive and concentrated navigation.
Eliminated user flow dead-ends by creating a link option for non-registered users to access the sign-up section if they accidentally clicked on "Enter" instead of "Register."
Also added a Forgot Password link option on the same page. Implemented a bolder input field and added a placement holder to achieve better clarity.
Persuaded the client that displaying advertising during the log-in process was unusual and distracting. My solution was to assign a “sponsored by" space on the flash screen page.
Using the gestalt proximity principle, I compiled different elements into a single entity to provide information and calls to action. I then used the gestalt principle of similarity to offer that information and calls action over and over with unique content. Some cards now have images heroes, followed by a title and content date or duration. Elsewhere, news cards expand to the full article page and podcasts and streams feature play and pause functions.
By moving the logo to the top-left corner, I freed space for premium users to log in to their accounts and enjoy their premium content. I also designed the content page title to serve as a menu: The sides of the label now offer direct links to relevant content pages.
Moved the old hamburger menu from the hard-to-reach upper-left corner to the bottom tab menu to facilitate thumb-friendly access.
Changed the way sponsors and advertising were displayed. Instead of showing four sponsors per page, I created a single interchangeable sponsor space above the bottom tab menu to accommodate the sponsors’ logos, thus creating fewer clashes with content. And the sponsor tab can expand into a pop-up ad page with a "close tab" option.
Used user flow to distinguish users of freemium and premium content. Established a frictionless path for paying users and limited (but not obstructive) navigation for non-paying users.
Used wireframes to envision layout and content grouping. With wireframes, I could visually propose changes to the old design structure and get feedback before spending much time in a high-fidelity prototype.
I used modern matching icons to create familiarity and denote unique content.
I created a color palette better suited for the user interface. The previous design used black and red proportionally, and together, the harshly contrasting colors generated a lot of noise. This palette uses black as a primary color, gray as a secondary, and red and moss green as accent colors.
I used the Oswald font for titles and navigation because it's bold and expressive without taking up too much space. I also continued the team's use of Factoria for numbers. For general content, I introduced a webfoot family that's both modern and readable.
Used ideation to organize ideas and collaborate with teammates. The information was selected, discussed, and refined into a prototype.
I learned much about using design principles to achieve a clear and concise interface and intuitive navigation. Color theories helped me declutter the visual pollution, and grouping items into elements helped create a much-focused interface. In order to ask the right questions, I also learned to get a thorough understanding problem beforehand and how to justify my design process. I was able to improve the app’s visual and user experience.