UX/UI Design Project. Project Topic: chronolog.io. The Problem. The Solution. The Process. A redesigned website focusing on the user s experience

Transcription

1 UX/UI Design Project A redesigned website focusing on the user s experience By: Doug Puccetti Project Topic: chronolog.io The Problem The Solution The Process

2 UX/UI Design Project I 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. 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.

3 The Problem The platform was built without the user in mind -- as though the user already knew about the product.

4 ew 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 Materials Page Existing Home Page Existing Products Page Existing Contact Us Page

5 The Solution A new, redesigned website focusing on the user s experience

6 The Process My process consisted of the six highlighted areas below: User Research Site Map Mockups Personas User Flow Prototype User Testing Wireframes User Testing

7 Personas 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. Citizen Scientist (User) Project Manager (Customer) Environmental Scientist (Scientist) Demographic: Spends time outdoors Interested in the environment Could also be: Educator, Biologist Demographic: eeds: A simple way to upload photos Easily view photos from projects they participated in. Works for a park or environmental center Leading a project that requires photo monitoring eeds: A reliable, inexpensive way to monitor their project Quality Educational Demographic: Currently working on a project that requires photo monitoring Likes to educate the public about the environment eeds: Ability to view and download images Portal login to view all stations they are monitoring Dislikes: Cumbersome upload process Dislikes: Product maintenance Dislikes: Product maintenance and poor technology

8 User Testing 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. User # Is a current customer? Is able to explain the product? Is able to find a specific station? Is able to find the price of a bracket? Is able to place an order? Is able to understand what is included with a bracket?

9 Site Map and User Flow Creating 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.

10 Wireframe Sketches I am an avid believer in pencil before pixel

11 Digital Wireframes Once 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.

12 Mockups/Prototype After 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!

13 Wrapping up and ext 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 Puccetti dougpuccetti@gmail.com