Shiply

A social way to make
and track purchases

Background and Motivation

The initial idea for this project sprouted when I was visiting my long distance friends. We're constantly sharing our new product finds with each other, acting as each other's influencers in our social circle! I thought it would be a fun idea to take that interaction and turn it into an app. With the rise of Beli, Bereal, and other social medias tailored to the local social ecosystems rather than creating global outreach, Shiply is my take on that trend but from an e-commerce perspective.

Tools

Figma
LucidChart
Maze
Procreate

Team

This was an individual passion project where I took on the role of UX Researcher, UX Designer, and Project Manager

Timeline

Overall: 8 Weeks
Discovery & Research: 3 Weeks
Design & Testing: 5 Weeks

The Design Process

01.

Research

02.

Wireframing

03.

User Testing

04.

Prototyping

05.

Conclusion

User Interviews

To kick off the project, I conducted a total of 10 user interviews. The goal of these interviews was to gather data on how users currently use social media among their friends in order to create an affinity map.

23, F

“we’re all influencers for each other anyway, social media these days is so flooded with paid partnerships
that it’s difficult to see which products are actually worth buying”

Competitive Feature Analysis

Next, I conducted an analysis of tracking and social media apps that were already available on the market. I included both real apps available for download as well as well as design inspiration ideas from Dribble.

Sketches

For my initial sketches and ideation, I took inspiration for currently existing apps that were popular amongst my interviewees. I also focused on organizing the layout and information architecture of the app so I would have an easier time with creating the wireframes.

Wireframing in Figma

Home Feed

This was the initial wireframe for Shiply's home feed page. This screen also serves as the landing page, allowing users to see their friends' latest posts and reviews upon opening the app.

Through creating a post component, I was able to create different states of the post, such as adding photos, and descriptions.

Users are also able to interact with posts through liking and favoriting the post by clicking the respective buttons.

Search Feature

The search feature allows users to find products to shop and view suggested items.

The goal of the search function is to allow users to intuitively search and find shopable products that match what they're looking for.

This feature includes elements such as recent and recommended searches, suggested filters, and search results with friend and global ratings.

Parcel Tracking

After placing an order from the app, users are able to track their deliveries through the tracking page. They can also view their past orders, which are color coded by success status.

Users are able to view more information on active orders,

such as detailed tracking history updates as well as expected delivery time.

Additionally, users see their couriers and are provided contact information should they need to contact their couriers.

User Profile

This page is where the user is able to manage their account and profile. The user is able to manage their following list, edit their profile, and toggle between their posts and their saved products.

saved items are stored in collections, where the user can click into and view their categorized saves.

Some user testing...

After creating the initial prototype, I asked 5 individuals to test out the app and provide their feedback.

Users enjoyed...

intuitive navigation through the app
extensive features and inclusion of details
tracking page
being able save products and save to collections
layout and information architecture of the app

Users want more of...

higher contrast between background and text colors
more concrete user journeys connecting the features
higher contrast in sizing to highlight the most important aspects of each screen

Colors and Typography

The intention for the colors of Shiply is to convey a fresh and modern vibe. The primary brand color is a calm Sky Blue, which doesn't tire out the eyes and allows users to spend longer amounts of time browsing through the app. The secondary color of Rose Pink is meant to complement the blue, while also providing contrast.