Case Study.

TOGATHRE
Scroll
img

BEETY - EDITORIAL DESIGN

UI Designer

Overview: My teammate and I had to design a responsive online platform for a magazine, newspaper, or blog directed to meet the needs and goals of one of the presented User Personas.

Responsibilities: I participated in some the UX Research (user testing...), but I was mostly focused on the UI (wireframes/prototyping).

Tools: Figma, Maze, Coolors, Canva Color Palette Generator

Problem Statement

The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content. With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and dive into it.

User Persona

img

The Solution

Beety is an Art focus online editorial website for creatives. Beety allow for user to real high quality articles as well as engage ​in the Beety community by posting your own blogs or interacting with your favorite artists. Users are also able to directly support their favorite artist through subscriptions.

Concept Sketches

Concept sketches are a crucial part of product building, especial when working in a team. Up until this point I had no idea what faith was for our product design. There was no way for me to know if we were thinking of the same things visually. Sure, we were on the same page on our research but putting that into a design can be challenging if we don’t follow the right steps. That’s why it is crucial for you can your partner to do some sketches to understand each other’s ideas and get on the same page, it in the early stage for designing so there shouldn’t any attachment to an idea which makes it easier to make changes. And you will be making changes especially after testing each phase (low-fi, mid-fi, high-fi).Faith and I drew some sketches and discussed them. we were thinking of the same things. You know what they say, “great minds think alike”.

img

Low-fi

Since we have an understanding of our design, we decided to split the workload. Faith was in charge of the first user flow, and I was in charge of the second user flow. I remember how happy we were of our designs. It was only a low-fi but for the first time we are seen our vision coming together.

img

Visual competitive analysis.

Throughout this whole process faith and I have not had a name for our application. We were using the code name “Falcon”. We were getting into the brand building portion of our product, and we know we cannot keep using Falcon forever. We decided to think of some names while we build our brand.​

imgimg

Sitemap/User Flow

Prior to beginning the redesign process, we needed to understand the function of each page and the different user flows. The creation of a user flow allows us to ensure that we don't miss any opportunities or mistakes.

imgimgimg

Moodboard

After, we build our moodboard. Building this moodboard was a little challenging because we wanted to hit the nail right in the head with this one. Sure enough we did, we built a nice moodboard inspired by our attributes.

img

Before we move on to the final step, we have to make sure our moodboard is reflecting our attribute like we intended. We did a desirability test with 5 people, and this is our results. We highlighted the words that matched ours.

img

Final, we created a color palette out of our moodboard. We wanted something fresh, clean, and modern but also bold and inspiring. We decided to stick to 4 colors.

img

Style Tile

We tried a few different fonts, but we just couldn’t find the right one. Just as we are about to give up and just do a safe bet, Faith tried a font on our name rather then trying to make a logo. It was the perfect logo for our application and now all we had to do is find a font that is compatible with our logo font. Once we did that, we build a style tile.

img

While we are talking about the colors and how we can use them without them been overwhelming, we decided to go over the names we had wrote down so far. And one name immediately clicked we us and we know we had found what we’ve been looking for. One word “Beety”. We tried out a few logos, but nothing was working out for us, so we put it on pause for now.

img

High-Fi

We took the feedback from our tests to refine our high-fi. We applied the branding we created with our user’s input to ensure the best experience while using our product. I’ve waiting for this since we started the project and now, we finally get to bring like to our application. We followed the 60/30/10 rule when applying our colors.

img

This project was a huge learning curve for me and my teammate. It was my first-time applying branding to a project. My teammate was amazing, I learned so much from her. Her thought process and communication were so clear and easy to follow. I am honored to have worked with her. Please check out her work (Faith Dismuke).​This project taught me about what makes and application successful. You can build the greatest application but is the color, branding and what your app is about is not the same or in sync, you have failed your users. Building an app is than just adding pretty colors and fonts. It is about building an identity, and your app have to represent you brand until the final screen and the user exits your app.

Let's connect!

Altidor.wisler@gmail.com
|