Sticker supply shop
ui/ux case study - End to end app design
background
Kalvin, owner of SPFY (Screen Printing For You) also owns Sticker Supply Shop and is wanting to separate the two businesses to alleviate stress and backed up orders.
Before Sticker Supply Shop was conceived, SPFY was fulfilling all the sticker orders since it was a custom product they offer. But with the growing amount of orders for screen printed garments and not being able to track of a garment order from a sticker order, Kalvin decided he’d like a separate the two products in order to provided better service and delivery.
Kalvin is hoping to have a digital product that can meet customer needs with a few easy steps and also me on-the-go.
process
phase 1: project goal
Sticker Supply Shop is looking to expand and is looking to have an app that can be fully automated to order stickers, banners, vinyl transfers and decals.
The idea is for customers to easily upload designs and logos, select quantities and checkout with the least amount of steps.
project vision
Kalvin has had a logo for Sticker Supply Shop that was previously made by a graphic designer he worked with.
phase 2: Research
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Competitive & Market Research
Below you will see the direct competitors Sticker Supply Shop will be in the same market with.
None of the three competitors have a mobile app but they are still big hitters when it comes to custom stickers and labels.
comparative analysis
Below is the comparative analysis to see the list of features and options and how they compare to each site. This will help us to understand what features we can add to make a better user experience.
feature roadmap
After seeing the comparative analysis results we will know what is needed and also the fundamental features we can add to keep a good user experience.
User Research
For the user research I was able to find and interview 5 participants who are currently ordering custom goods but mainly stickers and/or labels.
Please tell me how you go about getting custom goods.(In this case, stickers or labels etc.)?
Do you like who you are currently going through for this service?
What makes you trust a the services you currently go through?
Are there any other sites you know of but don’t choose to go through them because of the price?
How often are you needing to order custom goods?
Would you switch to another company if they had competitive prices?
Are incentives and special discounts of your interest?
Tell me about a positive experience you’ve had using services for custom goods.
And can you tell me a negative experience?
How inclined are you to try or change to another custom goods producer?
Want to see the interview notes? Click below
Card Sorting
This card sorting study let the participants choose a feature or function and place them in their preferred category.
Phase 3: Understanding Users
Personas
The empathizing phase helped us identify two individuals: Jay is an artist selling his own brand and Alex is a graphic designer who also offers services she will contract out to the producers.
The personas give us a general idea of the user’s goals, needs, frustrations and motivations.
Empathy Map
The empathy map helps us visualize the user needs and gain deeper insight.
Phase 4: Goals
Setting goals for the business is another step for planning for the app as well as the overall goals for the company. The user goals are just as important to help shape the app. There is also a shared section where both have a common ground with specific goals that benefit each other.
Phase 5: Ideation
Sitemap
The sitemap is a hierarchical diagram of a website or application. This will keep all information in order and help with the app and user flow to allow tasks to be completed.
Phase 6: Wireframes
Sketches and lo-fi wireframes will help us to visualize the user interface for the app. This can also demonstrate what elements will exist on key pages.
Phase 7: Visual Design
The design system gave us a collection of reusable components, guided by clear standards that can be assembled together to build any number of pages for the application and website.
UI Design
The graphical user interface (GUI) is a form of user interface that allows users to interact with product options through and with visual elements.
With the interface designed with the key pages, the prototype can be made for user testing.
Phase 8: User Testing
Prototyping
We recruited five participants for testing the prototype. The prototype was designed for the process of signing up as a new user, completing onboarding then select a product and options followed by the payment process.
Interactions and page transitions have been added to test out the ideas before full development.
Test Findings
The gathered feedback from the prototype really gave us insight to how the experience was, what they notice and any suggestions they would like to see.
The Affinity Map allows us to group feedback to categories related to the product.
Iterations
After the prototype testing was complete and the data was gathered, we made the suggested changes to accommodate the user experience.
suggestions
Two participants asked if there was a dark mode available. They said it’s good to have for night time or while in darker rooms or areas so the screen won’t be so bright.
Dark mode is still in development but a mockup shown below shows how the screens will or could look like.
Watch the prototype in action or you can click below to test it out for yourself.
My journey
Bringing something to life from concept to reality is something I’ve always enjoyed. It’s always a great feeling helping others to achieve their vision for their products.
Always got to thank my mentor Shardul Vichare for keeping me focused and all the feedback and knowledge.
I am very excited to see and do more as a Digital Product Designer!
Stay safe everyone!