BRANDING | VISUAL DESIGN | UX
Restores Security to society, from society itself
Environ is the app & website that connects security of public and private locations (parking lots, yards, houses, etc.) with a remote live surveillance system operated by trained elite personnel from countries with low economies and discriminatory minority policies. This creates a double benefit.
DATE
____
May 2022 - January 2023
ROLE
____
Brand Designer / Visual UX Designer /UX Researcher / UX Writer / Interaction Designer
TOOLS
____
Figma, Miro, Illustrator, Photoshop, Camtasia, MS Office
Goal and Vision
Design responsive app and website that will focus on making it easier for unemployed people to apply for video security training as well as jobs in the same industry. On the other hand, facilitating employers to search and hire staff as well as services that provide video monitoring for their facilities.
Intended Audience
I performed preliminary primary research by conducting interviews, defining empathy maps, personas and user stories to find Environ’s end users. I identified that the primary user group were educate / highly educated unemployed (College students, University students) living in rural / suburban areas, mainly in countries and states with low economy and discriminatory policies for national origin, race, sexual orientation, religion, disabilities, gender identity and similar.
Research
Environ has a huge amount of indirect competitors, but almost none of direct ones. This can benefit its positioning on the market concerning there is no specialized services in this industry. While other sites offer wide range of jobs and trainings and are not focused on unemployment problems in underdeveloped countries, as well as employer problems finding good workers in the field of security industry, Environ is trying to overcome this gap.
Personas
User Journey Map
Mapping Mateo’s and Vida's user journeys showed that the website could fill the gap in the market of highly educated and discriminated unemployed people offering them trainings and jobs in the field of Remote Video Surveillance.
Competitive Audit
An audit of several indirect competitor’s products (Indeed, Toptal, Upwork) provided guidance on the opportunities and weaknesses that the competition has, as well as the methods of solving that should be applied to Environ app and website.
Sitemap
Concerning how complex and atypical is this website, Environ sitemap acts as a navigation aid by providing an overview of a site's content at a single glance.
Ideation
Crazy 8s
Having in mind results from competitive audit, quick Crazy 8s ideation exercises lead to several ideas. My focus was on Suggested Trainings (No.3) and Highly Educated List of Candidates (No.4).
Paper Wireframes
I drew on paper several versions of the wireframes for the main pages of the user flow. In this stage main focus is always on the frictions and bottleneck users experience during their relationship with a product.
Homepage versions
Unemployment Registration page
Training Offers page
Homepage Final
Unemployment Registration page Final
Training Offers page Final
Digital Wireframes
I started working on Digital wireframes (based on paper ones). I made several versions of home screen, for both, dedicated app and website desktop versions. I wanted to see how different section of the homepage will break and divide in responsive website as well as in the dedicated app.
Homepage Wireframe App version 1
Homepage Wireframe App version 2
Homepage Wireframe Website version 1
Homepage Wireframe Website version 2
What followed was more refined version of the wireframe for the main user flow. While designing for cross device I usually follow Progressive Enhancement approach and mobile-first philosophy but always keeping in mind how everything looks on the website platform.
Lo-Fi Prototype
Apart from depicting main user flow in the wireframe I made almost all other pages in Lo-Fi prototype, concerned that it could be confusing for the Usability Study participants. Also, I presented two different user flows which would be selected by participants depending on the type of user.
Usability Study Findings
There were two rounds of usability studies. The first one guided designs from wireframes to Lo-Fi prototypes. The second study was used to determine what aspects of the Lo-Fi prototype needed refining for Hi-Fi prototype.
Round 1 Findings
Visually impaired users find difficult to read some texts and titles.
Some users are frustrated by the back button that is not staying fixed in the scrolling page.
Some of users think Candidates Profile need more data like Disabilities section and Gender section.
Round 2 Findings
Almost all users are confused with what is Compensation in the Training Description.
Many users think Note in the application fill form needs to be before Submit button.
Some users think Training needs more emphasizing and explanation. Users need to know that it is paid training, not the opposite.
Affinity Diagram
Challenges
CHALLENGE 1 |
From Skeleton to Accessible Hi-Fi
From the very beginning, it was necessary to emphasize to the users that there are independent applying sections, although their description was not detailed. After Usability Study 2, the elements are accentuated by colors, icons and negative space. An alternative interface was created for users with low vision and those who are color blind.
Before Usability Study
After Usability Study 1
After Usability Study 2
CHALLENGE 2 |
Concise, Precise and Inclusive
Majority of users it was unclear what “consider exploring” section means and was the sequence of links logical and transparent. After Usability Study 2, I confirmed that this is a necessary step in registration / application. In Usability Study 1, users notice a lack of special sections and since the Environ declares itself as the platform helping people who are discriminated in their environment, I needed to insert additional sections like gender orientation and disabilities.
Before Usability Study
After Usability Study 1
After Usability Study 2
CHALLENGE 3 |
Help users with Key Data and Uniformity
It is not necessary for the applicant to be an expert, he can apply, undergo training and apply for a job, but many users wanted to know more about the location, time zone and type of the contract with their potential employer. Another thing found in the second Usability Study is that the difference in button color does not help and only creates incoherence non-uniformity.
Before Usability Study
After Usability Study 1
After Usability Study 2
CHALLENGE 4 |
Clear Terminology
Second Usability Study showed that almost all users are confused with “compensation” and what does it mean. They do not know if they need to pay for the training or it is something else. Therefore, it needed to sound more clear and precise, so I used very direct and unambiguous phrase “Paid to the Applicant”.
Before Usability Study 2
After Usability Study 2
CHALLENGE 5 |
I need a hero!
As can be seen from the image designated Before Usability Study 2 some rough layout of the homepage was established. At the end, it was not possible to incorporate it into the final version since the central alignment does not take into account hero image and negative space necessary for visual balance, harmony and equilibrium.
Before Usability Study 2
After Usability Study 2
Other Mockups
Dedicated App
Website Tablet
Website Desktop
Responsive Design
I optimized the designs to fit specific user needs of each screen size and device. I designed Environ platform in screen sizes for: dedicated app, mobile, tablet and desktop.
Style Guide
Keeping things consistent is easier said than done, especially in large project. With Environ Style Guide I tried to apply Atomic design approach that is based on creating all elements in the first step and then building a products from these blocks. It sounds strickt but actually it is not.
Design System
I created this small Design System just as a basic library of components without detailed and deep explanations and instructions. Nevertheless, it can continue growing and change as the needs of a product changes. When creating design system elements I always take care that they’re usable and collaborative for developers, so they can attach code snippets to separate elements and don’t have to code the same element twice.
Hi -Fi Prototypes
Hi-Fi Dedicated Application Prototype
Hi-Fi Website Prototype
