Eagle's Nest
PROJECT: Eagle's Nest account creation flow - responsive site design
ROLE: UX Research / UX Design
DURATION: JAN - FEB 2022
PROJECT BACKGROUND
I was given the task to create a responsive design for an entrepreneurial networking account creation flow. Accessibility is always central to successful UX Design outcomes, so that was considered from the beginning. Foundational research and ideation gave me a basic starting point.
From there, user testing and peer feedback provided me the insight necessary to prevent dropoffs, and make the account creation process delightful.
FOCUS
A) Create an easy account creation flow that will not become a barrier to entry
B) Design responsive interfaces for computer and mobile devices s
C) Incorporate WCAG 2.1 AAA accessibility into the the designs
FOUNDATIONAL RESEARCH
Determine...
How often do artist's need to self-promote to bring attention to their work and upcoming shows?
What is their current user experience around self-promotion?
How useful do users perceive the the ability to share their bio and links via social media?
What can we learn from the steps that users currently take to self-promote?
Are there needed features that we have not yet considered?
RESEARCH GOALS
Assess whether this is a viable solution for artist's self-promotion, and if there are additional preferred features.
METHODOLOGY
Moderated Remote (via Zoom) Usability Study using Figma Lo-Fidelity Prototype
PARTICIPANTS
Participants are all creatives who sell their creative work online. This includes full-time or part-time workers, students, caretakers, and/or parents.
Eight total: Four females, three males, and one non-binary individual between the ages of 18 and 79. One participant is a person with a physical impairment and another has a hearing impairment.
LOW-FIDELITY WIREFRAMING AND DESIGN USABILITY STUDY
Ideation and Wireframing started after UX Foundational Research revealed the features which would be most helpful to creatives: Simplified UX allowing sharing of basic bio with web, gallery, and event links to social media channels.
UX Design Research was conducted with the Wireframes (above)
and the resulting feedback were categorized in an Affinity Diagram (below).
UX Design Research proved that entrepreneurs wanted different ways to enter the site, and an account creation flow with no barriers to entry. The result was added screens and instruction which allowed users to choose, and provided guidance.
View the updated Eagle's Nest Mockups on Adobe XD
DESIGN SYSTEM, HIGH-FIDELITY PROTOTYPING, AND USABILITY TESTING
After completing the UX Design Usability Study with the Low-fidelity (Wireframe) Prototype, the next step was to incorporate all the wireframe improvements, developing a design system, and all changes into a High-fidelity Prototype in preparation for the next round of Usability Testing. Below is a screenshot of the Adobe XD asset library for this project including colors, fonts, and components.
Distinctive background image with a determined eagle in flight created the base for the site branding and logo.
Logo is in the font Playball and assigned #23435F or #FFFFFF depending on the background image / color.
Photo Source: Bald Eagle over Blackwater National Wildlife Refuge by Mathew Schwartz / Unsplash
Eagle's Nest
High Fidelity Prototypes for Computer + Mobile Devices
Silent (no captions) video of the Eagle's Nest Account Creation Flow Hi-Fidelity Mobile Prototype (above)
showing the main user flow plus example of menu navigation.
You can also view and click-through the completed Eagle's Nest responsive designs on Adobe XD, linked to screenshots above.
An additional round of User Testing was done on the High-fidelity Prototype. The overall response was very positive, with all participants easily able to start and complete the main user flow. Peers also had positive comments and were amazed by the detail included in the prototype. Of course, for this project to be ready for development, the rest of the site would need to be fully designed. For that reason, placeholder screens have been set up for the main screen, forum landing, connections, search, and contact screens.
KEY PROJECT TAKE AWAYS
I thought I understood the prompt for an 'entrepreneurial networking account creation flow', but I had to break that down in my mind to fully understand the concept and what would be required to solve the user's problems. Rather than immediately knowing what to do, the project revealed itself over time.
For sure, Interaction Design (iterating based on user research, wireframing, lo-fi / hi-fi prototyping, and usability studies) is a sweet spot for me.
As in the ShareBio App, I found myself wanting to talk to 'other departments' (Developers, Engineers, Marketers, Sales, etc.) to get their feedback and insights. Working alone, you can make some progress, but I sense it would be so much better to be working with a team focused on creating a winning solution.