Vitória recreational

About

The ECV soccer team's interactive app consists of a social network, quizzes that give points for rewards, and a photo manipulation feature with the team's theme.

Challenge

Create an intuitive app with a short learning curve for all types of users. Design an experience  that users want to repeat.

My role

• Content strategist
• Interaction designer
• Interface designer

Solution

Designed a straightforward interface and streamlined menus and navigation, resulting in a better user experience.

Collaboration team

• Engineering
• Brand ambassador
• Club president

Decluttering the interface

I removed the busy background image and reduced the sharply contrasting colors by using a more subdued secondary color. In addition, I nested information with titles so it didn’t float independently, and I made use of bolder numbers to establish hierarchy.

Creating the network interface

I created a significantly cleaner and more intuitive network interface for the team. Users can now like, comment, share content, delete posts, save photos, and report inappropriate content. I hid rarely used calls for necessary actions and nested like, comment, and share menu options in image posts. The user profile reuses the user's name and avatar throughout the app and can be changed on the settings page.

Making user-friendly interfaces

Used microcopy and icons to help users create a photo composition by selecting and dragging digital team memorabilia on top of their photo. Made the resulting image postable on the team's network and savable to the photo gallery.

Improving inclusivity

Created a slider picker so users can "vote" for three players that they believe stood out in the most recent game in three different categories. The name is nested with a player profile picture to be more inclusive and create familiarity.

Carving a better user orientation

The app's previous version had lots of writing instructions for using this feature. I designed it so that the "photofan" automatically takes a selfie when you smile, and included microinstructions to guide users on the same page as the feature. Also implemented a short countdown so users know when the process starts and ends.

Working with variables

Developed different scenarios for a quiz. If an answer is correct, the app takes users to a page that validates their responses and shows an expanding heart animation and plays cheering sounds. If the answer is incorrect, the next page shows the correct answer in green and the animated heart grows and breaks in half. The answer page also shows the total points gained.

Grouping information

This page layout displays the user’s personal information on top (his score, his ranking against everyone else, avatar, name, and location). Right under it is the collective ranking. The location was added to create more competitiveness, you could root for a local winner if you are not the winner.

Ideation

Used ideation to organize ideas and collaborate with teammates. The information was selected, discussed, and refined into a prototype.

Takeaway

This project was a challenge because the app was already coded and the club was just customizing it to the club's needs. I had to work closely with the client and the engineer to create a suitable design for users with the existing code. I also had to justify my design decisions and show proof of problems they didn't think they had. I wish I'd had more tools for testing, more freedom to design solutions, and more time to create a better product, but I learned to deal with design constraints and justify design decisions.