Claremont Photo and Video is a photography studio that offers various in-house photo services.
Feb 4 - May 10 2021
Overview
01
Stating the Problem
03
Current State of the Website
02
Getting to Know the Users
04
Defining the User Personas
05
Organizing Website Contents
06
Delivering the Design
07
Testing with Users
08
Updating the Prototype
About
Claremont Photo and Video is a photo lab that offers various in-house custom printing, video and audio tape transfers, photo scanning, photo restorations, passport photos and head shots in Claremont since 2008.
Claremont Photo and Video是一家照相馆，自2008年以来在Claremont提供各种定制打印，视频和录音带转移，照片扫描，照片修复，护照相片和肖像相片。
Task
Due to the current situation, Claremont Photo and Video is considering reaching and providing convenient services for customers lives in Claremont and greater areas. With the current state of the site, it would be best to redesign the website to be more functional and attractive. A new design would incorporate the colors and hand-drawn illustrations to create a stylish and nostalgia feeling.
由于目前的情况，Claremont Photo and Video正在考虑为Claremont和邻近地区的客户生活提供方便的服务。以目前网站的状况，最好是重新设计网站，使其更具功能性和吸引力。 新的设计将结合颜色和手绘插图，创造出一种时尚和怀旧的感觉。
CURRENT STATE OF THE WEBSITE
GETTING TO KNOW THE USERS
The website is designed for the users, so it is important to know who they are, what are their goals, and how they behave. Here are the interview questions and a brief result.
网站是为用户设计的，所以了解他们是谁，他们的目标是什么，以及他们的行为方式很重要。以下是访谈问题和简要结果。
Interview Questions
Do you consider yourself a photographer or a non-photographer?
你认为自己是一名摄影师还是一名非摄影师？
How often do you come to Claremont Photo and Video?
你多长时间来一次Claremont Photo and Video？
What type of service do you need from Claremont Photo and Video?
您需要从Claremont Photo and Video获得什么类型的服务？
Have you used the website of Claremont Photo and Video before?
你以前使用过Claremont Photo and Video的网站吗？
What are the other photo studios/labs you have used before?
您还使用过其他的哪些照相馆？
When choosing among photo studios/labs, what is your top concern?
在选择照相馆时，你最关心的问题是什么？
Interview Results
80%
non-photographer
非摄影家
Passport Photo, Prints, Restoration
Used Services
使用的服务
Rarely/Sometimes
Visting Frequency
来访频率
Costco, CVS, Walmart, etc.
Alternatives
其他选择
40%
Visited the Site Before
曾经访问过该网站
Quality, Price, Distance
Concerns/Criteria
关注的问题/标准
DEFINING THE USRE PERSONAS
Based on the interviews with customers, two types of user persons are proposed for providing design guideline throughout the process.
基于对Claremont Photo and Video客户的访谈，我们提出了两种用户画像，用于在整个过程中提供设计指导。
Primary: Non-Photographer
主要用户画像：非摄影师
Barbara
45 years old
Lives in Upland, CA
She lives with her 3 year-old grand-daughter together. Barbara likes to show the little girl some old photos and store them to remind her of the good old days. The shop she trusts the most is Claremont Photo & Video. Barbara would bring her old photos to the store and ask for restoration a few times each year.
Babara和她3岁的孙女一起生活。Babara喜欢给她的孙女看一些老照片，并把它们储存起来，提醒她过去的美好时光。她最信任的商店是Claremont Photo and Video。Babara每年都会带着她的老照片到店里，要求修复几次。
Secondary: Photographer
次要用户画像：摄影师
Alex
25 years old
Lives in Claremont, CA
Alex likes to spend his time shooting with is digital and analogue cameras. He has a high standard of his work, so he always visit Claremont Photo & Video for high quality scanning and printing. He often comes to scan his recent shoots and prints out his favorites to frame them on the wall.
亚历克斯喜欢用数码相机和胶卷相机来拍摄。他对自己的作品有很高的要求，所以他总是到Claremont Photo and Video进行高质量的扫描和打印。他经常来扫描他最近的拍摄作品，并将他最喜欢的作品打印出来，裱在墙上。
Needs & Goals
需求和目标
Check available services and their pricing
查看先用的服务和它们的价格
Evaluate old photos, whether they can be restored
评估老照片是否可以被恢复
Checking opening hours of the shop
检查商店的开放时间
Needs & Goals
需求和目标
Send photos prior to his visit for digital prints
在他访问Claremont Photo and Video之前发送照片，以便进行打印
Retrieve high quality digital versions of his shoots
需要高质量的胶片扫描
Share his best works on social media
在社交媒体上分享他的最佳作品
ORGANIZING WEBSITE CONTENTS
After gaining an understanding of the users for the website, a structural organization needs to be established before the actual design.
在获得对网站用户的了解后，在实际设计前需要建立一个结构组织。
Site Map
User Flows
DELIVERING THE INTERACTIVE SYSTEM
During this phase, an experienced representation in which how users engage with the website and how the website would respond based on users’ action is presented.
在这个阶段，我提出了这个网站的交互系统，包括线框图、字体、颜色、和用户界面。
Selected Wireframes
1.0 Home
5.2 Prints
1.1 Log In/Sign Up
6.0 My Account
5.2.1 Order Now
5.2.1 Order Now
5.4.1 Reserve Now
5.0 Services
2.0 About Us
5.4 Studio Photography
Visual Identity
Color Palette
Typography
Visual Design
Home Page
About Us Page
Service Pages Template
Second Level Pages Template
Check Out Pages
Prototype
For this project, I only focused on making the prototype of the responsive version of the website. This prototype focuses on several use cases of the website. Feel free to click on the button below to explore the prototype on your own.
对于这个项目，我只专注于制作移动版的网页原型。这个原型侧重于以下几个使用案例。请随意点击下面的按钮，自行探索原型。
Explore available services from the store and reviews from the customers
探索商店的现有服务和客户的评论
Check previous orders and personal information of the account
检查以前的订单和账户的个人信息
Order digital prints
订购印刷品
Submit an evaluation for photo restorations
提交照片修复的评估
Make an appointment for head shots
预约拍摄肖像相片
TESTING WITH USERS
After the design process, the product needs to be tested for inspecting potential problemsand refining for further development. I created a test plan that includes the assumptions and the goals of the study, questions about users’ behaviors, and four tasks for participants to interact with the prototype. Here, I also laid out the results and findings of the testing.
在设计过程之后，产品需要进行测试，以检查潜在的问题，并为进一步的发展进行改进。我创建了一个测试计划，其中包括假设和研究的目标，关于用户行为的问题，以及让参与者与原型互动的四个任务。在这里，我还列出了测试的结果和发现。
Usability Test Plan
可用性测试计划
Goals & Assumptions
目标和假设
User would be able to browse available services and reviews for the store.
用户将能够浏览可用的服务和商店的评论。
User can order digital prints online and pick up at the store when the work is done.
用户可以在网上订购数字印刷品，并在订单完成后到店里取货。
User can submit a consultation for photo restoration.
用户可以提交照片修复的咨询。
User can reserve a time for studio photos and pay the deposit securely online.
用户可以预约拍摄肖像相片的时间，并在网上支付押金。
It is assumed that users are interested in previous works, price lists, and turnaround times for each service.
假设用户对每项服务的以往作品、价格表和周转时间感兴趣。
Eligibility of Participants
参与者的资格
Participants should have used any photo service such as passport photo and digital prints for the past 2 years.
参与者应在过去两年内使用过任何照片服务，如护照照片和数码打印。
Participants should live in Claremont, CA or greater areas.
参与者应居住在加州Claremont或邻近地区。
Pre-study Questions
研究前的问题
How do you decide which photo studio/lab to get your photo services?
你如何决定在哪家照相馆得照片服务？
Was it easy or hard to find out the best photo studio/lab for your need?
找到符合你需要的最佳的照相馆是容易还是困难？
What is your most important criteria for choosing a photo studio/lab?
你选择照相馆的最重要标准是什么？
What is your most frequently used photo service (digital prints, passport photo, restoration, etc.) when you need to go to a photo studio/ lab?
当你需要去照相馆时，你最常使用的照片服务是什么（数码打印、护照照片、修复等）？
Task Scenarios
任务情景
01
You like photography in general and want to check out what are the available photo services/labs nearby and you came across Claremont Photo and Video. Explore the website and find out the available services in the store. Please describe your thought and opinions out loud.
你平时喜欢摄影，想看看附近有哪些可用的照相馆，你遇到了Claremont Photo and Video。探索网站并找出店内的可用服务。请大声描述你的想法和意见。
what do you think the website is and what can it do for you?
你认为该网站是什么，它能为你做什么？
How did you explore the available services?
你是如何探索现有服务的？
You just came back from a travel and want to print one of the best photos you took during your trip. Choose your photos and order a print order on the website. Choose "11 X 14" for the size and "glossy metallic" for the type of printed paper. Please describe your steps and thoughts out loud.
你刚从旅行回来，想打印你在旅途中拍摄的最好的照片之一。选择你的照片并在网站上订购打印订单。尺寸选择 “11 X 14”，打印纸的类型选择 “glossy metallic”。请大声描述你的步骤和想法。
How hard was it to place an order?
下订单有多难？
At any point, were you lost in navigating while completing the task for ordering a print?
在完成订购印刷品的任务时，你是否在任何一个步骤中迷失了方向？
02
You just realized your LinkedIn profile picture was taken more than two years and does not look professional. So, you want to reserve a professional business portrait to get a new profile picture. Select "May 1" and "1:00 PM" for your reservation. Please describe your steps and thoughts out loud.
你刚刚意识到你的LinkedIn个人资料照片是两年多前拍的，看起来并不专业。因此，你想预约一张专业的商业肖像照，以获得新的个人资料照片。选择 “May 1” 和 “1:00 ” 进行预约。请大声描述你的步骤和想法。
How hard was it to make an appointment?
预约有多难？
Do you find the calendar confusing, and why?
你是否觉得日历很混乱，为什么？
03
When you were organizing your home recently and found out an old photo of your mom taken 20 years ago and it was faded and dulled by ages. You would like to know whether this photo can be restored and what would be the price range for it to restore. You want to submit an online consultation for an inquiry. Please describe your steps and thoughts out loud.
当你最近在整理你的家时，发现了一张你妈妈20年前的老照片，它已经被岁月冲淡了，变得暗淡无光。你想知道这张照片是否可以修复，修复的价格范围是多少。你想提交一个在线咨询，进行查询。请大声描述你的步骤和想法。
How hard was it to submit an evaluation?
提交评估有多难？
Is there anything else you would like to add for submitting the evaluation?
对于提交评估，你还有什么要补充的吗？
04
Follow-up Questions
后续问题
Did the website clearly present the information for each service?
网站是否清楚地介绍了每项服务的信息？
Do you find there is enough information to make the decision whether you would go to this photo studio/lab?
你是否觉得有足够的信息来决定你是否会去这家照相馆？
Usability Test Results
可用性测试结果
Task Analysis
任务分析
01
100%
Passed the task
通过任务
00:03:58
Average Time
平均时间
Participants usually just scrolled to explore the website, and all of them knew it was a website for a photo lab
参与者通常只是滚动探索网站，他们都知道那是一个照相馆的网站
02
00:01:10
Passed the Task
通过任务
00:01:10
Average Time
平均时间
75% of the participants thought it was very easy to place the order and 100% of them had no confusion
75%的参与者认为下订单非常容易，100%的参与者没有任何疑问
03
100%
Passed the Task
通过任务
00:01:08
Average Time
平均时间
100% of the participants thought it was very easy to reserve a session and 100% of them had no confusion
100%的参与者认为预约课程非常容易，100%的参与者没有困惑
04
75%
Passed the Task
通过任务
00:00:42
Average Time
平均时间
50% of the participants thought it was very easy to submit an evaluation and 100% thought there is a need for adding details
50%的参与者认为提交评价非常容易，100%的参与者认为有必要添加细节
Follow-Up Feedbacks
后续反馈
100% of the participants found the website clearly presented the information for each service
100%的参与者认为网站清楚地介绍了每项服务的信息
75% of the participants felt there was enough information to make the decision to go to the store
75%的参与者认为有足够的信息来做出去商店的决定
Usability Test Findings
可用性测试结论
Overall, the website is highly usable, and most users would no find it difficult to use. The website had clearly presented the information in an intuitive way. The relatively low average time and high success rate for completing tasks indicated a smooth interaction between website and the users.
总的来说，该网站的可用性很高，大多数用户不会觉得它难以使用。网站以一种直观的方式清楚地展示了信息。完成任务的平均时间相对较短，成功率较高，这表明网站和用户之间的互动很顺利。
Based on the result, it is recommended that there is more information needed to add for submitting evaluation. Participant suggested to provide an estimate time for the evaluation, or an confirmation number for references. Also, I should consider telling the users explicitly where the results would be.
根据这一结果，建议在提交评估时需要添加更多的信息。参与者建议提供评估的估计时间，或提供订单号。另外，我应该考虑明确地告诉用户结果会在哪里。
UPDATING THE PROTOTYPE
One of the biggest advantage of agile design process is making incremental refinements based on feedbacks. Taking the recommendation from the usability testing, I made some edits on the screens for submitting photo evaluations.
敏捷设计过程的最大优势之一是根据反馈意见进行渐进式的改进。根据可用性测试的建议，我对提交照片评价的屏幕进行了一些编辑。
