SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
SelectedWorks
Research Work Cards
What is Berkeley Electronic Press
● Research paper/work publishing platform for
college/university librarians and professors
● They also monopolizes 75% of the law
school paper publishing
Needs
● UI revamp.
● Convert this Aaron Edlin -
SelectedWorks - BePress
to something more user-
friendly and eye-catching.
First things
● Understanding the big
picture by coming up with
a Bepress workflow by
myself.
● Ran through multiple
iterations with the product
manager and VP of
engineering to make sure
it’s on par with business
requirements.
Feature Sets and Wireframing
● After understanding each and every feature
set across the entire product, the product
manager and I embark on an epic marathon
of white-boarding.
● And then it was time for wireframing.
● The one feature that stood out for me was
the “work cards.”
Work Cards
● Remember how the
list of works was
shown?
● Needed a better way
of showing an author’s
work.
● So I came up with the
idea of showing these
individual works as
small summary cards
that could provide a bit
more information.
Wireframes
● After many iterations, I
presented a few options to
the stakeholders in
wireframe form.
High Fidelity
● Putting it together in
Adobe Photoshop
Iterate, Iterate, and
more Iterating
● Understanding that feedbacks often
change after stakeholders see it in
color with actual content, many
iterations of the photoshop mocks.
Finalize
● Photoshop approved, finalized.
● High Resolution Image link
Specifications and
Implementation
● After the finalized mocks, UI
Specification is needed
● This is achieved via Photoshop as
well.
● Once it’s spec’ed out, the team
goes into implementation mode
where I jump in to help as well.
● Responsible for all things layout
and CSS related.
● development site

Contenu connexe

En vedette

Travel inside CH - RP - June 2014
Travel inside CH - RP - June 2014Travel inside CH - RP - June 2014
Travel inside CH - RP - June 2014
Beachcomber Hotels
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23
Niit Care
 
Mantenimiento de computadores
Mantenimiento de computadoresMantenimiento de computadores
Mantenimiento de computadores
leydi-m
 
Presentación próxima edición _ Junio, julio, Agosto
Presentación próxima edición _ Junio, julio, AgostoPresentación próxima edición _ Junio, julio, Agosto
Presentación próxima edición _ Junio, julio, Agosto
La Guía Más Útil
 
High Altitude Research Plane_Jawanza Bassue
High Altitude Research Plane_Jawanza BassueHigh Altitude Research Plane_Jawanza Bassue
High Altitude Research Plane_Jawanza Bassue
Jawanza Bassue
 
Bloc 1714
Bloc 1714Bloc 1714
Bloc 1714
turetes
 
7 สามัญ อังกฤษ
7 สามัญ อังกฤษ7 สามัญ อังกฤษ
7 สามัญ อังกฤษ
0901326521
 

En vedette (20)

Sawyer Lean
Sawyer LeanSawyer Lean
Sawyer Lean
 
01
0101
01
 
Travel inside CH - RP - June 2014
Travel inside CH - RP - June 2014Travel inside CH - RP - June 2014
Travel inside CH - RP - June 2014
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23
 
Mantenimiento de computadores
Mantenimiento de computadoresMantenimiento de computadores
Mantenimiento de computadores
 
La familia
La familiaLa familia
La familia
 
Se vale todo
Se vale todoSe vale todo
Se vale todo
 
CurriculumVitae
CurriculumVitaeCurriculumVitae
CurriculumVitae
 
Ativ1 5 mariajose
Ativ1 5 mariajoseAtiv1 5 mariajose
Ativ1 5 mariajose
 
Ativ1 4 mariajose
Ativ1 4 mariajoseAtiv1 4 mariajose
Ativ1 4 mariajose
 
Presentación próxima edición _ Junio, julio, Agosto
Presentación próxima edición _ Junio, julio, AgostoPresentación próxima edición _ Junio, julio, Agosto
Presentación próxima edición _ Junio, julio, Agosto
 
Portafolio electrónico
Portafolio electrónicoPortafolio electrónico
Portafolio electrónico
 
Ibm connections monitoring with nagios
Ibm connections monitoring with nagiosIbm connections monitoring with nagios
Ibm connections monitoring with nagios
 
Ventas fidelización
Ventas fidelizaciónVentas fidelización
Ventas fidelización
 
The Best Things in Life Are Free – Wie Sie Ihre IBM ConnecEons Umgebung koste...
The Best Things in Life Are Free – Wie Sie Ihre IBM ConnecEons Umgebung koste...The Best Things in Life Are Free – Wie Sie Ihre IBM ConnecEons Umgebung koste...
The Best Things in Life Are Free – Wie Sie Ihre IBM ConnecEons Umgebung koste...
 
