Web & Interaction Design
Web & Interaction Design

I have worked on web design and interaction projects, the process involves low-fi prototypes, wireframing, interface design and hi-fi prototypes. I use Figma, Adobe XD and Sketch.

Scrum Alliance Homepage

I worked on the homepage of the Scrum Alliance website and the design was used from 2020 to 2023, using branding components and responsiveness for mobile devices.

Scrum Alliance Agile Organizations webpages

Design for the Agile Organizations section of the scrum alliance website, since Agile Organizations is itself a category I designed a vertical menu that makes it easy to navigate.

Scrum Alliance Members Dashboard Design

Scrum Alliance’s user community was facing usability challenges when logging into the website and using the dashboard to renew their certifications, use their SEUs (Scrum Education Units) and access other information such as purchase history, notifications and member benefits. I was assigned to work on the redesign of the dashboard, and my solution was to have a vertical menu on the left side for desktop, and to separate all of the features in different sections that can be found easily using the navigation menu. As a result our community of users have provided with positive feedback and there has been an increase in renewals and the usage of member benefits. The UI design is consistent with our Scrum Alliance brand by using colors and typography already stablished in the brand guidelines.

User Flow

As a starting point, a user flow was designed according to the needs of users and that helped me define the architecture of the dashboard design and organize its features in a way that they are easy to find and to navigate to and from.

Low Fidelity Prototypes

After the user flow was defined, I drew pencil sketches of the interface with all of the features, I collaborated with the developers to figure out which of these features are doable in Rails (the backend development application) and the rest of the team for feedback.

Typography And Color Palette
UI Components

I designed a UI kit with buttons, checkboxes, radio buttons, modules, donut charts, and custom icons for the design of the dashboard, in order to bring a seamless user experience and brand presence.

Hi Fi comps

After the rough sketches were approved and good to go I designed the layout for each page in Figma using the components from the UI kit and created a clickable prototype out of them for testing with some of the community members.The homepage section has notifications regarding certifications to renew as well as SEU's (Scrum Education Units) that can be used to renew certifications.

Worth App

Worth is a budgeting app that enables its users to manage and monitor their income and spending information in real time without any unnecessary features. People need to have a better view of their expenses and to have more personalized information about their assets because  it's  time consuming to access account information. We believe that by creating an easy to use application people will have a good user experience by getting quick access to their financial information. This is a concept that I designed for a UX course I took at General Assembly.

User interview findings

In order to understand what the user goals look like, interviews were set up to understand what their pain points are and what would be the best solution for them in the application with the right features in the right places. A set of personas were defined to categorize users.

Lo-Fi prototypes

After the user research, and competitive research information was gathered Pencil lo-fi prototypes were done to define the starting point of the architecture of the application to allocate the features in the application.

Wireframes

After the features and architecture were sorted, clickable wireframes were designed in Figma to test the application architecture, user goals were used to test the features with users who volunteered for testing.

Color palette and tipography
Hi-fi prototypes

Using branding language for visual design and wireframes for interaction, a consistent interface design was implemented for the screens.

Thanks for visiting.
Let's get in touch
Thanks for visiting.
Let's get in touch