Birdian is an app that challenges birdwatchers to "collect" as many bird species as possible by snapping a picture of each one. Use our map to see which species are native to any area of the world, and see what other users are collecting right now. The encyclopedia provides you with all the details you need to identify any bird.
Can you collect every bird?
Planning
All good projects start with a great plan. Being challenged to break an idea down into three main user goals helped to narrow down my broad idea into specific features. I decided that a compelling birdwatching app should challenge users to collect every species as goal 1, and offering a map and encyclopedia to help toward that goal would be the two other features. Then, plotting the decisions and actions the user will have to take to reach their goals on a flowchart helped to identify what kinds of screens and controls are needed to accomplish the user goals.
Sketches
Next up was sketching the app screens. I'm sure now that sketching is crucial—no matter how sure you are of your ideas after brainstorming, you can't know what will work until you start to put them into visuals. I decided to use Adobe Photoshop and sketched with my MacBook's trackpad instead of using pencil and paper, which turned out to be a great boon. It allowed me to copy repeated objects, nudge things around, and import the artboards and layers directly into Adobe Xd.
Prototyping
Prototyping in Adobe Xd has become my favorite part of the process. I love to see the app start to come to life as I add interface elements that look real. Prototyping allowed me to see how things actually fit and look like on screens, and helped me recognize where additions or changes were needed for layout or ease of use. Additionally, creating prototypes makes it easier to share your ideas and get feedback.
Try the desktop prototype here, or the mobile prototype here.
High Fidelity Mockups
Next came adding realistic details to the prototype screens to make them look as close as possible to actual screenshots of a finished app. Adding real content and showed me more areas for improvement and helped the app progress toward a great design. This was also the time for considering user personas and making adjustments to better suit the needs of the target users of the app.
Usability Testing
Conducting various kinds of usability testing was an interesting experience that gave me more insight into how others view the same screens differently from me. It was surprising to see just how differently, though. I realize that designers get too familiar with their designs to recognize how new eyes will see them, so this was an enlightening exercise. I used the information gathered from testers to see where things needed to be more visible, or what features they want.
Final Product
With a slew of user suggestions in hand, I set out to find creative ways of implementing suggestions and correcting visibility without compromising the whole design. To help visitors at the home page recognize that the site is for photographing birds, I added a user photo credit piece with a picture switcher, which would also make the page feel exciting and alive as the pictures would switch automatically while users are viewing the front page. I changed the Collect screen to Collection, where the user's photos would be housed, as users mostly believed it should be there. Collecting a bird is now an action from the Collection screen instead of the primary purpose of it. Quick info on hover how shows on the Map screen, and map navigation controls were added. The much-requested comments section was added to the photo view, and the More Nearby section was changed into a carousel because users easily recognized the Encyclopedia screen's carousel as a tool for browsing pictures, which is more help here. Other than that, controls were made more easily recognizable all around.
Project Summary
The following design patterns and principles were used:
- Tab Menus are used for primary navigation
- List Inlays are used on multiple screens to let the user view some details before opening an item in full view
- Carousels are used on multiple screens for browsing pictures.
- Perceivability was a focus for design, using icons, bold buttons, and other styling to indicate which interface elements are interactable.
- Learnability was also considered, so I used standard interface elements that most users would be familiar with.
I enjoyed working on this project, and I think I grew as a designer from it.
In weeks 1 and 2, I learned how starting and centering your design process around a few major user goals greatly helps keep you focused so you can produce the screens you need faster. Also, keeping focus on usability principles during the design process showed me how to implement them well.
During the remainder of the month, the focus was on getting into the minds of the users and making a design that all of them can enjoy. It was very interesting to go out and gather as much user opinion as I could, try to get into the mindset of a user, and make something that both appeals to them and is very easily usable by them. I've never had to create with such a focus on users before, and I know now just how important it is. My future designs will be much better for this experience.
Thank you for this wonderful challenge!