Der entspannte Administrator - How to make your life easier by using TDI to a...
Der entspannte Administrator - How to make your life easier by using TDI to a...Der entspannte Administrator - How to make your life easier by using TDI to a...
Der entspannte Administrator - How to make your life easier by using TDI to a...
 
High Altitude Research Plane_Jawanza Bassue
High Altitude Research Plane_Jawanza BassueHigh Altitude Research Plane_Jawanza Bassue
High Altitude Research Plane_Jawanza Bassue
 
03 penyusunan program semester
03 penyusunan program semester03 penyusunan program semester
03 penyusunan program semester
 
Bloc 1714
Bloc 1714Bloc 1714
Bloc 1714
 
7 สามัญ อังกฤษ
7 สามัญ อังกฤษ7 สามัญ อังกฤษ
7 สามัญ อังกฤษ
 

Similaire à Presentation - SelectedWorks

Computers and the workplace
Computers and the workplaceComputers and the workplace
Computers and the workplace
kmodasia
 

Similaire à Presentation - SelectedWorks (20)

Prototyping Workshop - Wireframes, Mockups, Prototypes
Prototyping Workshop - Wireframes, Mockups, PrototypesPrototyping Workshop - Wireframes, Mockups, Prototypes
Prototyping Workshop - Wireframes, Mockups, Prototypes
 
Mural: Build Experiences Not Features
Mural: Build Experiences Not FeaturesMural: Build Experiences Not Features
Mural: Build Experiences Not Features
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
 
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
 
Computers and the workplace
Computers and the workplaceComputers and the workplace
Computers and the workplace
 
Product Management for Startup Founders, CEOs, and CTOs
Product Management for Startup Founders, CEOs, and CTOsProduct Management for Startup Founders, CEOs, and CTOs
Product Management for Startup Founders, CEOs, and CTOs
 
MagNet 2013 - PR1 2013
MagNet 2013 - PR1 2013MagNet 2013 - PR1 2013
MagNet 2013 - PR1 2013
 
My UX Portfolio
My UX PortfolioMy UX Portfolio
My UX Portfolio
 
Week 8 & 10
Week 8 & 10Week 8 & 10
Week 8 & 10
 
Word processing-dtp
Word processing-dtpWord processing-dtp
Word processing-dtp
 
getting agile Final
getting agile Finalgetting agile Final
getting agile Final
 
Prototyping - the what, why and how at the University of Edinburgh
Prototyping - the what, why and how at the University of EdinburghPrototyping - the what, why and how at the University of Edinburgh
Prototyping - the what, why and how at the University of Edinburgh
 
Distance questions & homework year 7 & 8
Distance questions & homework year 7 & 8Distance questions & homework year 7 & 8
Distance questions & homework year 7 & 8
 
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
 
Prototyping for mobile
Prototyping for mobilePrototyping for mobile
Prototyping for mobile
 
"Sitting up and taking notes": Using the iPad for reading and writing
"Sitting up and taking notes": Using the iPad for reading and writing"Sitting up and taking notes": Using the iPad for reading and writing
"Sitting up and taking notes": Using the iPad for reading and writing
 
Dev-Centered UX (UX Week 2014)
Dev-Centered UX (UX Week 2014)Dev-Centered UX (UX Week 2014)
Dev-Centered UX (UX Week 2014)
 
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design Workshop
 

Presentation - SelectedWorks

  • 2. What is Berkeley Electronic Press ● Research paper/work publishing platform for college/university librarians and professors ● They also monopolizes 75% of the law school paper publishing
  • 3. Needs ● UI revamp. ● Convert this Aaron Edlin - SelectedWorks - BePress to something more user- friendly and eye-catching.
  • 4. First things ● Understanding the big picture by coming up with a Bepress workflow by myself. ● Ran through multiple iterations with the product manager and VP of engineering to make sure it’s on par with business requirements.
  • 5. Feature Sets and Wireframing ● After understanding each and every feature set across the entire product, the product manager and I embark on an epic marathon of white-boarding. ● And then it was time for wireframing. ● The one feature that stood out for me was the “work cards.”
  • 6. Work Cards ● Remember how the list of works was shown? ● Needed a better way of showing an author’s work. ● So I came up with the idea of showing these individual works as small summary cards that could provide a bit more information.
  • 7. Wireframes ● After many iterations, I presented a few options to the stakeholders in wireframe form.
  • 8. High Fidelity ● Putting it together in Adobe Photoshop
  • 9. Iterate, Iterate, and more Iterating ● Understanding that feedbacks often change after stakeholders see it in color with actual content, many iterations of the photoshop mocks.
  • 10. Finalize ● Photoshop approved, finalized. ● High Resolution Image link
  • 11. Specifications and Implementation ● After the finalized mocks, UI Specification is needed ● This is achieved via Photoshop as well. ● Once it’s spec’ed out, the team goes into implementation mode where I jump in to help as well. ● Responsible for all things layout and CSS related. ● development site