Pro-Sales App UIUX Design
Pro-Sales App UIUX Design
Pro-Sales App UIUX Design
-
Project Role: Teaching Assistant (Designer: Linda Hsu)
-
Support Team: Appedu design institute
-
Advisor: Peichi, founder of Tones design,
-
Skills/Tools: Adobe illustrator, photoshop
-
Timeline: Fall 2016
-
Project Role: Teaching Assistant (Designer: Linda Hsu)
-
Support Team: Appedu design institute
-
Advisor: Peichi, founder of Tones design,
-
Skills/Tools: Adobe illustrator, photoshop
-
Timeline: Fall 2016
-
Project Role: Teaching Assistant (Designer: Linda Hsu)
-
Support Team: Appedu design institute
-
Advisor: Peichi, founder of Tones design,
-
Skills/Tools: Adobe illustrator, photoshop
-
Timeline: Fall 2016
Veterinarian Note
#Concept, #Research, #Visuals
Project Initiated by Google UX design Professional Certificate
DURATION
Jun-Aug, 2021 (2.5 months)
PROJECT ROLE
UX Designer and Researcher
SUPPORT TEAM
10 UX Designers
Welcome to Veterinarian Note
Veterinarian Note is an online pet registration flow that enhance veterinarians’ working efficiency. Most of pet-care sites, like River City Veterinary Hospital, Burr Ridge Veterinary Clinic, and Pet Place, focus on Pets or Pets' parents, but the Veterinarian Note's typical user is between 25-75 years old health care workers or early career professionals, like interns. That is to say, the Veterinarian Note’s is designed to make veterinary service completed, fast, and easy for all types of vet-related workers. Thus, the site provide users various functions, like searching, registering, and matching.
Project goal
-
Busy veterinarians of all genders and backgrounds can have a convenient experience on treating their patients from Veterinarian Note.
-
Improved the usability of the app by redesigning the information architecture.
-
Boosted communication and problem handling efficiency for vets and customers' (pets' parents) support by reconstructing the system.
-
Increased the responsiveness of the service by reorganizing and visualizing important treatment history, gene matching, and feedback data at the backend.
-
Built up the visual consistency and temperature by introducing a new style guideline.
Research conducted and the research findings.
According to American Veterinary Medical Association, there are 40 distinct specialties in this field. Thus, we conducted user research and received feedback from users that we incorporated into user personas. For example, our user persona, Ivan, is a 43-year old Cardiology Veterinarian who aspires to have his own system to reduce his loading. The research revealed that Ivan was frustrated by cluttered navigation that made him difficultly find the information he wants. We also learned that Ivan wasted time on re-explaining to patients' parents, and he has often been affected by the correctness of diagnosis since the unfriendly interfaces. Ivan would like to see improvements to the hospital site, like more oversized buttons, simple icons, and minimal design; otherwise, users would select another flexible tools to replace this current system in the hospital.
-
Questionnaire
I begin my research by doing a SWOT analysis of weaknesses, threats, strengths and opportunities.
From there, I carry out a questionnaire with the certificate classmates and received around 60 responses. I also read all the feedbacks and sort those comments into different categories with affinity diagram and create a value proposition to corroborate the frustrations of veterinarians and propose different solutions….
-
Persona
-
User journey
So, what’s the problem?
Currently, the site has a busy design that sometimes feels a bit cluttered, isn’t very engaging, and needs to be improved for a better working experience.
Insights learned
From user research, we learned that there were some pain points for users.
​
-
The design style of the clinic data management system wouldn't attract users to use it.
-
Some unnecessary pages, such as insurance application, are not helpful for users. Sometimes, the button of pages would confuse users to find accurate information, and it also makes users waste much time to search.
-
When preparing a surgery, users commend that they need to spend a lot time on data analysis. Because it would affect users the length of treatment period, they wish to add the auto-matching service in this system.
-
Data dump problems are happened in the system interface.
-
The system is too complicated for older users with farsighted.
Ideation: sketches, Information architecture, and wireframes
Here’s how we put our users’ needs first. The process below begins with our initial idea’s wireframes, then moves to mockups, and finally to the high-fidelity prototype.
Sketch
We sketched out some concepts for our app’s design on what we learned about our users in the empathize stage using the Crazy 8’s approach. We rapidly brainstormed multiple creative solutions based on what we learned from our research to identify various ways to begin designing.
Information architecture
Based on interviews, empathy maps,
personas, user story and journey, we created the information architecture at the initial phases of a project to organised and structure all relevant entities.
Wireframes
In this simple version, you can see how the designer approaches solving the user’s needs. The headings are clearly listed and separated by categories, registering, searching, maching and contacting. There are landmarks listed to show where things such as the donating list will be. There is a place for a carousel which will display pet photos, which gives the user an opportunity to browse for a more enjoyable user experience.
Revised wireframes after low-fidelity prototype usability testing
In the revised version, you see the progression of the design based on insights identified from usability test feedback. Design additions include “+” and “-“ buttons to allow for the ability to edit quantity and a prompt for users to log in to their account if they have one.
Style Guide
-
Colors
Variety and balance are keys to a good product, so color, density, size, shape, and contrasting colors should all be considered. Thus, we decide to use the Orange and the Blue to meet the product design concept. To be more specific, The Orange and The Yellow can show one of the veterinarian personalities- patience, and warmth, and merging the Blue and the Purple can help users convey the importance of high working efficiency.
-
Typography
The typefaces of choice for the app are Museo Sans Rounded, Comfortaa, and Open Sans. I felt these typeface best fit the app do to it's extreme versatility through uppercase and lowercase styling, as well as dark and light text fills
Final Design
Now the design really begins to take shape: actual text is used, colors are applied, and images are added. This mockup shows a visual that gives a better idea of the final design.
​
The design is fully developed and gives a complete picture of the completed design. It addresses the user’s needs for a simple, yet engaging and uncluttered design.
Accessibility considerations
​
To ensure that our app was accessible, we included assistive technologies such as keyboards and screen readers throughout all stages of the design cycle, including interviews and usability testing. We took their needs and feedback and incorporated what we learned into our designs to provide an inclusive and accessible experience for all.
