The Design Sprint effect: A remote icon design project on Pepperfry
Team Introduction and Goals
This is a short story of how a group of six Graphic design learners ( Shreya, Joel, Janhavi, Janaki, Khadija and Navya) came together virtually to work on an Icon Redesign project — the good, the bad and the ugly….the year 2020. This course was mentored by Nikita Kanade, Founder & CEO of Viniage Design.
The team
We started this project by setting some expectations and goals to define our path which helped us understand exactly what we were delving into.
Some were attainable,
- To develop a basic understanding of the functionalities of icons in various public spaces.
- Developing the need to empathize with users and study user behaviours for better outcomes.
- Learning how to get a fair balance between creativity and practicality while creating icons for users.
While some we are beginning to appreciate…
- Time management, peer learning and enjoying the entire process :’)
Choosing the apt Industry & Brand to further the process
Performing an in-depth analysis for the right industry was indeed an open-ended conversation for the whole team. Let alone choosing the right brand. This started off with writing our individual choices of various industries to choose from, progressing to a simple voting process of each member selflessly choosing the option they truly wish to perform their analysis on — leading to the “Furniture” industry being the final call.
The next step in the process was to list the most sought after brands in the furniture industry. We had our eye on brands like IKEA, Godrej Interior, Pepperfry, American Signature, Home Center, The India Circus and Peachtree: leading to Pepperfry as the brand we collectively agreed to work on. What really stood out to our team to proceed with Pepperfry as our final route to take was the already established visual identity that came across as extremely appealing.
- As tempted as we were to choose a brand such as The India Circus because of the extreme level of visual aesthetic in the products that they sell, it did not align with our motive of restructuring existing icons for a particular brand since The India Circus mostly lacked icons and the elements of navigation were primarily type-based.
- Validating Pepperfry on the other hand was due to the fact they had a handful of well-defined iconography present in their digital assets (such as their website and their brand-exclusive application) which had the potential to be assisted with our team’s design inputs.
Study of pre-existing icons, Competitor study and inspirations
Identifying your competitors and evaluating their designs strengths and weaknesses can really help in knowing the positives to inspire from and the negatives to avoid for our own designs. Two of our chosen competitors for analysis: Godrej Interiors and Urban Ladder.
Current icons of Pepperfry app
The current icons of the Pepperfry app seemed pretty cluttery owing to the excessively detailed illustrations in the icons. the two colours Grey and Peach didn’t seem balanced, were not visually appealing and were hence, distracting. On the flip side, the details also helped positively identify the categories as well.
Inspirations for new icons to be re-designed
what we want to incorporate in the new designs:
- Good use of negative space
- Make it minimal (reduce details)
- Modern, interesting & well balanced
- Uniform visual tone by incorporating the colour scheme well
- Would need labels for a clearer understanding of the products
HMW, solutions and Impact & effort
HMW: HOW MIGHT WE?
We analysed the aspects of the pre-existing icon design of Pepperfry, listed out the positives and the negatives of the designs. Selected the negatives we needed to work on based on our priority and created 3 routes for the “HOW MIGHT WE? approach” so as to brainstorm ahead on how might we go ahead and find a solution to the problems.
SOLUTIONS FOR THE APPROACH
As we understood the details of the pre-existing designs that were to be omitted, we also had to propose a few solutions to solve them with a better design input. Changes to be made were: cutting down visual details, switching up the colour palette, better categorization, having a minimal approach in terms of design, make icons bigger, ample breathing space, to name a few.
The Birth of the Design
and the process involved.
It commenced with us taking some notes that revolved around what we had previously done in the form of a short summarization.
Bullet points were made, school reminisced and a timer set. We jotted down all that we have absorbed through Day 1 and 2, this kind of adrenaline rush never felt before!
Furthermore, the sketches were finalized by each member, put up for a vote and the best one was chosen post voting by the decider.
After the finalization of a style, we had to determine 15 icons that all of us were inclined towards, starting from individual suggestions panning out to the majority voted 15 options.
Now we had everything in place, the problem statement, the proposed solution, the grid, the illustration style and our 15 icons.
But did we all agree to the selections made?
Guess not…
Hence we re-examined whatever we had till now.
Designing and Prototyping
We agreed to disagree.
After the icons were selected we went through a process of re-ideating how the style of our icons is going to be. The main aim was to improvise the icons based on the research and study of the brand done in the previous days. How do we make the icons easily legible for the user, reducing the ongoing chaos of the existing illustrative icons on the Pepperfry app. This involved a lot of switching between Illustrator, Figma and back to our Miro board, till we finally got a hang of the new online software.
All opinions taken into consideration, we finalized one style- i.e keeping the icons in a circular mask or using only line icons. (The dot voting came in really handy here.) We finalized the icons that needed to be designed according to the categories.
After using the icons in the mocks, the general insight of the team was to go with the line icons and make them interactive. When one lands on the icons they change into the ones with the circular masks.
During designing, we made alterations in our initial ideas, here and there to find the most appealing one. Once designing all the icons were done in Figma and put in the mockups, it was ready to go for user testing.
Chatting with our Users
and the analysis.
After a lot of hustling, ticking time and voting out options for four days, Our team was finally done with the designing and prototyping of our primary solution for the brand Pepperfry.
But the worth of a design could be only decided by its user. Hence we started the next phase of the process i.e. User testing. A draft was made for the questions that needed to be addressed and the most likely ones were voted through dot placing.
We collectively got a total of 8 users of different ages and varied arenas of interests. The users were ranging from the age of 17–80 each having several similar and few distinct points for feedback.
After this, we gathered all the pointers in one place for full data analysis and generally categorized them into sections. This eased up our process and helped us pinpoint what was to be done forward.
Some highly suggested tweaks were made hither and thither, the process helped us achieve our final out-put with much more clarity and sharpness.
Final Design Out-put:
Find a preview of the interactive icons here: https://youtu.be/HSttE8lwNk0
Closing Thoughts
In spite of having a very convoluted workflow, the overall experience really helped us as a team to work on our collaborative skills and to drill ourselves to produce the best results that we could, in turn helping us be more effective as design aspirants. The whole process allowed us to change our minds and have a completely fresh approach towards design learning by providing an environment that closely emulates the industry workflow. Learning from each other's mistakes and growing collectively as a team was crucial to the whole process. Looking back on how the whole journey unfolded will be of great help in the future. An experience we’re truly grateful for.
The Good:
The course structure was something so different from what we were previously accustomed to, a new way of looking at design was learnt through the nuances of the sprint process. We understood how the industry works and comes into play while taking design-oriented decisions.
Helped us a lot in ‘sprinting’ through the process, which was great since it prevented us from slacking off :D
The Bad:
We missed on actual peer learning through face to face conversations, which would have made the current process even more fun than it was. Though there are perks to remote learning, having positive interactions when together can be never experienced virtually.
Nevertheless, we slid through the tough parts quite easily!
The Ugly:
2020, nothing can truly beat that.
