briefbox work

About

Briefbox.me is a site filled with practice briefs, resources & skill development for designers. With over 150 practice briefs, designers of all backgrounds can create personal learning paths & work at a reasonable pace. Members have access to free briefs upon sign up, but pro and premium briefs are available depending on the upgrade plan purchased. 

The following projects listed on this page are free briefs in the Web Design and UX/UI Design series. I saw these “mini-projects” as a great opportunity to flex my design skills while keeping mind for the deadline of each brief. For the UX cases, I did more research to help supplement my design decisions.

My overall goal is to improve my design skillset, toolset, and mindset

Weather APP

UI DesigN

Intro

First project I took on was the UI Theme Design for Weather App. I wanted to focus primarily for a mobile interaction design, specifically for the new iPhone X. I sought to improve the UX for a simplified weather app and make it unique.

  • Completion Time: 3 days
  • Overview: This app will be tailored specifically for smartphone devices. Mix illustration with icon design, layout and digital design. 
  • Goals: Must include all of the relevant information for users to quickly and easily check the daily weather forecast. 
  • Tips: Draw inspiration from other weather apps – How do they lay out the information? What kind of icons, colors and patterns do they use to portray certain weather conditions? How can you make your design more legible and more unique? The less clutter the better. Think simple icons, large sans serif typography, large feature elements and numbers such as the temperature, the area and the day of the week.

I first drew inspiration from projects listed on both CollectUI and Briefbox as well as my own weather app. I highlighted user flow and current weather app practices. I wanted to strictly follow the iPhone X UI Guidelines so that the design would fit a new the screen dimensions  (375pt × 812pt @3x).

Researching several articles, I discovered the Best Weather Apps for iPhone and the key elements in the UI. More advanced weather apps have particularly custom features, such as simultaneous traffic and weather alerts and radar imaging.

Dialing it down, weather apps must have the following information.

  • Daily and Hourly information for the temperatures.
  • Options to add, remove, and view locations
  • Options to view more specific details on humidity, precipitation, etc. 
  • I wanted to create a simple list view which would visually separate locations I had.
  • I also focused primarily on the main weather info, where changes in the interface would occur when there are certain weather conditions. 

Wireframes

First Iteration

I got some initial feedback on my design from mentors and other designers alike., who emphasized the importance of creating a unique experience, and creating elements to differentiate my app from other weather apps. More technical advice includes incorporate icons into the location view rather than relying solely on texts, in an effort to bring more visual language into location view. 

I decided to add a couple new features to create a more unique experience

  • A spotlight feature to highlight the user location’s current weather.
  • A selection feature to access to locations’ news and weather information, and possible video input.

New Wireframe

Final Thoughts

I felt pretty good about this design, and I utilized Adobe XD to highlight the sequence transitions between pages and the color scheme to indicate different conditions in these locations. Once I received feedback and added a new feature, I made a more visual approach in the locations view, and emphasized the spotlight feature on each page.

Gmail Redesign

UI Design

Intro

Second project I took on was a Re-design Gmail UI Layout. For this brief, my goal was to exploring creative options to highlight key features of the Gmail UI, without dumbing down the design for a fancier look. 

  • Completion Time: 3 days
  • Overview: Create style guide, begin by thinking out your new design. Are you going to keep all elements in the same place? Are you going to hide certain elements on certain user interactions? Use the main inbox dashboard as your starting point for this brief. Use new typefaces, color palettes, and iconography to start building a sense of an overall style.
  • Tips: Experiment with new layouts for both desktop, smartphones and tablets. 
current Gmail UI

The Briefbox advisors mentioned how Gmail is already a well-designed app, which has a very clean and very simple UI. This design I made was meant to explore my creativity and base it off other areas of inspiration. I thought primarily for a change in layout and color scheme. In my search for inspiration, I realized that my current WordPress admin layout was something I wanted to work with, and I wanted to see how well the Gmail UI would fit like that.

my WordPress Admin Layout
  • Following Material Design Principles, I focused on creating a high contrast between the option windows, and the inbox view.
  • I kept the font the same, as the Arial series maintains a for the overall view.

Wireframe

I received very positive feedback on Briefbox for my design, although I was also given advice to highlight the differences that would set this design apart (for any future changes).

Final Thoughts

I kept asking myself – “How can I improve something that’s already great?” I didn’t change too much of the design, since Gmail is already useful as is. This created a problem for me in my initial research and ideation phase, as I lagged my creative output. However, I’m glad with the final flatter design.

