GIFTON.png

PROJECT SCOPE

Project: UI

Timeline: 2 weeks

Platform: Responsive website

Tools used: Sketch | Invision | Quicktime | Keynote

The Challenge

Gifton is a whimsical and social publishing company whose main goal  is to provide gift inspiration powered by authentic narratives of personal gift-giving experiences. In its initial phase, Gifton relied heavily on word of mouth primarily using personal Facebook group to share content for the future expansion of their website. Building on prior UX work, we were able to develop an updated UX wireframing and a visual interface for their website, all the while being mindful of incorporating authentic, personal, community driven experience.


Exploration

To discover the direction the client wanted, we did our research and compiled a visual competitive analysis.  In our discovery, We found that websites like Refinery29 and Hellogiggles have a contemporary and minimalist approach that has a variety of story types. The organization within the site should focus on the use of white space being highlighted. The key theme should be comprised of crisp, clean, and classy colors that are gender neutral as well. The most attractive colors were white, gray and black, with bright colors being used as accents. Also, the site could be achieved by using cards, and the text should be in the forefront. An example of this would be of Polyvore, using opacity for the image with a bold text box for the text placement. Lastly, the target was authenticity and Personal with a goal of  “gift inspiration, powered by personal narratives.” 

This was my inspiration for both of my moodboard and style tiles that were to be presented during the next exercise. They are:

  • Storified Approach

  • Authenticity | Personal

  • Visual Pattern

  • Color dynamics


Initial Design- MoodBoard

Based on the results of the visual, competitive analysis, I wanted to focus on three key words:

bold

Bold

The act of storytelling needs to be personable, and using a softer shade of blue would achieve this effect. Instead of using traditional iconography, I would play this out using a “rock with drawings” to show theme related icons.

Narrative.png

Narrative

Using bolder colors such as yellow was another way to gage the client's color preference. I thought instead of using minimal colors, I would try another approach that would create an attractive gender neutral website that attracts readers into engaging into the materials.

whimstical

Whimsical

As I indicated during the moodboard exploration, I wanted to evoke a whimsical feel yet focus on the keywords: social, authentic and personable. Using polaroids as my main card deck allowed me to conjure up a sense of nostalgia.. I continued the use of colors that were already part of the logo as a main color in addition of using charcoal gray as minimal feeling in place of using black which would bring stark contrast that I did not want to portray.


Initial Design- Style Title

Bold

I wanted to use strong, bold colors as a neutral color instead of using traditional minimal colors like black and white. I decided to use aqua blue as one of the neutral colors because it provided focus for this theme. . I also wanted to explore how we could use cards in different ways. For instance, the cards are different sizes but work well paired together. The use of the image with white space would be an ideal way of creating a story card.

Narrative.png

Narrative

I designed the card stock to become an interactive piece by making it into a chatterbox. This is an entirely different approach as the client did not indicate this idea during the initial meeting. I wanted to test this model as another focal point for the client to consider. This theme ended up being the winner as we got feedback later.

Whimsical

The act of playfully quaint or fanciful, especially in an appealing and amusing way, would share the feeling of sentimental story sharing. Using soft colors yet focusing on the Polaroids that we now view as a vintage use of photography would achieve this effect.

Client Feedback:

In the outcome of the meeting, the client felt more drawn to the narrative theme because of the “chatbox” cardstock that made the website feel more personable. She felt it was most relatable and reflected in the vision that she wanted for the website. Because she wanted the site to feel friendly and approachable, the grays used in all proposals felt a bit heavy and cold, yet the usage of red for one of the proposed style tile boards was too soft for the client. The use of other colors besides white and black should be carefully designed not to include any yellow and orange. Lastly, fonts were to be more modern and should away from feeling too comic-like. I adjusted the design by adding a 4th style font to make a separation in the card stock from the rest of the site topography.


Final Design

UPDATED VISUAL ELEMENTS

After gathering feedback I continued to re-examine the final UI style kit that would represent the ideal look for the client. I continued with several important features:

