This project is a Vietnam-based project born to fulfill the need for Digital Citizenship education for our youth beneficiaries. The growing cybercrime represented an urgent need that was covered by this portal.
The Problem
The audience evolved, thanks to different projects like Lamsaodevao, Chong hack, and others, the digital crime rate lowered in Vietnam. Now the portal has evolved into an organization that wants to attend personal digital safety threads and educate civil associations to be safe online, growing their scope and efficiency. I needed to create a portal, keeping most of the brand that can serve this purpose.
Target Audience
Young people in Vietnam from 15- 35 that use digital platforms on daily basis, (most of them do)
Civil Associations interested in having a healthy digital presence diminishing the online risks, this activity brings to the table.
Split and conquer
After implementing a survey to a large group of young digital device users in Vietnam, we discovered most of them would like to have the option of having personal assistance for their digital hygiene, aside from the already successful content the portal shares and produce daily. The associations were interested in being audited and helped directly for safety implementation in their networks.
In order to accomplish these different demographics was to split the site into two. Personal assistance will take you to a questionnaire to evaluate your digital hygiene behavior, and based on the answers the user will get personalized assistance, like push notifications, email reminders, and will point them to the articles related to your level.
I realized the website was made on Images that were linked, which made it awful when visited on mobile. I talked to the in-house developer so he could take over and do a full refactor for our new version, and make it mobile-first.
The SalamaTech project supports Syrian civil society and human rights defenders to operate safely and effectively online. Since the project launch in 2012, the SalamaTech team has helped tens of thousands of Syrians learn how to stay safe online in Syria and the region, through training, emergency response, awareness campaigns, and expert support.
This project operates mainly online because of the difficult state of affairs in the region. Their website and social media are essential tools to reach people in distress.
Problem
In 2017 the numbers of the site starting dropping down dramatically, putting at risk the continuation of the main SecDev Foundation’s project. We needed to find out what was happening with our users, and change the page in order to revert the problem.
Target Audience:
Women, youth, and civil society organizations located in Syria, needing digital citizenship education, in order to be safe online.
Less is More, says the wise words.
After doing several interviews and questionnaires with our local teams and beneficiaries, we realized that the website that had been recently re-done by an in-project developer, contained too many graphics and effects (parallax effects, animations) and with a wartime internet it was almost impossible to load.
We talked to the end-user and they expressed they didn’t need fancy graphics. they just needed a fast loading site, where they could easily find useful information.
I was responsible for the new development. The first thing I did after reading the interview and survey data, was to meet with our in-house developer to assess what could we do to optimize loading times.
We decided to do a page with a very light image at the beginning with the project definition, and the rest to do it text-based.
I created the wireframes, taking into account that Arabic is written right to left.
I did the high fidelity mockup which was reviewed by our Syrian partners, while our developer builds the base structure of the site.
I created all the visual assets and supervised the site followed the approved design.
Currently, images have been added to articles again, because most of the people in our reach, use Turkish internet which is better than the local providers.
Cyberstar is the digital hygiene assessment methodology created by the SecDev Foundation, after more than 7 years of implementing digital safety and hygiene programs all over the world.
the CyberStar portal is an educational platform that will allow the methodology to spread in various regions in the world. On it first stage it is planned to work in Russian, Uzbek, Arabic, English, Vietnamese, Khmer and Spanish.
The Problem
The platform needs to deliver specialized training to different audiences in multiple languages. the education has 2 categories, personal training, and special training to generate advocates of the technology, which will be certified to access and train other citizens. According to the founding agreement it needed to be launched very promptly be able to continue with the initiative.
Challenges:
Delivery time.
Complex navigation. it is a portal with many things.
A lot of content to be organized and categorized.
Iterations are the path to success
In order to launch the product on time, and not risk essential elements like digital security, The portal was divided into 3 stages, that would be launched progressively.
Our first stage, a self-education portal. A simple magazine type of website that curates content related to digital hygiene and safety. The second stage would integrate, the individuals’ educations. Organized and guided education programs that if approved the user will be able to get a CyberSTAR certificate for free or to pay to a local university to validate the course and give them an official degree title.
The wireframes were essential to test the site architecture of our first version.
I created directly a high-fidelity prototype, that was tested by the team and a small group of potential users.
I used the logo as a category split in order to solidify the asterisk as the Universal Cyberstar symbol.
Inspired by hospital navigation, I designed a color path web architecture, in which the user will always be aware of the general topic they are reading about.
This is an ongoing project based in Cambodia, we are teaching young people about online security. This is the first initiative of this kind in the country and have been growing very fast since we began. I was in charge of the UX/UI of the website, Brand creation and integration with all the products. As well as teaching the local team to generate and use their visual resources.
I created the logo and icon after 3 instructive brand sessions with the local team in which they learnt the importance of reducing to its minimum the graphic representation of the brand definition in order to have a memorable logo.
The color palette is vibrant and the character design is manga, to resonate within the young population in Cambodia which has a lot of influence from this comic style aesthetics.
The idea of the team was to have a beehive hexagon team as the main navigation of the training topics. The main idea of the navigation flow is for the user to never have to click the back button in order to reach to any place on the site. they should always have guidance and movement freedom.
Wireframes created in Adobe XD
All the visuals were created in Adobe XD and ran through different youth groups in Cambodia, to ensure it was easy and pleasant to navigate.
The webapp will be launched this summer. The social media accounts are already growing exponentially everyday.
Foodwize is a food-tech startup that was born out of the necessity of co-working spaces and small companies to offer lunch and dinner options to their clients.
In 2019 an old friend told me that he wanted to create a connected canteen to provide local and ultra-fresh food to the co-working spaces he has been using for one year. In his opinion, the options offered were not good, and waiting for delivery required an extra level of planning that he didn’t have time to.
The project is user-oriented since the beginning before starting to design the solution, we launched a questionnaire to understand what the consumers think of the food experience in coworking spaces, and we interviewed managers of 2 co-working spaces (WeWork and spaces) to access the real market possibility. We found out that 75% out of 145 questionnaires were not happy with the existing options and all the companies expressed the unsustainable cost of having a cafeteria that could offer high-quality food.
Foodwize is a short circuit food service that offers local, ultra-fresh, and sustainable food, at a competitive price through a two-square-meter (2 m2) connected canteen. It creates a food community that will know who harvests their ingredients and who cooks their food, promoting the local economy when the users want to go to their restaurants.
Problem:
How to develop a canteen service that allows the users to get high quality, local, ultra-fresh food, in no time with the less contact possible.
Challenges:
Budget. the solution must allow charging 12 Euros per full meal.
Contactless. Hygiene-wise we need to assure the consumers that the least people possible were in contact with their food.
Easy access. interviewed people said, they think delivery services are too slow for their life rhythm, Foodwize must be quicker than them
Create a sense of community, promote our vendors.
Target audience
This startup has the particularity that needs to address 2 types of clients:
B2C
Professional People between 25-45, living in Paris, who mostly work from coworking spaces in their regular weekly schedule.
The interviewed people expressed the importance of flavor and ethics in their food, they are willing to pay a little bit more to ensure these values are present in their daily plates.
B2B
Hosts, Co-working spaces in which quality food service is one of the main requests from their consumers. And Small companies which by law are required to offer lunch options to their employees.
these 2 main clients are concerned about the cost of having an in-house food provider and the real state that it would take from them, that is why our solution is perfect for them.Roles and Responsabilities
UX/UI lead designer and Creative Director.
I am in charge of generating a cohesive service experience for the users. Based on the architecture designed by a systems engineer I developed a series of digital products that make the internal and external processes in the startup to be almost automated and easy to use. I lead the experience and brand design in parallel. Conductor user testing sessions and continue to be part of the planning for each product growth according to ti the user’s needs.
Let’s Feed them
I analyzed the service architecture and identified the main products to be developed in order to have a Minimum Viable Product. the answer was:
A mobile app that allows the user to explore the canteen’s content and to open the canteen.
A corporate website, to attract investors and communicate the idea of the startup
Custom CMS to control the content of the website and the mobile application.
I created a navigation map of each product and the relation between them.
We created wireframes in Google Slides, and user flows creating personas that would represent each user case. This wireframe was tested by 10 potential users in Paris, from 2 different we-work coworking spaces.
Personas
Overall summary
scan page
Based on the wireframes, I created a High fidelity prototype, while the development team was preparing their working environment using Adobe XD. this prototype was tested by the whole team and a total of 12 potential users in France.
I followed up with the team, providing assets and supervising the UI development. After every sprint, our app and our website would have an internal testing session. once we got to a big milestone, we would invite external users to test the app, and give us feedback.
I made sure the main function of the app was the first thing our consumers can see when enters the app.
The main function is to serve as a canteen key
the information about the food and the cooks are easy to find, and once you enter your credit card in 3 steps you can have your food in front of you.
Simple feedback from the users in order to develop an ai that will help re-stock the fridges in an efficient way.
The corporate site is a simple “Presentation Card website” that will grow into a web app in which the consumers will be able to go into their profiles and check the live content of each fridge. Mobile-first… ALWAYS!
The CMS is able to control all the content in the app. Including a web app that does the nutritional facts calculations and automatically fills the Database fields.
And one of the most exciting things was to design the experience between our canteen and the user, in which we partnered with an industrial designer to evaluate the flow of the experience and take decisions such as which way the door should open. And how with a LED logo we can communicate clearly with our consumers regarding the interaction with the door.
The 1st prototype was done and tested the app positively and the 1st canteen is being built at the moment.
