Portfolio

Mobile First Approach

 

When sketching and creating wireframes, I keep a Mobile First approach, having in mind the products that will be used mostly on mobile devices.

 

In the case of the Arboretum, users would have quick access to useful information, such as Opening Times and Directions.

Case: TravelOrganisr

 

The idea for this website/app is to have all documents relevant to your trip in 1 place.

 

Users should be able to add or access documents in all devices, with a backup in the cloud.

 

The image shows a mockup of my initial UI concept, created with Axure.

TravelOrganiser website

 

Axure mockup for a project of a travel organizer website, alongside initial sketch.

Arboretum website

 

Bootstrap prototype of the redesigned website, alongside early mobile and web sketches. 

From concept to prototype:

Case: Arboretum website

 

  • The biggest problem on the original website was the extensive text and difficulty in finding the most useful information: where is it located, what is the contact information, when is it open? That information was previously hidden at the bottom of the page.

  • The use of bigger pictures plays the part of "selling" the place and convincing the user that it's worth a visit.

  • In the redesign, the Welcome message was reduced, as further information can be presented in the About page instead of taking real estate in the front page.

  • Address, Opening Times, Contact Info and a Map were added to the top of the page for quick and easy access.

  • Navigation menu and Search also have easier access at the top of the page, following the F-shaped reading pattern.

My Process

Strategy & Research

Through Competitive Analysis, Analytics Review, Surveys, and Stakeholder & User Interviews, I gather quantitative and qualitative data to better understand product objectives and both user and business needs.

Persona creation

Based on data collected during Research, through Interviews and Surveys, I elaborate personas in order to create empathy and keep a user-centered approach to the design process.

Then I create and describe User Scenarios 

through storyboards, to show how the product fits into the user's daily routine.

Scenarios

In the case of a redesign for an Arboretum website, with extensive copy and confusing navigation menus, Card Sorting helps to understand where users will look for what information.

Card Sorting

Analysis

Listing Business and User Needs for a recipe website

Interview Guide example for research on Transportation

Sitemap example for the Arboretum website

User Flow example for the Recipe website

Sitemaps

 

From results of Card Sorting in the Arboretum case, a sitemap was created to display the hierarchy of pages and assist information architecture and later, wireframing.

During the Concept phase, Analysis findings will result in concept designs and low-fidelity prototypes, which can be tested by users and then iterated for improvement before proceeding with hi-fi design.

User Flows

 

In the Recipe website case, I created a user flow that shows the journey from browsing categories to using the Search function.

Concept

  •  Compared 8 competitors for the intended segment (healthy recipes), interviewed the client and highlighted both Business and User Needs to formulate a survey.
  • Survey results helped outline a scale of importance for different types of information that are usually displayed along with recipes (images, nutritional data, preparation time, etc), which in turn could help decide the Minimum Viable Product and what details would be "nice-to-haves" in the future.

Case: Recipe website

Summary of Survey Results for the recipe website

I am a UX Designer with a background in Front-End Development and Computer Science, which allows me to advocate for the users while also speaking the developers' language and meeting the business goals.

 

Through research and analysis, my goal is to understand how users interact with different systems, and from there, recognize how we can design to improve their experiences.

Design & Develop

 

 

At this phase, I use tools such as Axure, Sketch and Marvel, as well as Bootstrap framework, HTML, CSS and JavaScript, to produce high-fidelity and interactive prototypes that can be validated with stakeholders and tested once again by users, for fine-tuning before launching.