MY ROLE : UX designer leading plant pro’s responsive web design.
PROJECT DURATION : 3 weeks; January 2024 - February 2024
RESPONSIBILITIES :
Paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.
This project is a responsive web design to complement Plant pro mobile app. The project is built on research and insights gathered in Plant pro app design.
Please go through my Plant pro mobile app design process before having a look at this project.
Problem
Users can use Plant pro on a mobile or website. They need to interact with the product in similar ways regardless of the devices' viewing size.
Goal
1)
2)
Create a responsive web design to compliment Plant pro mobile app.
Create a consistent user experience and visual design across various devices.
STARTING THE DESIGN
Building upon the research done in Plant pro mobile app, I constructed user-focused flows to ensure that my personas can successfully complete their key objectives while reducing the existing pain points. The structure of IA is a combination of Hierarchical and Sequential model. The parent categories such as Diagnose, Plant expert, My plants, Recently diagnosed plants on home page narrows into more detailed info. The step by step process of guiding user through plant details questionnaire follows sequential model.
Website Home Page layout
I have used Z - shape layout for home page. This layout helps users skim information starting from left to right, then move diagonally to the left, before scanning Recently diagnosed plants cards to the right again.
Wireframes
Focusing on goal of creating responsive website with a consistent visual design, I started sketching my paper wireframes.
To make best use of more digital real estate, i scaled elements to ensure a good user experience and aligned my navigation design with user goals. I made use of Grids, Containment and Negative Space to arrange elements in mock-up.
HIGH FIDELITY PROTOTYPE
Home page
Taking advantage of more digital space, I moved main action cards of mobile app home screen such as Plant Expert and My Plants to fixed position menu along with Language selection, Weather, My group and User profile. This fixed position menu gives users easy access from all pages.
Home page
I removed drop down menu for treatment information. Both diagnosis and treatment can be viewed together.
Mouse hovering allows users to preview the video.
Primary task - DIAGNOSE THE ISSUE WITH YOUR PLANT
I have adapted different button states to meet user expectations of web.
Default state - Green buttons with white labels. I made sure buttons are easy to spot and color contrast is compliant with accessibility standards.
Hover state - when a user places a cursor over the button without clicking, there is a slight change in elevation and size of button to indicate it’s interactable.
Disabled state - Button is grayed out to indicate it is not available for interaction.
Task - CONSULT A PLANT EXPERT BECAUSE OF UNSATISFACTORY DIAGNOSIS
Task - 1) CONSULT A PLANT EXPERT FOR DIAGNOSIS OF NEW PLANT
2) ACCESS YOUR PREVIOUSLY SAVED PLANTS
ACCESSIBILITY CONSIDERATIONS
When choosing a color palette, I made sure my primary colors met WCAG AA Compliance before building out the UI for each screen.
Contrast
I am using only one typeface: SF Pro Display. Mixing too many different typefaces can make the app seem fragmented and busy.
Typeface
T
I implemented a text hierarchy throughout the app. This helps users to distinguish the different sections and information on screen.
Hierarchy
TT
I used features such as fixed position menu, search bars and footers to map out regions of interface and provide cues for navigation.
Landmarks
STICKER SHEET
TAKE AWAYS
While designing the responsive web design, i learned that there are a couple of key differences between creating a responsive web design and a mobile app experience. Though there are different screen sizes, we still want customers to have a consistent experience. I needed to take into account the diversity of devices when switching from mobile app to web design. The gestures a user uses when using a website on their laptop and interacting with an app on their mobile is very different. When using an app, majority of the gestures are performed by the user’s fingers (tap, swipe, drag, slide etc.) while in case of web it would be clicking or hovering with cursor.
Although I’ve learnt so much while working on this project, there is still lot to learn more about app design, responsive web design and the best practices.
© 2024 Prachi Thakare. All rights reserved.