pininfarina
The 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 .
The Goal:
Create a native app that allows design lovers to gain inspiration, share their designs in an interactive manner and the ability to redesign provided Pininfarina projects.
Role:
UX UI Designer
Time:
2 week design sprint
Deliverables:
Problem Discovery, Problem Definition, Information Architecture, Interaction Design, Visual Design, Prototyping, Native Hi-Fi Mobile App
Target Device:
Mobile (ios or android)
Tools:
Figma
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.
Empathise
stakeholder Interview
15 questions that were broken down into the following categories: The company, the users, the app to be, and the design. The key takeaways were:
Always keep the 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.
they want to raise their visibility and become more fresh and fun so they can attract more people that could ultimately be clients.
Surveys
10 question survey with 31 responses
We used what we had learnt from the stakeholder and applied it to our survey.
survey goal
to understand the users by gaining quantitative data on how and where they get design inspiration.
said having interactivity is important when showcasing an innovative design product.
of users find their inspirational content from social media: 86% use Instagram, 65% use Youtube, 49% use LinkedIn and 43% use Pinterest.
say the purpose of the design content they find is for inspiration.
Interviews
Five 30 minute interviews
We used what we had learnt from the surveys to inform our interview questions to get a more qualitative view on the subject. We asked 13 questions to 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.
Define
value proposition canvas
Following what we learnt from the research 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.
mvp
Create an app where users can get inspiration and share their designs in an interactive manner.
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
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.
ideate
Brainstorming
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.
moscow method
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 and low-fi's
Flow 1
Find a design challenge provided by Pininfarina and accept the challenge
Flow 2
View another designers design project to use as reference by saving it for later
Flow 3
Upload a users own new design that can be redesigned
test & iterate
low-fi Usability Studies
We conducted 5 low-fi usability studies and set tasks for each flow. Prior to starting we gave them a brief about Pininfarina and the app
Flow 2 Tasks
-
Find a design project
-
Save that project
-
Locate where the saved projects would be.
-
How difficult/easy did you find that?
Flow 3 Tasks
-
Select the design type
-
Upload your desired media file from the phone
-
Input the design information
-
Publish the design
-
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.
Flow 1 iterations
Design Challenge Page
-
Change Brief to Challenge
-
Change Challenge options to be its own page - with image
Challenge Page
-
Feedback when a challenge is accepted
Flow 2 iterations
Homepage
-
Design/ redesign on top of the page is confusing, delete
-
Add if its a design/redesign where title is
-
Put profile in the bottom navigation and search at top right
-
Add number of likes next to like icon
Project Design
-
Include a back/close button
-
Remove user profile tag from top right, people mistook it for their profile. Put author under the title.
-
Claps to Save
-
Scrollable list of all of the redesigns of that project at the bottom
Profile
-
200 claps to 200 likes
-
Likes to Saved
Flow 3 iterations
Upload Page
-
Users image gallery, users can select and get feedback on images they selected
Upload Page 2
-
Keeping Images, videos, files icons so they can add extra and use a plus Icon
-
Close to Back
-
Indication of Cover image for first image
Description -
Include the use of TAGS
-
Save as draft option
Flow 1 Tasks
-
Find the design challenge page
-
Select an industry
-
Choose a challenge
-
Accept the challenge
-
How difficult/easy did you find that?
mid-fi
Flow 1
Flow 2
Flow 3
mid-fi Usability Studies
Once we completed the mid-fi wireframes, we conducted another round of testing with 5 new users and asked the same questions as in the low-fi tests.
Compared to our low-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’.
Flow 1 iterations
A-OK!
Flow 2 iterations
Homepage
-
Include a Sort by: Trending / Best / New
Project Page
-
Feedback for when the user accepts a challenge
-
Reword: This project is a Redesign to this project is available for redesign
-
Reword: More Redesigns of this challenge to Redesigns of this challenge
-
Add project tags after the last image
Flow 3 iterations
Upload Page
-
Add saved drafts
-
Rearranging content page - take out icons under images and include plus button that circles back to upload file type
1st High-fi
Flow 1
Flow 2
Flow 3
Flow 1
Tasks
high-fi Concept 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.
Flow 1 iterations
Redesign a PF project
-
Put a better description
Redesign Community
-
Put a better description
-
Change the way the community redesigns are arranged
-
Create dropdown for sort by
PF redesign challenges
-
Create information bio about what the challenges are
Challenge Project page
-
Change process images to boats rather than people
-
Write a caption on why users should see the full project
-
Add number of people who’ve redesigned this project
Build My Challenge Page
Flow 2 iterations
Homepage
-
Change the title on the 1st project card
-
Sort by: Popular / New
Design Project
-
Title - subtitle explaining ‘recreate this computer..’
-
Make pictures consistent with the project
-
Redesigns of this design pictures should have consistent pictures
-
Make all cards across the app consistent (Title, industry, redesign/original, author)
Users Profile
-
Reword Work to My Designs
-
Remove Challenges from profile
-
Remove PF Badge- change to featured designer
Flow 3 iterations
Design Upload Description
-
Change position of the description page to after the upload new/redesign page
-
Include an industry dropdown
Preview
-
Include a preview page for once they input all their information and upload the pictures
The final design
Design System
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.
conclusion
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.
Takeaways
-
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.
