Embed Size (px)
Citation preview
UX/UI Design Project
Project Topic: chronolog.io
The Problem
The Solution
The Process
A redesigned website focusing on the user’s experience
By: Doug Puccetti
What is chronolog?
● chronolog is a tool that helps tell a story using crowd-sourced images..
● Using a mobile device, time lapse photos are created at each station that uses chronolog.
● Everyday citizens participate to help scientists study images of the environment.
● It’s easy to use and rapidly growing.
UX/UI Design ProjectI was given the wonderful opportunity to help a local startup with their website UX/UI redesign. The current status of their website was not informing, confusing for new users, and had some major flaws within their information architecture.
The Problem
The platform was built without the user in mind -- as though the user already knew about the product.
New Users and Current Clients Struggles:
After speaking with some potential and current customers, I was able to deduce the following rather quickly:
● The website branding was not consistent or non-existent.● Existing customers know that the tool is very powerful, but stated the
website does not convey that well.● Getting the information they needed was a challenge (and this became
more clear once I started doing some of the user testing.)● Finding current stations and viewing the image data in the gallery
application was a challenge and not user friendly● Locating the price of buying new equipment was a hassle and not easy.
Existing Home PageExisting Products Page
Existing Contact Us Page
Existing Materials Page
The Solution
A new, redesigned website focusing on the user’s experience
The Process
User Research
Personas
Site Map
User Flow
Wireframes
Mockups
Prototype
User Testing
Personas
User Testing
User Flow
Wireframes
Mockups
Prototype
My process consisted of the six highlighted areas below:
Personas
Citizen Scientist (User)
Demographic:
● Spends time outdoors● Interested in the
environment
Needs:
● A simple way to upload photos
● Easily view photos from projects they participated in.
Dislikes:
● Cumbersome upload process
Project Manager (Customer)
Demographic:
● Works for a park or environmental center
● Leading a project that requires photo monitoring
Needs:
● A reliable, inexpensive way to monitor their project
● Quality● Educational
Dislikes:
● Product maintenance
Environmental Scientist (Scientist)
Could also be: Educator, Biologist
Demographic:
● Currently working on a project that requires photo monitoring
● Likes to educate the public about the environment
Needs:
● Ability to view and download images● Portal login to view all stations they
are monitoring
Dislikes:
● Product maintenance and poor technology
When first meeting with the stakeholders, we focused on trying to understand our target buyer by creating buyer personas. These personas were based upon current clients and research they have collected in the past.
For the website redesign project, I focused my journey mapping based upon the Project Manager Persona. The stakeholders and I chose this persona because they noticed many project managers are visiting the website to buy their product but end up having more unanswered questions, in-turn resulting in a frustrated phone call to the sales rep.
User Testing
User # 1 2 3 4 5 6 7
Is a current customer? Y N Y Y N N N
Is able to explain the product? Y N Y Y N Y N
Is able to find a specific station? N N Y N N N N
Is able to find the price of a bracket? N N N N N N N
Is able to place an order? Y N Y Y Y N N
Is able to understand what is included with a bracket?
N N N N N N N
Once the personas were built out, the next step was to conduct some user interviews and have current and potential users participate in user testing. Since supplies and time were limited for most users, I focused on providing all the participants with the same six questions about the website.
I called the users using either skype or google meet and they shared their screen. I had them go to chronolog.io and try to answer the questions as I read then aloud.
This was a huge eye opener as I was able to see gaps in their website the stakeholders didn’t know they had.
Site Map and User FlowCreating the Content Sitemap was next. I was able to gather the information from my user tests and provide a better layout for their content.
This included a new navigation schema and better content layout for their website.
After presenting the user testing and content sitemap to the stakeholders, they agreed and decided to work on some new content.
Wireframe SketchesI am an avid believer in “pencil before pixel’
Digital WireframesOnce I was satisfied with the content layout and sketched designs, I moved over to Adobe XD which is my prototyping software of choice.
After working on the wireframes digitally, I noticed some room for improvement and was able to make adjustments accordingly in content layout and page flow.
Mockups/PrototypeAfter a few edits and suggestions from the stakeholders, I began the process on mocking up and prototyping the first iteration of the website (at this point I am still waiting on updated copy from the shareholders and their copywriter).
This mockup included:
● Gallery application integration on the homepage to easily find and view current locations
● Easy to follow ‘Getting Started” guide● Informative Bracket page with details on pricing● Updated contact us page with a form that will integrate directly to HubSpot,
their CRM.
Click here to view and use the live prototype!
Wrapping up and Next Steps
Although chronolog has made some great improvements over the course of this project, there is still plenty more to be done.
Following this case study, the next step is conducting additional user testing with the prototyped design to find out which gaps have been filled, and if any new ones have opened.
I will be working closely with the copywriter to ensure that the copy being added aligns with the goals of every page to give the user just as much information as needed.
If you have any further questions, please don’t hesitate to reach out to me:
Douglas [email protected]
