ShareBio App

PROJECT: ShareBio App
ROLE: UX Research / UX Design
DURATION: SEP - DEC 2021

PROJECT BACKGROUND

Designing a new Artist’s Bio app that includes the ability to create the bio, link it to websites and galleries, add social media links, and share the completed bio on artist-chosen social media channels.

Before launch, I conducted Foundational and User Research to determine app features, accessibility, and usability. I also conducted User Testing with the high-resolution prototype to understand specific challenges our users might face so we can find solutions to help them fix those challenges.

FOCUS

A) Simplify the app experience for non-tech-savvy and access-challenged users

B) Incorporate WCAG 2.1 accessibility into the the app

C) Design a(n) MVP that may expand in the future, as the product succeeds

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.

User Journey Maps for our personas, Weldon and Adeline.

Story Boards — Big Picture, left; Closeup, right

User Flow Main and secondary user tasks

User flow showing the intended click paths, from opening the app to completing the main and secondary user flow.

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.

Wireframe iteration

Due to my disABILITY, hand-drawing paper wireframes is not an option, so I created these in Powerpoint. Versions A, B, C, D, and E (right, below on mobile) show the home screen iteration process.

Accessibility considered from the start. Best solutions for each combined into one refined version, shown at the bottom.

After laying out the
User Flow, and iterating on key screens, I moved to Figma to create the digital wireframes and prototype (see below).

Screenshot of Low-fidelity wireframes in Figma. See link below to view the wireframe prototype.

UX Design Research was conducted with the Wireframes (above)
and the resulting feedback were categorized in an Affinity Diagram (below).

Screenshot of Affinity Diagram with the main categories: App Feedback, Edit Existing Bio Feedback, Profile access feedback, and struggle with tech.

UX Design Research proved that creatives were looking for simplified UI that was easy to navigate and complete. The feedback about the app, the 'Edit Existing Bio' and Profile features, and incorporated changes to the mockups.

View the updated ShareBio Wireframes on Figma.

Wireframe of the initial app screen.
Wireframe of the Social Media sharing screen with options to choose which channels to share on, a place to add an image link, and a checkbox for making all shares to the same channels.

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.

ShareBio Logo | Pristina font
Blue #0012B5 on white / light OR
White on Blue #0012B5 / dark

ShareBio Logo in Pristina font shown blue on a white background (left) and white on a blue background (right).
Image of the ShareBio color palettes: Primary, Secondary, Grayscale.

Primary Dk Blue #0012B5 | Maroon #B3000 | Charcoal #585656

Images showing button formatting, sample iconography in the primary color blue, and control examples for the clickable checkboxes, social media chicklets, and ADD buttons.

Since this application was designed for use by a wide variety of creatives, it was important that the design be usable and not distract from each creative's own work. The colorful but generic background image was derived from a portion of a photograph, taken 'accidentally' by Nancy Barry-Jansson, and used for the Splash and initial app screens. This is the kind of 'happy accident' that inspires creative play and helped guide the development of design system colors! Other portions of the photo also shown in this page header.

Cropped section, of larger photograph by Nancy Barry-Jansson, that was used as the Splash and Home screen background.
Screenshot of the ShareBio Splash screen that appears while the app is loading the login screen.
Screenshot of the Home screen.
ShareBio Hi-Fidelity Prototype showing connection noodles

Silent (no captions) video of the ShareBio Hi-Fidelity Prototype (below) showing the main user flow plus example of menu navigation.

You can also view and click-through the completed ShareBio Prototype on Figma.

ShareBio_HiFi Prototype User Flow - wide.mp4

Another round of User Testing was done on the High-fidelity Prototype. The overall response was positive, with all participants easily able to start and complete the main user flow. This proved we had a(n) MVP (Minimal Viable Product). One minor suggestion was made to allow users the option in the Profile screen to replace the default Home Screen image with their own creative image.

Before development, this project would benefit from additional UX Research to confirm it will add value in the current market.

KEY PROJECT TAKE AWAYS

While I enjoyed learning the process, the following items became very clear to me:

  • It is so crucial that the project(s) chosen be truly needed in the market and will benefit the company financially. For companies to succeed, profits have to be made. So creating a free app when there are already free apps on the market doesn't make a lot of business sense. This project did not have the budget or time for the required user research to properly make the business case

  • As the sole UX / IX Designer on this project, the lack of input from other team members (Developers, Engineers, Marketing, Sales, Customer Service, etc.) was a noticeable disadvantage. Other team members provide valuable insight that will improve the end-product and the process of getting there.

  • I was astounded by how much I enjoy UX Interaction Design (wireframing / prototyping / design testing). Originally, I thought I'd prefer UX Research. Perhaps working in a team would provide an even better experience.