UX Product Card for a Fitbit Alta HR

UX Case

Intro

Third project I took on was the UX Product Card for a Fitbit Alta HR. This was my first design project where I focused maintaining the identity of an established brand and working on a promotional item particular for their newest product. 

  • Completion Time: 1 Day
  • Overview: Fitbit is commissioning a designer to create a ‘Product Card’ for their new Alta HR fitness tracker. The Alta HR allows users to track their movement, calories and heart rate whenever it’s being worn. It can also receive texts, calls and calendar alerts, and will also remind the user to move when they’ve been sedentary for too long. 
  • Goals: The Product Card will be used on the homepage of their website to drive traffic to the product page. It will also be repurposed for various digital advertisements over social media platforms and other influential fitness websites. The design must be bright, modern and up-to-date, in terms of ultra modern UX techniques. The product is the key focal point here, so make sure that the design really enables the product to shine. Remember all of these key features when developing your concept. The design needs to portray health, fitness and wellbeing, but with a nod to modern day lifestyle and convenience. The Alta HR comes in a variety of colours, so you have a fairly extensive colour palette to choose from. The client has asked that you use the typeface ‘Proxima Nova’ or something very similar. The Product Card must include the main product information, such as the price, the colours and sizes it’s available in, and the main features. More details can be hidden within various drop down sections. For further information on the brand and the product, head here.
  • Tips: Modern UI should utilize modern browser and software capabilities. Think vibrant colors, drop shadows, various layers and interesting transitions states. Test your design over multiple devices to see how it looks on your smartphone, laptop or desktop computer. Remember, this design is all about user experience and user satisfaction. The design must be easy and intuitive to use, it must also break down responsibly without feeling like a totally different design. A good practice to follow is to design from ‘mobile up’, then you can ensure all of the main elements are legible and well position on a smart phone before building up through to tablet and desktop layouts, where you can then start to introduce a few more elements and/or transition states. The size of the final design you submit must be 800 x 600px.

This brief’s focus is to embody the brand image, and carry out a new page based on that. I used their current color theme, branding style, and original logo to design my page and drew samples of their old ads listed on their site and on their instagram page.

Wireframes

First Iteration

The main tip I received from other designers were to embody my design in a way that gets consumers in the mindset of “how does this fit into my lifestyle”.  My product card needed to showcase the context of use with the health and fitness lifestyle. 

I decided to introduce an actual image to help aid in the visual context for the product, and pushed all other information for the product on the side for necessary CTA.

Final Thoughts

This design I felt embodied the original product page for Fitbit, which has similar font style and layout. Once I got feedback on improving my design, I catered to using imagery, and reorganization of important elements to highlight it’s context of use.

Wedding Planner Splash Page

UX Case

Intro

My fourth project was Splash Page for Wedding Planner. I focused mainly on the visual design and typographic elements of the page, and I gathered different types of inspiration before the finished layout.

  • Completion Time: 2 Days
  • Overview: ‘Hitched’ is a wedding company based in the South West of England. The company was founded by a husband and wife team who have a strong reputation for creating innovative and exciting events. They provide a range of bespoke services for their clients from unique outdoor venues to independent caters specially selected from the UK.
  • Goals: Create and build a splash page for couples to use as an online invitation for their guests. Design a homepage which should include details of the wedding day such as how to get there, key timings and contact information.
  • Tips: For this design you could choose to go down a photographic or illustrative approach. Start by researching various styles that could be used such as bespoke lettering or illustrative icons. You could also consider going for a typographic approach for the lettering. Remember to keep the key information nice and simple.

I did some background research on wedding splash pages, and focused on how the overall site navigation, aesthetic, and visual designs create certain emotions upon interacting with the website ties in to the UX. Many pages have similar UI elements, and was pretty straightforward. 

I discovered an interesting article from Joomla called the 7 Tips for a Perfect Wedding Website which highlighted the key things to include in a wedding page. Most importantly, I focused on having a personal feel to the design and convenient access to registry and guest information.

Wireframes

First Iteration

I received technical tips on my design to improve the readability for the navigation links and to improve the RSVP typeface to match the look of the rest of the page.

I opted to change the color scheme which had caused these readability problems, and went in another direction for the background photo to allow for deeper contrast between the imagery and UI elements.

Final Thoughts

I enjoyed exploring the different samples for this design. Exploring different wedding pages for inspiration are definitely a treat to discover. Many were well-crafted sites specifically made for couples of all varieties. After I received my first pieces of advice for my initial design, I’m glad I revamped it to a simpler, less cluttered, and more readable version.

