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

Screenshot of high fidelity Eagle's Nest Account Creation Flow computer prototype. Image is linked to the Adobe XD interactive prototype. Click to view in another browser window.
Screenshot of high fidelity Eagle's Nest Account Creation Flow mobile devices prototype. Image is linked to the Adobe XD interactive prototype. Click to view in another browser window.
Eagle's Nest initial login screen shown on large desktop display in front of a dark teal green wall, with a keyboard and mouse in front on the tabletop.
Eagle's Nest login screen shown on iPhone Prom13 Max
Eagle's Nest Account setup step 2 shown on an iPhone Pro 13 Max
Eagle's Nest Account setup step 4 on an iPhone Pro 13 Max
Eagle's Nest Main screen on iPhone Pro 13 Max

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.

Another 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.


  • 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 unfolded 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.