I was tasked with the implementation of a new layout of the website https://fabrykasypialni.pl/ . The old one was very outdated. The new template was acquired but it needed adjusting to the needs of the shop.
Fabryka Sypialni is a shop selling beds, mattress, upholstered panels, and all one could ever want to create their dream bedroom. I worked there as inhouse graphic designer in a tiny department of e-commerce. My tasks were very varied. From Graphic design (like banners for buildings and web, print materials,) through UX/UI and Web design (like redesigning and implementing website design in Shopper and Selly – content management systems specialized in e-commerce) to content creation for Facebook and Instagram pages.
making colors fit company colors
crating consistency with brand identity
creating a gallery of accessible textiles for products that would be scalable and accessible for mobile
banners and tiles, inviting user to visit certain parts of website
consistency in products to make them more browsable (for example, changing all product cover photos, so they have white backgrounds and beds facing the same direction if possible)
contact page with maps, clickable phone numbers etc.
Implementation
I remember being super excited because never before I had the opportunity to use my HTML and CSS skills on a real live commercial project. I enjoyed it very much. Especially moments when one of the sellers would enter the room and get understandably scared, seeing just endless lines of code on my screen. 🙂 That digression aside, I still feel a great deal of gratitude that I was given a chance, especially considering my lack of previous experience.
Even though in Shopper (content management systems specialized in e-commerce and used in fabrykasypialni.pl) I could write my changes directly in the system, by creating a copy of current style I realized not all changes can be done this way and decided to use Atom for writing code. This allowed me to save old versions of code and be able to come back to them if need be.
Results
The results were overwhelmingly positive. I always had a belief that better design will always bring value, but it was amazing to see the numbers skyrocket. Unfortunately, I am not allowed (due to the NDA) to disclose precise information. I can tell you that Fabryka Sypialni had, at the time, five localizations and redesigning the website brought revenue, as if one new location spontaneously appeared.
Failure and small wins
This project proved to stakeholders the importance of a functioning website. This created a push to invest in full scale remodeling of the website. Full scale project however was stopped because of pandemic, with destroyed momentum. In the meantime, the CRM on with website is run had an update that most of my code. This resulted in many problems that I was no longer in access to fix, so I had to accept defeat and hope that the project of a new website will come back and unleash the full potential of that website.
What I have learned
1. This project made me comfortable writing in HTML and CSS. It gave a lot of space to test my theoretical knowledge on a real full scale project.
2. I also love that I had the possibility to see the results the design has on sales.
Page A is a company delivering everything origami for events: from decorations to small workshops in Warsaw area.
As this is quite a small and unique niche, the client requested a logo that could, if the need arises serve well even if focuses of the company shifts: possibly to cosmetics or workshops.
I created two personas: one renting, another renter. I find that documenting personas etc. are super useful when one came back to the project to realize what kind of approaches have already been explored.
An absolute crucial goal for such a design would be to create trust.
Not only to the website, but also between two types of users.
Second thing is to take a lot of possible scenarios into consideration. Users can not only be interested if their potential flat is furnished or not, but some would love to know, right away, if their pets would be accepted, or if a place is suitable, for example, for someone with walking implement.
Ideate stage
Started with some quick sketches on a doted paper. Joust to iterate on as many ideas a needed before starting to create a product.
I decided the part most needing testing were filters. I tested several iterations of “additional filters” panel. A long list of possible filters needed to be grouped and put in the right order for it to be easily scannable and fast to read thou. Too many filters would not only make that difficult, but also make it less likely for users creating a home announcement to use them.
What I found testing filters was:
Icons only seamed to make list more confusing (I was considering adding icon for every section)
Separate clearly in sections
When the choice is either or, it is necessary to make it clear that choice is not mandatory
List of things that would make a great addition to this project:
A handy way to compare between liked options. I would like a table listing features of 2 or 3 liked apartments at the time.
I don’t love the footer. However, I think redesigning it would be great much further in design process, after all major user flows have been complicated.
This fascinating wild cat still hides many secrets and is relatively unknown to science.
The design will improve education and spark interest in this fascinating wild cat species and hopefully help gather funds for amazing conservation projects working to save their wild habitats.
On website, You can learn more about those amazing animals and about field projects and research dedicated to protecting their survival. Join us in the fight to save these creatures.
This project was created as a final project for Google Professional Certificate course. It is my personal case study, and I was only one creating it: from research, design to testing. To generate a project concentrated on social good, I was randomly assigned a prompt: “Design a user experience to help conserve an endangered species of leopard”. I choose to concentrate on clouded Leopards.
Define phase
Clouded Leopards
Clouded leopards (Neofelis nebulosa) take Their name from the large, ‘cloud-like’ markings. Their canines are the longest in relation to their skull size than in any other modern feline species. Amazing tree-climbing abilities are enabled by very long tail, short strong legs and flexible hind joints (with enable them to climb headfirst down from tree trunks). Currently, three subspecies are recognized: -Neofelis nebulosa brachyurus found in Taiwan, China – thought to be extinct in the wild -Neofelis nebulosa macrosceloides found from Nepal to Burma -Neofelis nebulosa nebulosa found from Southern China to eastern Burma There are still many unknowns about their behavior: partially nocturnal lifestyle in a dense canopy makes them hard to observe. Prey consists of macaques, deer, pigs, porcupines, fish and civets.
Identify conservation struggles:
Effective conservation requires sufficient knowledge. It is crucial, as even estimating their numbers is very hard due to partially nocturnal lifestyle in a dense canopy makes them hard to observe.
Habitat loss
The major threat to the clouded leopard, as is for most wildlife, is habitat loss. Forests in the tropical regions of Southeast Asia have been fragmented and decreasing at a rate of 10% per year since 1997. No single protected area is currently big enough to permanently sustain a viable population. There for, it is essential to maintain suitable habitat corridors to connect isolated subpopulations.
Illegal trade and poaching
The clouded leopard is hunted for its teeth, pelt, and for bones. Their parts are sold for the traditional Asian medicine. They have also been illegally sold on the menu of restaurants in Thailand and China which cater to wealthy Asian tourists. Such activities are illegal, but often the law is hard to enforce.
Conflict with local human population
With their habitat rapidly disappearing and decline in prey species, leopards find themselves in search for food closer and closer to human settlements. This makes them vulnerable to being killed as retaliation for killing livestock. It is crucial that humans understand that wild animals are forced to come by deforestation, as humans are the ones capable of stopping it.
Competitive audit
This competitive audit is the least competitive possible: I created a list of organizational working on conservation, and I would love everybody to get to know them too.
Not only I can learn from them, and try to improve current solutions, but later in the project I will link them on my website, so someone interested in helping can have all the relevant information.
https://wwf.panda.org/discover/knowledge_hub/endangered_species/clouded_leopard/ WWF World Wide Fund for Nature is a well known organization. It was founded 1961 and is active in nearly 100 countries. The specific branches are curated to take care of the local environmental struggles and endangered species. This allows them to adjust their operations to local needs.
https://www.hutan.org.my/ Hutan is a team of 80 people from the local community working since 1998 in Kinabatangan, Borneo. Their holistic approach to conservation consists of monitoring of wildlife, law enforcement, reforestation, environmental education, advocating for the forest and better laws.
https://www.borneonaturefoundation.org/research/life-clouded-leopards/ A not-for-profit wildlife and biodiversity conservation and research organization that protects and safeguards tropical rainforests and the environment in Borneo. They plant trees, take part in firefighting and fire prevention, and set up camera traps that allow to monitor forest animals in their natural habitat.
https://www.eocaconservation.org/project-detail.cfm?projectid=2345 European Outdoor Conservation Association, organization dedicated to conservation of non-urban environments and ecosystems. It is funded by different companies and offers grants for a variety of different projects.
Species Survival Plan (SSP) is a program for the Zoo’s around the world to keep closed off population healthy. They collaborate with other zoos in the U.S. and Asia to breed and research the species. Even thou place for a wild animal is never in a cage, this allows to further understanding and kindness and hopefully will eventually benefit also a wild population.
Successful conservation efforts require that habitat destruction and poaching activity is prevented, public awareness is increased, and law implementation is enforced.
Types of efforts: – educating a research – camera traps (for tracking in the wild) – habitat care (planting trees, green corridors, firefighting etc.) – fund razing – law enforcement preventing poaching and illegal farming – supporting sustainable farming and development
Ideate
I decided to generate as many ideas as possible and let my imagination run wild, to answer a question “How can an app help a Clouded Leopard?”. I decided to go with the idea to create a dating app for Leopards. Hear me out! It is obviously not very likely that a clouded leopard would use a dating app. But it gives opportunity to seek in a good deal of information, and let users know much more about those amazing creatures in a style many can be already used to consuming information.
Cat profiles introduce facts about cats (such as: exceptional tale, long teeth, amazing climbing abilities because of rotating ankles) in a fun way. It is also crucial to reference freedom in profiles to remind users that those are wild beasts, and they were not made to be tamed.
Instead of writing to leopard, user will have to play a little game.
I spend a lot of time to figure out what type of simple game can be relevant in this contest. The first idea was “to set up camera in the forest” where u make a photo of leopard they are interested in. (a bit like one would like to find out more about other user in a dating app by getting to know them in writing). But later during creating wireframes I came up with a much better idea. Wild cats have to travel from their territories to territories of other cats and avoid humans, plantations and destroyed parts of forest: perfect setting for a Minesweeper type game (where instead of mine u try to avoid poachers).
Hi-fi design
I chose to use icons in the game because they represent real struggles wild population faces. However, this ran the risk of being confusing to the users. To make easier distinction between save and unsafe I decided to use color: green to indicate a save forest, brown that I use in many places in app to show dangerous human area and red for target and poacher.
This color palette was instantly understandable as it resembles traffic lights. There was only one problem, the shades had to be adjusted, so they will be at least differentiable with colorblindness. That why I decided not to make any gradation and have one green and one red color.
Website
The mobile app will be a game, to spark interest, but it is complimented by a website where the user can broaden their knowledge and learn about conservation projects and how to support them.
The website has to be much more informational. Because an app and website serve different purposes, it is crucial for the website to be responsive: it has to be possible to go from the app to website on your mobile phone.
If You would like to see a case study that i turned in as my graded Assignment from this project, You can find it here:
Next steps
What I would love to add is sound. Clouded leopards make unique noises and I would love to incorporate them in game design. In the game panel You can find “battle sounds” but for now they are permanently off.
Takeaways
This project gave me the opportunity to make first step’s into understanding how to design a mobile game app. It also reinforces in me how important it is to let imagination run wild in a creative process. Sometimes ideas that seem crazy at first are the ones that actually have something interesting to offer. I also learned a lot about leopards. 🙂
I think the impact of the game lies in its viral potential. Endangered species need to harvest more of our attention if we are to solve the crisis of rapidly diapering wilderness.
Florista is an app helping florist run their business. It provides tools that wildly simplify running any business, from small flower shop to big wholesaler venture. The app is easy to use and intuitive.
Connection to database of accessible for restocking flowers
Overview
As a final project of “Google UX Design Specialization -professional course” I was asked to prepare an app design from a random idea generator: https://sharpen.design/
Prompt was: App that lets florists visualize bouquets.
Lucky for me, I happened to have some contacts to local florists, back from the time I was organizing a wedding. During my empathize faze, I discovered how they work, what do they struggle with. I decided to create two personas to reflect two completely defend sides of this business.
However, during this process, the idea for an app proved to be completely not what users needed. Florists did not need help creating bouquets. They are professionals passionate about their craft and often investing a lot of time and resources into perfecting their art and learning from other florists. Their clients tempt to trust them. Furthermore, bouquet is a complex 3d form with we perceive with three senses at once: sight, smell and touch. Florists explained that it is impossible for an app to visualize well and give justice to the final product. There are, however, many problems that those professionals struggle with.
Pain points:
Managing orders. As clients can change mind and ask many questions, it is easy to lose track of things.
Communication with whole sailer.
A thing that struck me was how low-tech this business is. Many of the florists lacked any presence on the internet or had websites extremely out of date. One of the reasons for that seamed to be that tools for good online presence seemed too complicated. There was however some need and will for it, as exemplified by the presence of those sites on Facebook. The tool was already known, therefore known and easier to use.
I decided to add a calendar of organized florist community events, because it might be a nice feature, that would help to kindle community spirit. I also realized I forgot about Error screen, with thou hopefully never seen would help users go through error situation without doubting their technical skills.
It was vital that the app is easy to use and is perceived as easy to understand by the users, especially so because they do not perceive them self as very technologically savvy and as such can be easily discouraged. I grouped similar elements together to make use of Gestalt principles, and make finding functions easier.
A research study was conducted to catch early any mistakes in the prototype before creating a high fidelity prototype. Apart from giving a prototype to some users, I visited some local flower shops and asked for help with this project.
Redesign of product page for company selling furniture. Design needed some tweaks because clients were getting lost.
Mebloo.pl
Mebloo is a shop selling furniture and the second brand of Fabryka Sypialni. I worked there as inhouse graphic designer in a small department of e-commerce. My tasks were very varied. From Graphic design (like banners for buildings and web, print materials,) through UX/UI and Web design (like redesigning and implementing website design in Shoper and Selly – content management systems specialized in e-commerce) to content creator for Facebook and Instagram pages.
The main problem was the button for selecting colors that was not drawing enough attention. Textile selection “wybierz kolor” used to be red with little palette icon constantly moving back and forth, and would take the client to the textile selection popup. This was not only too “noisy” and deconcentrating but also not effective. Users still had problems finding textile selection.
Another way of getting to textile selection popup is to just click on “add to cart”. This solution that makes sure no one adds product without choosing a textile. Clients prefer to be sure they know all the details before making a purchase.
It gave an excuse to rearrange whole product card to give a better hierarchy of information, and more cohesive look (with icons such as “bestseller” and “in the stock”).
A personal project came about from looking for a perfect weather app. There is of course abundance to choose from but they did not spark my trust. I wanted something with charts instead of symbols like the sun or cloud.
Visualizing complex data
On the desktop, I usually go to http://www.meteo.pl/ but the website is not mobile-friendly or nicely designed. I wanted to have faster access to the meteogram I look for most often which is the Warsaw one.
Weather is amazing
Numerical weather prediction is a way to make weather predictions based on mathematical models and constant tracking of current weather conditions. Interdisciplinary Centre for Mathematical and Computational Modelling (ICM) is a supercomputing and research data center at the University of Warsaw in Poland that make their model available online on http://www.meteo.pl/ The only thing lacking in this amazing project was design.
Same brand identity used to create persona to help empathize with user.
A concept for an app that helps You explore Your local cinemas and movies in them.
The design was meant to be both clean, easy to read, with a little pinch of nostalgia for the times when we used to check this information in a printed newspaper.
Local Cinema- app icon
Simple color palette. Beige tones reminiscent of an old newspaper and fresh more poping orange.
Font that is easy to read and brings to mind fonts one could find in typewriters.
Featured movies are highlighted in a delicate, non-distracting way.
Movie poster. To make it more engaging and to let it set the color scheme for the specific movie, the background is a blurred poster.
App design includes:
Clean and non-distracting look. Going to the cinema is a way we relax and spend time with the friends. An app hat helps chose them shouldn’t be distracting.
Basic features: List of films, list of senses, most important information about the film, buy a ticket feature, rating.
Additional features: Map of all local cinemas, ability to search by hour, fresh premieres clearly marked.
mikadnr.com 