Re-design existing online pet shop to enhance better performance of the usability, UX architecture, and aesthetic branding.
Project>
PettingPet Ecommerce Sites – Multiple Sites
Role>
Lead designer who was in charge of the project. I designed all UX architecture works, and UI / branding works. Two designers supported by creating the flash animation and filling out the contents of the secondary pages according to the design layout I have designed.
Client>
PettingPet online pet shop
Team>
Adsfoc design team
Total Duration>
Nov. 2017 ~ Apr. 2018
Objective>
Client asked to re-design their previous online pet shop sites to enhance better performance of the usability, UX and also nicer branding and UI works that fit to their company philosophy and theme. Client’s constraint was to use the main color of orange and express the theme of Tech&Pet for branding. Logo branding was given.
Tools Used>
Sketch, Photoshop, Illustrator, Invision, After Effects
Short period & multi roles>
I led the project as a UX architect and branding / UI designer. I had a tight schedule to finish everything in three weeks for the first site before handing over to the developers.
Why Re-design?>
Older version had obvious weak points to be improved.
- Repetitive contents everywhere: Showing less confidence of the design, too much emphasis on the same contents, repetitive patterns of the pet gallery were all spread
- Lack of user story: Requiring more planned menu order considering emotional user flows.
- Busy/Messy UI: Distracting the user’s attention from the focal point of the website.
- Trust points: Lack of shared user story / prepared interviews.
- Unorganized UX architecture: Requiring more logical/systematic menu hierarchy.
Branding>
Tech&Pet theme, pet sounds friendly, tech sounds futuristic. How can those be harmonious?
Competitor Analysis>
Through analyzing competitor’s unique features and design emphasis, I could learn quickly online pet shop’s trend, each company’s focal point, different formats of pet photo gallery, filtering functions.
User story>
After the short animated company introduction, customer, Mary wants to search her favorite puppies right away. After Mary finds out her favorite puppy, she wants to make sure if PettingPet is a secure service. Also, she reviews what other customers feel about their purchases and stories with their own puppies. Finally, she decides to purchase her selection of the puppies and registers as a pet owner.
User flow>
User can have two ways of the user flow. One is the way from top to down with auto-scrolling, the other is the one from left to right. Mostly, two user flows match together with similar contents.
Color code & pattern>
Grey and beige color gradation fits well to the major color of orange. It represents friendly but also neat and simple tech atmosphere. Geometric pattern also adds neutral tech elements. Wen and Tori helped to re-design the geometric pattern and icons.
Needs to be improved>
Ongoing introduction video usability test between putting it in a separated page and in the same home page. Keep working on responsive design iterations.
Now in use and next>
New PettingPet online shop has been launched even though it is still in iterations. Plan to re-design PettingPet sister website.