UX/UI Case Study

Sierra Nunnink

snunnink10@gmail.com

Project Overview

mind map and wire flow

For this project I have designed an app that creates, promotes and finds locations of local yard sales. There are many reasons why yard selling and buying second hand is ethical. It is affordable, better for the environment, good for communities and overall better than buying new items if possible.

Buying second hand from places such as a yard sales is fun and affordable. There are many people out there that struggle financially and need places that sell second hand items to survive and live comfortably. The cost of buying new items adds up quickly, and even those who live comfortably realize that costs are too high to buy everything new. Of course second hand materials do not have to be reserved for those who struggle financially. It should be encouraged to everyone to buy used items for many reasons.

Buying from yard sales are better for the environment. Buying second hand reduces your carbon footprint and ensures that no new energy is required to make that product. Yard sales are also great for making a little extra cash and building communities. Future.edu states that, “Strong communities are critical because they're often an important source of social connection and a sense of belonging.” Having strong communities builds a sense of purpose and what better way to do that while simultaneously making a little extra cash and removing the extra items on your property?

Project Research & Usability Testing

The first step in my research was to do some competitive analysis research and see if there are other similar apps that were sucessful with their designs, usability featurs and other tools that may be worth considering adding to my own design. I also took note of things that were not working in some of these apps and made sure to come up with a better design. I knew the design would be an important factor for the success of the app. My app have to look different from the competitors while still having that usability quality that other apps have. I worked hard to create something more accessible and overall a more clean, usable app.

After creating a partial rough draft of my design, I was able to have users test a prototype of the app. While observing the user testing I wanted to see if the design was easy to navigate and made sense to the user. I did not give the user any instruction or task to be completed as there is not a whole lot that can be tested at this stage. I mainly wanted to give the users a chance to explore the app and to see what interests them. The research report concluded that the app design was functional, but could definitely use a few adjustments. In the results I found that the users were most interested in looking at all the different sale locations. Users had a hard time exiting the pin information button and the additional information button for a sale was not obvious to the users. Overall I found the most important aspects of this design and what needs to be improved.

Apps rough draft design

App Design

home buttons design

After receiving feedback on my rough draft, I was ready to create a more polished version of the design for the app. I wanted to make a friendly, fun design as yard selling can be a fun activity. I went with lots of cool blues and greens and a pop of red for colors. The interface itself is made up of lots of round elements to further depict a friendly atmosphere. The fonts are simple, legible and round to connect with the other design elements and fit the theme. After creating a few pages, it was sent off to my peers for critique.

The prototype was met with a lot of positive responses from the critique as well as a few helpful suggestions. Many people thought the design was simple, clean and easy to navigate. I was encouraged to make a few things a bit more clear. A few button locations and the way some of the pages flowed together needed fixing. After making these changes and adding even more pages to the app, it started to really feel like it was coming together.

Tasks For Users

There are many tasks that users can do in the prototype. Many of them have different ways you can access the tasks, so I have made a prototype that connects all the tasks together to create a more authentic experience of completing them. All of the pages, buttons, tabs, etc should all work as if you are actually exploring the app. There are flaws as expected as it is only just a prototype but in the end it came out really well. There are other little things you can click on and explore in this prototype that aren't necessarily tasks, so the testers get to explore around a little bit.

Tasks:

  1. Favorite a yard sale
    • - Click either of the pins shown on the map view
      - Favorite the pin
      - Close the pin
  2. Find yard sale directions
    • - Click on a pin or list view
      - Click on the arrow button
      - (The screen that shows up will ask you redirect you to your phone maps) click no
  3. Send a message
    • - Click on a pin in map view, click list view or click the user of a sale
      - Click message button/icon
  4. Find more information about a yard sale
    • - Click on a pin in map view or click list view
      - Find the plus button
      - Expand the page
  5. Edit profile info.
    • - Click on the profile button at the bottom
      - Click "Edit profile"
      - Change "name", "about", and "location".
      - Hit done
  6. Search for a pin
    • - Click list view
      - Click search icon in top right
favorited pin design edit profile page design

Further Development

At this stage of development I have a prototype of an app design that is a little over halfway completed. I am continuing to make edits of the parts of the design that is finished to polish it up even further. I periodically let users test the prototype to identify bugs & issues with the product and reveal friction points or confusing experiences.

I also intend to finish designing the missing sections of the app. So far there are only the features that help you search for sales and adding the "create" features can really elevate the entire app experience. The "create" feature will allow you to create a posting for a new yard sale event. The step-by-step process of creating one will be very easy and straightforward and users will even be offered to create a free poster design that is available for sharing and printing. The users will be able to share posters to social media as well as public areas. This feature will be great for easy promotion of the users' sales as well as the app itself. Sharing these posters with more information to view in the app could easily lead people to download the app and continue using it in the future.

'create' icon is still a work in progress

Summary

Overall I learned a lot about designing an app and presenting it as a prototype. A lot of the steps for creating a prototype were new to me and I had to teach myself a few things along the way. Looking back I can see how creating a mind map and a wireframe were very helpful steps for creating a meaningful and easily navigable app. Creating the finished design was also a learning process for me because I had never designed an app before. The challenge was building a website on a computer that would look good on a phone, which is easier said then done.

I am most proud of creating an interactive prototype in a new program. For this project I had to teach myself Figma, a collaborative web application for interface design. Learning how to use it was tricky at first, but after watching a few tutorials I was able to use it quite well. Watching your prototype slowly come together was very rewarding.

a bunch of small pages of rough draft and final draft designs