APP REDESIGN

PROJECT: Redesign Qnary’s mobile app in accordance to the company style guide

DURATION: 2 months

GOALS:

Incorporate company colors and branding into app design
Integrate user feedback to improve user experiences
Correct design inconsistencies present in current version of the app

BRANDING INCORPORATION

One of the aspects of Qnary’s app I wanted to address while working on this redesign was branding. Clients and employees both expressed thoughts that the current version of the app was very generic looking. Unlike other popular apps such as Twitter or Instagram, there wasn’t anything prominent truly indicating that this app was Qnary's app.

In UI Design, I usually have two methods in mind when it comes to integrating branding elements into the design of an interface. One, is color. As you can see from the initial design, there are some elements of the company’s secondary color, blue. You can see it as a bar underneath the several tabs in the design and in the “Connect” button. But that’s the only blue present in the design. Additionally, blue is a VERY common color for social media. Prominent platforms such as Twitter, Tumblr, and Facebook all use a shade of blue throughout their interfaces.

In order to make the app design seem more personalized to Qnary, I created several designs with the company’s primary color, yellow. I did this by adding in some Qnary’s yellow logo and adding yellow to the UI elements currently on the landing screen. Now that I created a few designs that I liked, it’s time for elimination. Typically before I create a 2nd round of designs off the feedback I get from the Product Manager and the Design Team, some designs will be eliminated from the first design batch. Some designs are eliminated by me, and some by the Design Team. You just have to keep creating designs until you find the one best suited for the company. With the feedback I received from the elimination rounds, I created a few more designs that the design team could look at the next week. I tried to play around even further with the variants of logos for the company and yellow design elements.

First round of designs that incorporate company branding features such as color and company logo.

And from here, the design team took a look at the revised designs I offered and held a vote on which design they liked the best.

The finalized design template for the landing page

The design template from the landing page applied to several other screens on the app

IMPROVING THE UX

After settling on the final design that would be used on the app I began to shift my focus to how users interacted with the app as a whole. To get a gauge for how users would interact with the app, I looked at the customer feedback we received from the app and did some research on the app’s audience.

ADDING BADGE ICONS AND HEADERS

Before and After I redesigned elements of the company app. I added a badge icon above “Connect” and a heading for the screen labeled “Approvals”.

Added a header to the main page labeled “Approvals”. Adding headers help clarify to users their current position within the app, making it easier for them to navigate the app when they’re moving between screens.

Added a badge icon to indicate to the user that they have pending invites they need to approve. I decided to add this feature since many users tended to ignore the “Connect” tab since they assumed they had no invites.

REFORMATTING HOW SOCIAL MEDIA IS DISPLAYED

Before and After I redesign the company app. I got rid of the arrow next to the Twitter icon and replaced it with a LinkedIn symbol that was grayed out.

With the “Before” version of the screen came a few issues.

Users couldn’t see all of the social media options at first glance. They’d have to click the arrow next to the Twitter icon to shift through each social media offered one by one.
Many users perceived the arrow next to the Twitter icon as not clickable. Therefore, a large percentage of users only saw the pending invites they received through Twitter and ignored the invites they received through LinkedIn.

From this feedback, it would improve the user’s experiences if they were able to see both social media options offered, Twitter and LinkedIn. However, if I went with this route, I would need a clear way to show users which social media platform they have currently selected. I took inspiration from the blue button that highlights “Connect” on the page. That blue indicates you are currently on the “Connect” page. Therefore, I made it so that which ever social media is selected, the corresponding icon for that platform will be in blue.