Facebook Redesign

UX Case

Intro

My last project that I wanted to dive into was the Facebook Re-design. Although the brief called for a simple redesign, I wanted to treat this as an actual UX experiment and conduct research to back up my design choices.

  • Completion Time: 4 Days
  • Overview: Change the newsfeed page. Develop a new layout that you feel would look good and work well.
  • Goals: Improve overall UX and Identify current pain points in the newsfeed.
  • Tips: Can change things completely, adding new sections, removing widgets you never use, or creating custom icons and illustrations that emphasize particular pages of the page. Prepare by sketching out some wireframes of possible layouts.

Although Facebook has a very wide demographic and large data set, I carried out a survey to generate current views and opinions on Facebook and its newsfeed.

I drew my sample from a mix of friends, family and forums. 13 people had voluntarily submitted their views. I had some were pretty interesting (and funny) results by the end of it.

  • Users noted they use Facebook to view the posts of friends and family, and to keep up with them socially. (Of course).
  • When rating the amount of time spent on Facebook (not Messenger) from a scale from 1 (very rarely) to 10 (very active), 69.2% felt they had a rating of 5 – 8.
  • Users currently enjoy navigating through their personal account settings and interacting with content their friends or family post on the feed.
  • When asked to rate their experience with the newsfeed’s current navigation from 1 (very easy) to 5 (very hard), 61% of users rated a score of 3-4.
  • Users found seeing ads, search capabilities for certain pages/accounts, and viewing notifications and requests to be the most frustrating interactive elements.

I quoted users who shared what they feel would improve the current newsfeed:

  • [to] “Make it chronological and remove all ads”
  • recent first, not “most popular first” “
  • “For gods’ sake just put a chronological and top setting that actually works, don’t scramble it all over the place.”
  • We need much better blocking options, since most of the content in a raw unfiltered newsfeed isn’t desired.”

I ran a card sort to identify the Information Architecture of the current newsfeed based on the actions a user can carry out on the newsfeed. 5 participants volunteered to take part, and the results are shown below

These results validate the current newsfeed hierarchy, but to summarize:

  • viewing notifications, access to profile information and sharing content is the #1 set of actions.
  • The similarity matrix indicates that interaction with ads, and using the facebook chat is the least well-grouped item.

I proceeded to ask users “Why did you sort the items in the way you did?”. Their responses are listed below

  • “I think that they are in that way”
  • “In terms of how I viewed the usage as more passive, active in terms of posting for friends to see and communicate on a 1:1 or small group level”
  • “I tried to group item’s based on how I would interact with them and think about them. For example, anything having to do with managing or posting to my profile, I grouped together”
  • “Because these are the ones I use more frequently and not as frequently, so that would make sense to sort into these groups.”

I pulled up some secondary research about the mechanics behind the newsfeed’s current UX.

Research Summary: Users want to view their newsfeed in a chronological order. They also prefer less ads with improved blocking capabilities and easier navigation overall.

Disclaimer: My design ideas are mainly for the laptop/desktop view for Facebook

Brainstorm

  • To create an entire Newsfeed section instead of dropdown to highlight the “Top Stories” and the “Most Recent” posts, and an edit preferences option
  • To rearrange the main sidebar panel, and redirect link to the accounts profile page.
  • To align the search bar, and separate ads / post UI style for easier filtering. Huge social media businesses run on ads…so I could not edit that out of the system UI.

Wireframe

My mentor had notified me prior to my design to analyze what kind of things you can do to help improve it a little, since Facebook is an already well designed web app, with an established business model. 

I avoided changing too much detail in the UI, and simply wanted to integrate a simpler newsfeed navigation and interaction with ads.

Upon completing my first iteration, I ran a preference test to analyze the effectiveness of my design compared to the current Facebook newsfeed. I drew my sample of users through Reddit (here and here)

Based of the results I received, it was clear that although some users had noted that my design was “tidier”, the current Facebook design is familiar and puts users at ease, with the “Suggested” highlight being a big factor for ad placements.

Final Thoughts

The research phase of my project was the most exciting, since my initial responses to were pretty funny. I don’t use Facebook or view my newsfeed as often anymore other than a communication and greeting tool. My views on the platform have changed over the years and it undoubtedly carries negative effects if one is not aware of their use for it. Facebook is a well designed app, and I wanted to create a seamless integration in my redesign for the newsfeed, and although a couple of users had preferred the current design of the newsfeed, I’m proud of the changes I’ve made to improve its UX.