CREATING WIREFRAMES

The first thing we did for Nifty was review the initial wireframes presented to us, which established a very upper level skeleton of what the app might be. We took these and ran with them, quickly realizing exactly how much more complex apps are than we initially thought. It was fascinating and frustrating in the best way to realize there’s always another screen you didn’t know had to exist. We learned over time how to better map out the app so that we could keep track of screens both known and unknown, designing an experience that could be built upon each time we discovered something new that needed to be incorporated. We worked in short sprints, wire framing out flow after flow and presenting to our CEO for feedback and revisions.


After several iterations, we felt as though we had a complete experience wire framed out. We then used our screens to create an InVision prototype. Soon after, we pulled up the InVision app on our phones and put the prototype in front of our friends to gain as much initial feedback as possible as they navigated through the app on their own.

DESIGNING A LOGO

Designing Nifty’s logo was my first instance with hand lettering, and I had so much fun with it. I wanted the logo to reflect the girly side of Nifty, adding a contained hint of decoration to the rest of the app’s simplistic design. The cursive word is strong and feminine, with a playful and inviting touch. I vectorized a hand sketch of the logo using Illustrator, tweaking and refining it to look legible even when shrunk down to a super tiny size for use in in the app.

APPLYING STYLES TO WIREFRAMES

Nifty is a fashion app targeting young adult women in the Boston area, so we wanted a brand that would reflect our audience. “Simple” was always top of our list for brand identifiers; we wanted a clean, sleek look to the app with a lot of white space to create a straightforward but sophisticated user experience, while still being inviting and friendly. After several rounds of trial and error for our brand color choice, we decided on using dark purple as Nifty’s primary color. This color carries the connotations we were looking for; mature, feminine, powerful (it is a symbol of royalty, after all!) Down the line, we decided to add a pale purple as Nifty’s secondary color, to compliment the dark purple and add small pops of color throughout the app without muddling the UI.

The experience of the rentals page was definitely the most challenging flow to create. There was so much information to organize in a way that the user could navigate without even giving it a second thought. We had to take into account active rentals, future rentals, which stage of the rental process you are in, and a two-way verification to maximize the trust and security of each rental.

Nifty

  • DATE

    Summer 2016

  • CLIENT

    Nifty

  • KIND

    UI/UX, branding

  • ROLE

    Lead Designer

Nifty is a peer-to-peer dress exchange app started by a fellow Northeastern student, aiming to help users make use of the clothes left in the back of their closets. I had the opportunity to join the Nifty team as their lead designer. Collaborating with another designer, we created a complete brand for Nifty, developed thorough wireframes, and applied brand styles in high fidelity mockups.

Designing for Nifty was my first experience in digital design, and I fell in love with the problem-solving aspect of UI/UX. I loved stepping into user’s shoes and piecing together every inch of every screen with intention.

CREATING WIREFRAMES

The first thing we did for Nifty was review the initial wireframes presented to us, which established a very upper level skeleton of what the app might be. We took these and ran with them, quickly realizing exactly how much more complex apps are than we initially thought. It was fascinating and frustrating in the best way to realize there’s always another screen you didn’t know had to exist. We learned over time how to better map out the app so that we could keep track of screens both known and unknown, designing an experience that could be built upon each time we discovered something new that needed to be incorporated. We worked in short sprints, wire framing out flow after flow and presenting to our CEO for feedback and revisions.


After several iterations, we felt as though we had a complete experience wire framed out. We then used our screens to create an InVision prototype. Soon after, we pulled up the InVision app on our phones and put the prototype in front of our friends to gain as much initial feedback as possible as they navigated through the app on their own.

DESIGNING A LOGO

Designing Nifty’s logo was my first instance with hand lettering, and I had so much fun with it. The logo balances with the rest of the app’s simplicity by adding a contained element of illustration. The cursive word is strong and feminine, with a playful touch. The logo is a vectorized version of hand sketched letterforms, tweaked and refined to look legible even when shrunk down to a super tiny size, as it is in the header of the app’s home page.

Designing Nifty’s logo was my first instance with hand lettering, and I had so much fun with it. I wanted the logo to reflect the girly side of Nifty, adding a contained hint of decoration to the rest of the app’s simplistic design. The cursive word is strong and feminine, with a playful and inviting touch. I vectorized a hand sketch of the logo using Illustrator, tweaking and refining it to look legible even when shrunk down to a super tiny size for use in in the app.

APPLYING STYLES TO WIREFRAMES

Nifty is a fashion app targeting young adult women in the Boston area, so we wanted a brand that would reflect our audience. “Simple” was always top of our list for brand identifiers; we wanted a clean, sleek look to the app with a lot of white space to create a straightforward but sophisticated user experience, while still being inviting and friendly. After several rounds of trial and error for our brand color choice, we decided on using dark purple as Nifty’s primary color. This color carries the connotations we were looking for; mature, feminine, powerful (it is a symbol of royalty, after all!) Down the line, we decided to add a pale purple as Nifty’s secondary color, to compliment the dark purple and add small pops of color throughout the app without muddling the UI.

The experience of the rentals page was definitely the most challenging flow to create. There was so much information to organize in a way that the user could navigate without even giving it a second thought. We had to take into account active rentals, future rentals, which stage of the rental process you are in, and a two-way verification to maximize the trust and security of each rental.