COLOR

Continuing with the white and charcoal gray as the main colors, I added both blues from the logo and adjusted the red to be more coral which was a stronger look as a link only option. White space is very crucial in this stage during the visual prototype.

Continuing with the white and charcoal gray as the main colors, I added both blues from the logo and adjusted the red to be more coral which was a stronger look as a link only option. White space is very crucial in this stage during the visual prototype.

CARDSTOCK

I focused on the chat bubble that was overwhelmly popular by making it more interactive as seen here. Also, using a white overlay on top of the image allowed users to hover over the image and decide if they want to continue reading the story once clicking on “read more.”

I focused on the chat bubble that was overwhelmly popular by making it more interactive as seen here. Also, using a white overlay on top of the image allowed users to hover over the image and decide if they want to continue reading the story once clicking on “read more.”

TYPOGRAPHY

As I indicated during the feedback, adding another font distinguished the card stock from the rest of the typography on the site. I replaced the sans serif body copy with a serif typeface. The serif type is popular on many current media sites, as well as classic newspapers. This font will make the site more engaging and warmer which is essential for the storytelling inspiration.

As I indicated during the feedback, adding another font distinguished the card stock from the rest of the typography on the site. I replaced the sans serif body copy with a serif typeface. The serif type is popular on many current media sites, as well as classic newspapers. This font will make the site more engaging and warmer which is essential for the storytelling inspiration.

 

 

Client Feedback

For the client, this direction was a positive one that they wanted to continue. The cardstock idea being interactive was the focal point of the discussion, and the client wanted to make sure that the site would function appropriately as a response page (mobile view).  The landing page continued to be a work in progress, as they felt that the card stock initially was too large for the page. In addition, having two cardstock per row needed to be increased to three per row for a total of three rows. The header slideshow, which was a combination of themes and feature story, was too large for above the fold. Instead, I created a separation between feature stories and the “theme of the week” slideshow. The client felt that  both the navigation and footer bars were successful in using minimal colors,

“I feel comfortable looking at it, all good things!”

As for the additional pages, such as gift card theme and Profile page, they responded positively,  commenting that it felt inviting, like the  30 second mom webpage, but this page was simplified for the readers.

Conclusion

In this design challenge, I wanted my proposal to be designed differently from my teammates.  One of the challenges that I found was that the client liked everything I proposed, which we know that doesn’t happen in real world of design. In order to discern which designs she liked best, I presented her with various layouts, and gauged her reactions in her facial expressions and body language. she responded well to the chat box method the best, but it was a bit tricky balancing that feature with the white space, which gave off  the minimal vibes that she wanted to portray.  

Use of colors and typography was another challenge, as gender neutral is main theme for many companies and web designers face. How do we attract the users to continue looking at the page for more than one minute so we can best sell them the product that they are looking for? In this case, selling the personal narratives to inspire gift-giving experience was the angle that was most effective. My solution was to use a combination of serif and san serif fonts to spice it up, each having its own distinct purpose. The serif font was for storytelling reflecting back to old style news reporting, and the san serif reflected the modern side in all of us. Didot and Raleway especially reflect strong modern elements. The color choices were solid in the feedback given to me from the client, but looking back, I wish I had the opportunity to use the white and charcoal gray more than using the blue in the header and boxes, as I felt that blue was strongly becoming a dominate color for the visual design which I felt white and charcoal gray would be more neutral.

As a member of a team that preferred to work independently, my role was to coordinate all of the members from the initial stages of setup to organization at the end. I also organized the notes and served as the contact person for the client once we concluded with  meetings.  I found the social and organizational aspects of the team coordination  to be another strength of mine, and I continued to build on that as the project progressed.  

Lastly, with the time constraint of 2 weeks on this project, I wish I had more time to explore responsive layout, especially in the iPad size. It could have made a difference in how I envisioned the project in the end. Another significant issue that I wanted to address was testing on the users to find errors. In future projects, I will incorporate more user feedback because it provides important insights during the design process.