Responsive Web Design
Help improve the visibility of the website in search engine results and attract visitors interested in recycling and environmental sustainability.
Scope
With given time constrains and company information's I worked for 6 weeks on this project to redesign the web and mobile sites.
-
Logo and Style Guide
-
Design System
-
Wireframes and High-Fidelity Mockups
My Role:
UX/UI Design
UX Research
Tools:
Figma
Google Meet
Mase
ChatGPT
Key Techniques
Competitor Analysis
Market Research
Affinity Mapping
User Personas
Storyboarding
Site Mapping
Wireframes
Prototyping
Usability Testing
Problem statement
-
Existing website for Earth Friendly Recycling is outdated and hard to use.
-
Design choices and site color palet selection is irrelevant.
Conducting market research.
By conducting market research and getting an idea what is users ideal recycling company would look like.
Conducting Competitor research
By conducting this research model I was able to identify each company strengths, and weaknesses and fields of improvement.
Conducting User Interviews
After conducting market research, I conducted user interviews with five participants.
Final personas
Sympathizing user's future needs
POV's and HMW's
Feature Set
User flow for scheduling a pickup
Primary flow LOW-FI
Primary flow
Low and Mid-Fidelity
Reiterated Mid-Fi
-Mid fidelity deliverables were reiterated after usability research.
Usability testing results:
The goal for this research is to evaluate effectiveness and accessibility of the redesigned user task flow. This research will give me information on what needs further iteration. The challenges or frustrations during the user testing are also going to be identified during this research.
Usability testing method
Unmoderated user testing
Tools:
Maze/ Lyssna
Task tested:
Scheduling a pickup service
Success metrics:
-
User went through the task with no errors
-
Time spent on the task completion
-
Overall, a positive UX experience
Additional success metrics:
-
Positive feedback on the Redesign company website appearance and color selection
-
Logo Redesign
Test Results:
-
The users were successfully able to complete the task flow. The time to complete the task took in adv.2.5-3 sec.
-
Users were very satisfied with the color pallet choice as it made the site appear a lot more modern and accurate to the company character.
-
Task was easy and quick to go through.
-
The new logo looked a lot more welcoming and positive.
Changes to make
-
Give more letter spacing on the landing page cards.
-
Logo needs just a final touch up.
Primary flow
Final High-fidelity deliverables
Putting everything together, reiterating deliverables.
These are some key screens for re-designed responsive website. Final version for first release.
Recycle
Final product responsive web and mobile
