Photo Archive Website
Project
A website that showcases more than 31,000 preview images of vintage photography. The website allows researchers and general public to search, browse, share the images and more.
Cooperation
EBAF - École biblique et archéologique française de Jérusalem.
My Role
UX & UI research and design, wireframing, testing
The team
Me, Koji Inoue (Web developer specialize in databases)
Current Status
This websites development has gone through UX design, coded prototype testing and UI design. The client holds the option to continue developing the project cycles.
How the site works / Main functionality
Design Process
Based on an agile design methodology. We researched, developed, coded, and tested the coded prototype.
After testing, conclusions from feedbacks were introduced into the new design sprint cycle for further improvements.
01.
Research
Approach and methodology
​
-
​Understand the users and business needs. Define objectives & priorities.
-
Understand the target audience.
-
Market research. Review competing existing websites and understand their strengths and weaknesses.
-
Ideate.
Research conclusions
​​​
The website: Serves as a platform to the public for viewing, sharing, and inquiry of vintage photography. The website hosts all images on a server.
​
The users: Researchers, non-researchers, people who find the site via the internet.
​
Purpose of searching for photos: Research, aesthetic purposes, recreation.​​​​​
02.
Wireframe
-
After the research stage, initial wireframes (using apps such as Figma, Illustrator and Photoshop) are created to illustrate the sites functionality.
-
After having an understanding of the functionality, what works and what doesn't, and having satisfying and agreed conclusions, a new set of requirements are created in both written and visual reference to kick off a sprint for a coded prototype.
-
Coded prototyping. The web developer spends a duration of time to code the prototype to test the websites functionality.
​
Search functionality wireframe mockup - Default page
Search functionality wireframe mockup - Default page with loaded results
03.
Functional Prototype
​​
​Using the Assets: The photos have digital text information, which in this case, in a spreadsheet that can used as query information during search: Title, caption, original file number, type of scan (glass negative or paper photo), dimensions, collection, location, date.
Technical: Photos and it's matching information are linked and queried using SQL and store on the servers database.
Coded with JavaScript, HTML, CSS
04.
Testing & fixes
-
Testing on desktop and mobile (responsive).
-
Conducting user testing and record feedback.
-
Listing the errors, bugs, pain points.
-
Understanding the app limitations, possibilities and what needs improvement.
-
After the satisfying results, the requirements are created in both written and visual reference.
05.
UI Design
-
Understanding the clients aesthetic style amd requirements. Research existing styles.​
-
Ideate.
-
Develop a new style set of text, colors and design layout, buttons, page & element transitions, and more.
Desktop UI Design
.jpg)
Mobile UI Design
.png)
UI design stylesheet
More Layout Examples
Solo focused image page
Photo Collections page
Conclusion
​Lessons learned
-
Research, research, research. So much relies on research and existing facts because subjective intuitions and assumptions about how things should work i.e. features will most likely lead to mistakes and the price to pay for these are expensive in regards to time and money.
-
​Teamwork is a major component. Not everyone will have the same viewpoints and it can be challenging to form unity however necessary.