Design a responsive website for small companies, young entrepreneurs, and small businesses. This is to market their services, gain new clients, and display vacant positions.
The problem:
How can you introduce new companies and contractors to win customers and market their services?
The goal:
The goal of the project is to provide a space for introducing new companies and contracting in the city, to identify them to win customers, and at the same time for job seekers to know them.
My role:
lead UX designer, UX researcher, etc.
Responsibilities:
user research, wireframing, prototyping, etc.
Understanding the user
●User research ●Personas ●Problem statements ●User journey maps
User research: summary
I researched the user problem and tried to include in my research many citizens of all types, ages, and inclinations. However, research revealed that most websites publish companies on a national or sometimes global level, while new and small companies and contractors within the city are marginalized. Other user problems included constraints or challenges that make it difficult to have a website that displays job developments, the latest offers, services, and job opportunities. After identifying most of the pain points, defining, hypothesizing, understanding, and studying the problem statement, I built a hypothesis to solve the problems.
User research: pain points
1 New and small companies and contracting within the city are marginalized.
2 It is difficult to obtain a website that displays the latest developments in the job market, the latest offers, services, and job opportunities.
3 It is difficult to find a site that works smoothly without annoying pop-ups and ads, which cause fatigue and exhaustion.
4 Ease of adding the company and advertising it on the site.
Persona: SARA
Problem statement:
SARA, is an enthusiastic girl who recently graduated from a technical institute and is a volunteer in an association, LAYA is an active volunteer who loves technology and everything technical. She lives with her family, and because of her need for a job in a technology company to hone her skills, she is looking for a website that includes the company within her area to avoid moving to far places.
User Journey Detection planning of the Sara user journey revealed the ease of access for users to a website dedicated to emerging companies and contractors.
Starting the design
●Sitemap ●Paper wireframes ●Digital wireframes ●Low-fidelity prototype ●Usability studies
Paper wireframes
campe23
Paper wireframes
the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research
Paper wireframes
the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research
Digital wireframes
low fidelity prototype connects the basic flow for the user to navigate through pages and access all services, so the prototype can be used to study usability with users.
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
1 He would like to add map buttons in the top margin of each page
2 Users want more customization and options
Refining the design
●Mockups ●High-fidelity prototype ●Accessibility
Early designs allowed for some customization, but after usability studies, I added additional options. I've also revised the design so that users see all the customization options when they first get to the screen.
Sitemap buttons have been added at the top of the screen
Mockups: Original screen size
High-fidelity prototype
The final prototype provided cleaner user flows for searching, booking, and checking out businesses. It also caters to the user's needs in terms of pick-up or delivery options as well as more customization.
Accessibility considerations
1 Accessibility has been provided to users with poor eyesight by adding alt text to images for screen readers and adding audio technology for listening.
2 Icons are used to help facilitate navigation. Easy and universally known codes.
3 Detailed and layer images have been used to help all users better understand the designs.
Thank you for taking the time to review my work on compe 23 if you would like to see more or contact us my contact information is provided below.