Marconn App

First supply pedestal build with eco friendly awareness.

Problem & Goal User Research Flow Diagram Wireframes High-Fidelity UI

Prototype Insights from users Accessibility Check Impact

Where

Olot, Spain

When

2020

What

Native Mobile App

Role

UX Designer, QA Designer

Responsabilities

Paper and digital wireframing, low and high-fidelity prototyping, accounting for accessibility, iterating on designs and primary contact to the client and the development team.

Problem

Long, slow and wearisome processes brought about the need for a tool that would reduce frustration and create happier customers. Prior to this, users had to do all the paperwork at the port office on arrival, leading to long queues in high season and annoyance among users at having to waste time doing things that could be done online.

Registering at the port, registering boats, connecting and disconnecting water and electricity supplies and paying were some of the tasks users had to do in person.

Goal

Create a platform where users could self-manage their personal and watercraft details, open/close water and electricity supply, make payments, check their expenses and receive notifications.
Our main aim was to facilitate the registration process before their arrival so that they can start their holidays and days off with ease.

Impact

With the creation of this app we have managed to improve the overall user experience, as the user becomes self-sufficient. By facilitating online registration, it has avoided queues and wasted time and, in return, provides a better user experience both online and offline.

Project Highlights

I had to work through all the user flows, 5 in total, that the application has.
Being able to receive real feedback from our users motivated us (the developers and myself) to find the best way to display the information to facilitate the completion of each task.

User Research

No user research was done for this project but the client provided us with feedback and insight from their real customers, which showed the lack of user independence and the need for a solution.
Thanks to this feedback we were able to not only create but also iterate the functionalities and flows of the app once they were available in the app.

Pain Points

Functionality

The most requested and core functionalities were the ones we focused on to build proper solutions, such as the registration form, personal and watercraft details, opening/closing the supplies and being able to pay for them through the app.

Productivity

Feedback showed that in-person registration was one of the most annoying steps the users had to go through. Therefore, this particular user flow was the one we worked on the most (from a design and development point of view) to ensure that the user could fill in all the information through the app anytime, anywhere.

Process

Another issue users encountered was having to wait for the monthly bill to check their water and electricity consumption, which sometimes resulted in unpleasant surprises.

One of the functions we worked on was to display the current consumption, as well as an archive of bills to return to if necessary.

Flow Diagram

In every successful User Experience design, understanding the target audience is paramount. Personas provide valuable insights into our users' motivations and challenges, guiding us to create a more tailored and inclusive user experience.

Goals

Stay informed about local news and events.

Access news conveniently despite limited internet connectivity.

Find relevant stories and information that impact her community.

User-friendly website with intuitive navigation and clear content organisation.

Frustrations

Lack of coverage her town receives from larger news outlets.

Limited and intermittent internet connectivity, which hampers her ability to access online news and stay updated regularly.

When news content is not optimised for mobile devices or lacks accessibility features, making it challenging for her to consume news on her preferred platform.

About María

☺️

🎓

Bachelor's degree in Education

🏙️

La Guajira

María is a dedicated teacher who is passionate about education and community development. She resides in a town that often goes unnoticed by mainstream news outlets. María strongly believes that access to reliable information is crucial for her town's progress and the well-being of its residents. Her goal is to stay informed about local news, events, and developments that directly impact her community. She wants to be able to access relevant news easily and conveniently, despite the limited coverage her town receives.

Problem statement

María Rodríguez, a teacher in an underserved town, lacks access to reliable and relevant local news due to limited coverage, unreliable sources, and poor internet connectivity.

Flow Diagram

To outline all the necessary steps and functionalities, I created different flow diagram of the main tasks the user can do. One of the flows is shown below. Fail state flows were also created, but are not shown due to space constraints.

Onboarding user flow

Paper wireframes

By utilising a low-fidelity medium like paper, we focus on core elements and layout without distraction, allowing us to iterate and refine the design based on user feedback before moving into the digital realm.

These paper wireframes capture key features such as intuitive navigation, content categorisation, search functionality, and mobile optimisation, addressing the specific needs and challenges faced by users in areas with limited coverage and internet connectivity.

Digital wireframes

Once the paper wireframes were ready, I started creating the low fidelity wireframes of the main flows.

High-fidelity UI design

Once the initial flow was complete, I started by creating a few of the main screens of the app.

Colour palette

Accent, primary, secondary, background

Font

Poppins
Regular, Medium, Semi-Bold, Bold, Black

AaBbCcDdEeFfGgHh

84 high–fidelity designs were created

Including the main 5 flows and secondary screens such us error pages, lightbox popups and in-App tutorials to drive user adoption.

Alignment and grid

I picked an 8–point grid for the project and set the margins for within groups at 8 and 16, with margins between groups at 24, 32 and 48.

High-fidelity prototype

I connected my high-fidelity designs into a clickable prototype. This will allow me to better present the app to stakeholders and better showcase the features and user flows for development.

Insights from real users

Once the functionalities were ready and tested, real users were able to use them and, from this initial contact, they sent us their comments and queries and we were able to identify areas in the mockups that required further refinement.
One iteration that we considered a priority was to change the appearance of the buttons to open and close the water and electricity supplies, as some users had difficulty identifying them as buttons.
It was also found that first-time users had trouble figuring out all the action that could be be done throughout the application. For this reason, we created a series of animations to be use as in-app tutorials to boost user adoption.

Accessibility check

The app has been evaluated for contrast to match the AA standards of WCAG.

When revising the screens I found that the size of some texts needed to be bigger for them to be accessible. The smaller size found within the app is 14px, and these are used for secondary texts. For more relevant ones the smaller size is 16px.

Project summary

During the project I was able to work with different user flows, I had to find a way to make the selection of turrets and supplies not only interactive but also clear, I was able to receive feedback from real customers and implement changes and work hand in hand with the client and the development team, and I was able to do perform a thorough QA.