PopUp Shop Shop

UX/UI

4 Weeks

A UX/UI project for a startup company that connects brands with properties and helps making popup shops easy for both parties in South Africa.

Introduction

PopUp Shop Shop is a project dedicated towards a small startup that makes setting up a popup shop easy. Helping brands connect with properties and taking care of the nitty gritty bits of setting up a popup shop such as paperwork, shop fitting, and networking. Brands would have the opportunity to test out products, markets, and achieve business growth while property owners would be able to connect and fill out their spaces. In general this would also create more business around commercial areas around South Africa and expose new brands/products to the public.

Objectives

Target Audience

The target demographic was defined by the client as those who owned their own businesses that can benefit from having a popup shop as well as property owners in commercial areas that can provide space for businesses to popup. The age range was between 20-50.

Tools Used

Design Plan

Research

  • User personas
  • Survey target audience

UX Design

  • Flow diagrams
  • Sketch/create wireframe screens
  • Show key flow points

Feedback

  • Feedback with client
  • Discuss any changes or additions

UI Design

  • Create style guide
  • Design screens necessary

Evaluate

  • Evaluate final product
  • Test on users for further data and ideation
  • Deliver design

Research

Having already a website for the company, I was able to gain feedback from others in the target audience as well as the client's team about the pain points and general additions they would want. Some points included the website being very bare bones, bland, and didn't instil trust to the user. The previous website also didn't express the culture and personality of the company.

Conducting user research through surveying the target audience, I was able to gather from the data what users were focused on when it comes finding commercial property, listing properties as well as looking up a company such as this one that provides a specific service. A lot of the feedback had to do with being professional and trustworthy so that the user is comfortable when making the decision to use the company's services and keep the website bounce rate as low as possible, keeping the users on the website for longer.

To identify specific users who would use the website, I created a couple different personas with different goals in mind. One is looking to find property in order to popup a shop for her business while the other is looking to list his property for businesses to use.

Design

The UX side of this project was made simple due to the client knowing exactly what he wanted for the website as well as the information that would be displayed. Some of the information and structure was changed by me to make it more seamless and get rid of a few unnecessary elements so that the users are presented with information that is necessary and aren't bothered by anything else.

I continued to sketch out the structure and elements of the website, keeping in mind concepts like Bootstrap and Flexbox to keep it responsive for smaller devices when handing off to the developer at the time. Making the sections have a certain amount of margin between them so the user's eyes can focus on a block of information at a time with structured dropdown menus for the navigation items that relate to the parent item.

The client and I also talked about how to keep the design and structure of the website to be as simple as can be due to South Africa's below average internet speed. So complicating things further or designing it as I would in places like the UK or US would potentially impede the site's performance in South Africa.

After the wireframes were created, I proceeded to design and create the higher fidelity mockups. Bringing the wireframes to life with type and colours along with elements like photos and icons provided by the client.

The client and I talked about how he wanted to make the website a lot more livelier than the previous website they had. Keeping it minimal and structurally simple due to South Africa having below average internet speed. Adding #FFC844 for a creative and fun tone along with the font.

After experimenting with some elements and design choices I created a style guide.

Below is the style guide of choice.

After creating the style guide, I then moved on to creating the hi-fidelity mockups using Figma keeping discussions and feedback with the client as I created the pages. Keeping the structure and design maintain a template or consistent feel was key since the timeline for launching the website was short and we still needed to hand designs off to the contracting developer.

Creating a prototype in Figma, I tested the design on users, taking note of their feedback, positives and negatives. They were given different scenarios to complete, and they were able to complete them with minimal issues or questions.

Below is the finished product mockups.

Evaluation

To evaluate this project I was very nervous since this is my first official client work as a freelancer. But the satisfaction of the client made this process amazing as they were happy with the final product and could show the designs to the developer to build and ready to launch.

There were a couple challenges I faced such as designing the site well along with keeping in mind the internet speed in South Africa. I also did this project on a fast timeline projection whilst balancing a full time job which proved to be a nice challenge for me.

This project gave me great work experience in working with a client and designing an actual product which would be pushed to the public. I developed a good relationship with him during this project and hope to do more work with him in the future.

Let's Chat

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reach me