While surfing the internet I landed across this web app, which lets users search for nearby experts, according to domain and speciality. The app is decent and pretty usable from the user perspective. My task will be to refine the UX/UI experience for the user without affecting the usability quotient. I will be working on two pages, the first is the search page and another is the expert detail page. In this part, I will be working only on the search page.
My goals and motivation for the redesign:
Want to redesign a lesser know website like this to deliver an intuitive user experience with good visual design.
Enhance my learning experience in the later phases of UX/UI processes and Figma.
About the product?
It's a search Expert/Doctor type website, where users can search for experts based on their domain, specialty, and location. It has other main options like book an expert and chat/video call to an expert.
Let's start with analyzing the current UI (UX/UI Audit):
Other assumptions:
No options to filters and sort the results.
No rating or other criteria to help users to make decisions.
UI is very basic needs polishing.
Based on the above assumptions we know all the areas/points where we require to improve UX/UI.
Moodboard:
Sketching:
The first step to visual design where you draw a rough sketch for the proposed UI design. I have drawn a rough sketch for the revamped design.
Low fidelity Wireframes:
Creating wireframes will help to visualize the designs. You can create wireframes using different tools, I have used Figma for wireframing. These are low fidelity wireframes, After this, you can also create high fidelity wireframes that are very close to final visual designs.
Final Design:
Based on sketch and wireframes these are the final visual designs. Once finalized, the Designer can give these designs to the development team in form of Figma or Invision.
Components:
Maintaining components will help you in the designing process.
Prototype (Figma Link):
After creating the visual designs you can create a prototype for the designed screens. It will give stakeholders and developers an idea about how the end product will look like.
Key learnings:
Mood board will help to set the direction for the visual designs.
Maintaining components will help you to deal with quick changes in the design file, Otherwise, you have to go to every instance to make the changes.
Learned how to prototype static designs and it helps to visualize the final working product.
Next up the will be working on the detail page for the experts, Stay tuned for the next article for expert detail page redesign.
Keep learning and keep exploring 📖
Peace ✌️
Thumbnail by Undraw
Comments