UX/UI
For my latest project, I decided to create a UX/UI design that would help record an endangered species of bird on both desktop and mobile platforms. To accomplish, I utilized a combination of PowerPoint, Word, and Figma to develop a comprehensive design that would be both visually appealing and user-friendly. The primary goal of this project was to test my skills showcase my ability to create effective and engaging designs that serve a practical purpose.
Project Overview
The Product: Birds of Rhode Island
The Birds of Rhode Island Society wanted to make it so that people could use their website to help locate the endangered Rusty Blackbird and take photos of it.
Project duration:
Nov 2021 to Dec 2021
The problem:
Conservationists want a way to find and locate the Rusty Blackbirds environment for research
The goal:
To make a quick, easy, and safe way to take bird pictures with location that the average person can accomplish.
My role:
UX designer designing the website and phone app.
Responsibilities:
Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on design.
Understanding the User
Summary
Our research was to help create a website with photo taking capacity. We made personas, a survey, and wireframes all to help make the app easy to use. We did come across a few problems born through mostly assumptions.
Pain Points
1
Time
Users want to quickly input the information of the bird so they can continue with their day
2
Accessibility
Users should be able to easily take the picture, locate the bird and input the coordinates of the bird sighting.
3
Input
Users want to have a simple input for the information
Problem Statement
Liza Brook is 28 single worker. Who loves walking and wants to help the wildlife.
User Journey Map
Our goals were to ensure that the Website was easy and could be used by everyone.
Starting the Design
Paper Wireframes
Taking the time to draft iterations ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
Camera app option
Information on the endangered bird and environment
Goals
-
Quick responsiveness
-
Easy to click
-
Easy to read information
Uses the camera app to take photos
Goals
-
Opens to photo mode
-
Easy to navigate
Submission button for next step
Image taken from camera
Goals
-
Clear/clean photo
-
Easy to click
Goals
-
Frame photo
-
Easy to move
-
Easy to accomplish
Frame can be move to locate bird smart software can be use to confirm
Frame can be move to locate bird smart software can be use to confirm
Frame can be move to locate bird smart software can be use to confirm
Goals
-
Quick responsiveness
-
Easy to click
-
Easy to read information
Google map location
Submission button that will send the information to the conservationists
Button for home with thanks
Goals
-
Screen can be seamlessly change to mobile
-
Easy to navigate
-
Easy to read
Low-Fidelity Prototype
We created the first prototype with the goal of an easy quick experience.
Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 Findings
-
User had trouble locating the where to click/tap to activate camera
-
User had problems seeing the camera icon
-
User liked colors of the website
Round 2 Findings
-
User liked how easy it is to see/use camera
-
User had problems with font size between different versions
Refining the Design
Mockups
Make the camera open when the icon is clicked
We really want to focus on displaying the information in an easy format that would allow the user to navigate easily.
Before Usability Study
After Usability Study
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flow for getting to the profile tab
Link to mobile prototype
Accessibility Considerations
1
We considered readability by ensuring font sizes and text placement. We also have had tested.
2
We added the choice to input one’s location and to have a smart device access it for convenance
3
We wanted users to be able to quick and easily be able to take a photo
Going Forward
Impact:
Inconclusion, Website has passed the research phase and will go on to the next stage. However, adding a map feature may be important
What I Learned:
We have learned that you can not always guess where the pain points are/will be and that it is important to be flexible.
Next Steps
1
For the next step, we will test out the photo feature in different lighting and weather to test visibility.
2
For the next step, we will try creating a map of sighting that shows the sightings in red dotes.
3
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.