Bellerfly
(The end result)
The problem: Local news publications are described as the heartbeat of a community. People like to read stories and watch videos so they can be informed citizens who would be better at engaging with their communities. Unfortunately, there has been a decrease in journalists and writers working at local publications.
The business model for local news is suffering due to decreases in ad revenue. In addition, people are no longer satisfied with the limitations of news sites and online media. They want access to storytelling and story sharing, and would like to connect with other people and not be overwhelmed by information overload.
The business opportunity: People are now looking to multiple media sources to fulfill their needs.
The goal: Design an app that lets people consume and tell stories and network. Include features that allows people to filter and curate content.
My role: Lead UX Researcher and designer
User research: pain points
1
User moved to new city
The user needs to find stories from her new city to learn about her surroundings, feel acclimated and network. This pain point guided me as I created story sections, geographic location, and networking capabilities in the design.
2
Information overload
Some users do not like stories to appear in a random manner. To address this pain point, I included “Filter” in my navigation menu.
3
Limited time
Many users do not want to spend a lot of time writing stories. I decided to limit stories in the app to three paragraphs.
4
Need help creating stories
Not everyone is an expert at storytelling. With this in mind, I decided it would be a good idea to add tools, such as a video storyboard, that would help people tell stories.
Personas
User journey map
Persona: Angela
Goal: Learn more about the city she lives in. Write and publish news announcements to inform residents.
Ideation
Users can quickly upload photos from their phone.
Initial designs: For ideation, I used pencil and paper and carried out an exercise similar to crazy eights. I would start off by drawing four ideas for each frame, and then I drew a fifth final paper wireframe for each frame that would serve as the direct predecessor to the digital wireframe. I sought out making my paper wireframes similar as I progressed through the exercise.
I ultimately came up with digital wireframes for Everyone Has A Story, or EHAS, which were previous names for the app prior to when I rebranded it as Bellerfly.
Users can add videos and audio recordings as well as watch videos and listen to audio recordings provided by other users.
Low-fidelity prototype: I added interactions between the wireframes and created a prototype. First time users sign up while other users log in. After signing up, users upload a photo and then are taken to a story they can read. They can also create stories.
Usability study: Remote, moderated, 5 participants, 25 minutes each
Findings
The font size used for the body copy for stories was a little too small and difficult to read for some users.
I needed to iterate the designs of my icons by adding words and effects like shadows so users would know how to get to different resources in my app.
Users found it easy to sign up or log in.
1
Small font size for stories
2
Need for better icons
3
Easy sign up
Refining the solution: Previously, the ability to like a story was on a separate page. To make the app easier to use, I decided to place likes and comments on the stories page. I also increased padding and the font size to make stories easier to read.
To make it easier for a user to understand who wrote a story, I decided to switch the placement of the navigation icon and the profile icon. Because of this, I also switched the placement of the navigation and profile menus to maintain consistency with the icons.
Before usability study
After usability study
Before usability study
After usability study
High-fidelity prototype and rebranding: I added additional frames, designed more mockups and added more interactions to establish a high-fidelity prototype. I then went through two rebranding processes. During the first rebranding, I designed dozens of different versions of a new logo, created different potential brand colors and collaborated with 10 family members to make selections. I then had my logo critiqued by graphic designers and brand strategists who told me the font looked too old and that the logo was "too busy." I then took their feedback and designed new trademarks and established new brand colors. Latest prototype
Accessibility:
1
To ensure people of all abilities could enjoy stories, I decided to included written, audio and video stories. The blue-green box around the images signifies the placement of alt text that can be read using a screen reader or braille device.
2
I used high contrast throughout the high-fidelity prototype to ensure the app would be accessible to people with color vision deficiency.
3
I increased the font size to make body copy easier to read. I also placed icons by navigation words to make navigation easier for users who have a difficult time reading.
The outcome
EHAS transformed into Bellerfly, a tool that allows users to tell stories, consume content and network. Users said they would be eager to connect with their friends on Bellerfly. Others said the interface seems very intuitive.
Too much innovation? Here's what I learned and what I would change: I placed too much importance on innovating when I worked on this project, which could have potentially frustrated some users. For example, the stories pages makes two columns of stories appear side by side. There are both negatives and positives to this format. For positives, if a user is disinterested in a story, the user can quickly look at a story on the same page without making another clicking. As for the negatives, this format may appear too busy and may still feature too small of a font size. Another innovation that I included was a carousel that paired headlines with photos. I've come to realize that building a carousels pose accessibility issues for keyboard and screen reader users. In this case, the product would be more successful in discarding the carousel and the side-by-side stories and placing more accessible individual stories that would appear on a page. Below its comment section could appear another story that a system would select through an algorithm.