A Case Study: Pininfarina
Final UXUI project with Ironhack
Challenge: Pininfarina is a globally known 360 design house. They currently have a website but would like us to create an app for Pininfarina of America that is different from what they already have. It should have the ‘wow’ factor so that people would want to download and continually return to it .
User: Design Lovers
Device: Native Mobile App
Team: , and myself.
Role: UX/UI designer
Time: 2 week design sprint
Empathise
Who is Pininfarina?
Pininfarina is a symbol of Italian style in the design world with 93 years of experience, they partner with many an industry including: Architecture, Automotive, Industrial, Nautical, Transportation and Aviation,Lifestyle products and more. They offer high-quality and exquisitely designed services and products based on the values of the brand: purity, elegance and innovation.
Our first order of business was to get a clearer understanding of what Pininfarina of America wanted from us. We kicked this journey off with scheduling a stakeholder interview and doing our research on the company and gathering some ideas to discuss.
Stakeholder Interview
We asked 15 questions that were broken down into the following categories: The company, the users, the app to be, and the design.
Outcomes:
- Always keep Pininfarina’s values: Purity, Elegance, Innovation, and Passion at the heart what whatever we design.
- Pininfarina of America doesn’t design automobiles which is what the company is arguably the most well-known for. They want to showcase how they design beyond automobiles by being a 360 Design House.
- Additionally they want to raise their visibility and become more fresh and fun so they can attract more people that could ultimately be clients.
Surveys
Now we were able to understand what the company wanted to achieve, we applied it to our survey. The survey goal was to understand the users by gaining quantitative data on how and where they get design inspiration.
Survey consisted of 10 questions, of which we received 31 replies.
- 73% said they’d never heard of Pininfarina.
- Of the respondents who had heard of Pininfarina, half said they knew Pininfarina because they designed high-end cars.
- 63% said having interactivity is important when showcasing an innovative design product.
- A whopping 94% of users find their inspirational content from social media: 86% use Instagram, 65% use Youtube, 49% use LinkedIn and 43% use Pinterest.
- 76% said the outcome of the design content they find online is used for personal projects.
- 77% said the purpose of the design content they find is for fun while 66% say the purpose is for inspiration.
Looking at all of this data we are able to understand that these users browse creative content online in their own time for fun and to aid personal projects. So how we could facilitate that and create something unique that users would want to return to? We used what we had learnt from these surveys to inform our interview questions to get a more qualitative view on the subject.
Interviews
We conducted five 30 minute interviews that included 13 questions. We were able to get participants who were all working to some degree in the design industry.
Interview goal: To understand how users engage with design on a digital platform.
Affinity Map
The main themes to emerge from the Affinity map were:
- The importance of telling a story, process or narrative
- To gain inspiration and ultimately wanting to inspire others
- An essential part of engaging with design is interactivity of some kind
Following this we went on to create a Value Proposition Canvas to have a clear understanding of what our users pains and gains are and what the Pininfarina App can do to address those.
Jobs to be done
When I go on the Pininfarina app I want to learn about the process behind innovative designs so I can feel inspired to create, digitally interact and view product designs.
Having the jobs to be done defined we were able to clearly identify our MVP.
MVP
Create an app where users can get inspiration and share their designs in an interactive manner.
Short and simple right? From everything we had gathered in the empathise stage we were in good standing to understand exactly what our users needs, goals, and pain points were. We began to construct our problem and hypothesis statements.
Problem Statement
Design lovers need a way to interactively learn about the processes behind a design so that they can be inspired to innovate their own because they struggle to find resources that will allow them to engage creativity.
Hypothesis Statement
We believe providing an interactive learning experience for design lovers achieves continued engagement. We will know we are right when users incorporate what they learn from our app into their own designs, and they challenge their circle to do the same.
Persona
Let’s put a face to the user! Meet Chris.
He’s a 31 year old Architect that has a passion for all things design. Due to his job in design he finds himself thinking about the functionality and structure behind everyday things like boats, buildings and devices. Moving forward, how can we successfully design an app that satisfies his creative design mind while making it interactive, inspiring, and challenging?
Ideate
Next we were ready to start ideating on what sort of features the app could include and so we began a brainstorming session that started with a round of crazy 8's.
From this ideation we had some ideas, most notably using Augmented Reality to see a finished project. However we knew these ideas couldn’t work because of our time restraint, knowledge and current skill set.
We were shown the Value Complexity Matrix which made us understand that you don’t get to the show stopping idea immediately. Instead you work your way up to it to produce the best product for the company.
We decided to simplify our ideas and ended with a much clearer and realistic product to design. Following this we needed to prioritise all those ideas and so put them in a MoSCoW method to help us categorise what was most to least important.
Site Map
To help us to further categorise our ideas we decided to create a site map to understand the relationship between each idea and how we could present the information to the user.
User flows
Now that we had a clear understanding of how the app could be laid out we began to create our user flows.
User Flow 1
Goal: View another designer’s project to use as reference by saving it for later
User Flow 2
Goal: Find a design challenge provided by Pininfarina and accept the challenge
User Flow 3
Goal: Upload a users own new design that can be redesigned
Low-Fi
Now that we had the solid foundation we began to draw our low-fi’s to understand how it all should appear on paper. We decided to draw the low-fi’s for each user flow.
Flow 1: View another designers design project to use as reference by saving it for later
Flow 2: Find a design challenge provided by Pininfarina and accept the challenge
Flow 3: Upload own new design that can be redesigned
Low-fi Usability Studies
We conducted five 20 minute usability studies, we set tasks to complete for each flow.
Before starting we gave them a brief about the App:
This a design publishing app created by the global design house Pininfarina. On this mobile app design lovers can view and redesign projects posted by other users and also allows users to publish their own work.
While conducting these usabilities we made sure to keep a goal in mind for each of the Flows.
Flow 1
Goal: To successfully save a design project and locate where it’s stored.
Tasks: Find a design project, save that project, and locate where the saved projects would be. Followed by, how difficult/easy did you find that?
Flow 2
Goal: To successfully locate and accept a Pininfarina design challenge.
Tasks: Find the design challenge page, select an industry within Pininfarina redesign challenge, choose a challenge, and accept the challenge. Followed by, how difficult/easy did you find that?
Flow 3
Goal: To successfully upload and publish a new design.
Tasks: Select the design type, upload your desired media file from the phone, input the design information, and publish the design. Followed by, how difficult/easy did you find that?
These multi-task tests directed the first round of iterations which mostly centred around the wording of our content and keeping language consistent throughout the app.
The changes include:
Our mid-fi wireframes came together as we made the iterations and began to build out our design system.
Mid-Fi
Flow 1
Flow 2
Flow 3
Mid-Fi usability tests
Once we completed the mid-fi wireframes, we conducted another round of testing with 5 new users, we asked the same questions as in the low-fi tests. Compared to our lo-fi testing, we saw smoother interactions and received a lot of feedback on desired features. Some of these we were able to implement, and some we saved for ‘next steps’.
Stye Guide
Now that we were at the stage of building out our Hi-Fi we started to put all the design assets onto the style guide and continued to add to it as the days went on. Pininfarina had some very clear branding attributes which helped us to remain focused on how the design should look and feel. They supplied us with fonts, colours, logos, and we drew inspiration from their website. We tried to stay true and consistent with the company’s design values.
Desirability Testing
As we were putting all the aesthetics together we wanted some input from prospective users on the colour combinations within the homepage. With that we decided to do some A/B testing.
For the first part we gave the testers 4 options and asked them which colour cards work best together.
As you can see it was a close call but the white card with 90% opacity was number 1 with 38%.
Following this we wanted help deciding what colour to use for the bottom navigation. We asked the testers to consider the colour of the cards they previously chose and match that with the bottom navigation that looks the best.
With the last round of testing being very close we reflected on the Pininfarina values: Purity, Elegance, Innovation and thought the white card paired with the white navigation is for more in line with Pininfarina’s values and therefore the right option moving forward.
Hi-Fi Concept Testing
Once we were satisfied with our hi-fi prototype, we conducted another round of testing. This time our focus was concept testing, where we walked our users through the prototype and had them explain how they perceived the concept and functionality of each screen. This guided us through our final round of iterations which included minor but important details that would enhance the user experience.
High-Fi
To view the prototype click HERE.
Conclusion
Key Learnings
- Make sure to give a clear explanation of the scope of the project at the beginning of the user interviews, we assumed that the interviewees provided to us by Pininfarina were aware of what we were doing but were mistaken!
- It’s essential to continually refer back to your MVP to ensure your product is consistent with the original goal.
- Don’t get too attached to an idea or keep trying to validate it.
Next Steps
- Include an on boarding screen to allow users to understand exactly how the app works to avoid any confusion from the offset as the app has many moving parts.
- Build out the pages that weren’t included in our 3 flows within this project. Such as: Pininfarina About/Projects/Process, alternative uploading flows, other user profiles, and more.
- Eventually create Augmented Reality for each design project uploaded to really give the app the ‘wow’ factor.
