Siki is a multimedia platform that’s uses crypto/nft technology to help artists and curators do more of what they love. We have built a space where we will monitize for both artist and curators.
PROJECT OVERVIEW
Our goal is to bring all artistic communities from different mediums together creating one large supportive ecosystem to help the entertainment industry thrive on a whole new level. The strength of our community is the most important part of what we are building. The stronger it is the more value added to every artist, curator, or even viewer/listener.
MAIN OBJECTIVES
There were primarily two objectives that we aimed to accomplish through the design process –
To create superb branding guidelines for the company, that would boost the brand’s reputation by rightly connecting to user’s goals and further establish a great rapport.
To create an attractive user interface for an e-commerce app, that allows users to quickly choose a product for rent without needing to venture out from their comfort.
Goals
1. User Stories & User Flow
2. High Fidelity Wireframe
3. Prototyping, User Testing
4. User Interface, Visual Design
Design Tools
Adobe XD
Photoshop
Desk Research
DESIGN PROCESS
1. Understand
User Stories
In light of the scope of the project, a number of user stories were considered and I selected those which would reflect the goals of potential users. With these key user stories selected, we determined the success criteria that would determine the user flow.
Key points
The new user can access the information/ inventory without having the register, so that the user can go and explore the inventory before creating the account.
The returning user can overview the past activity, previous purchase, search history.
With having different categories of the product with basic filter option for browsing lots of products in the platform.
The Customer should be able to place multiple items in the shopping cart so the Customer can purchase more than one item at a time.
User should be able to get the recommended product in the feeds.
Payment process should be followed with ease.
2. Define
User Flow Diagram
From Home page to completing your purchase
In order to determine what screens would be present in design interface, we started making user flow diagram while keeping requirements & success criteria’s in hand. From this diagram we are representing the user journey to the client before starting with the actual design.
3. Ideate
Mid/ High Fidelity Wireframes
Before moving to the actual design, it’s an industry standard practice to make wife-frame and start brainstorming your ideas keeping flow in mind. While creating the thought process, we keep client in loop for quick discussion and approval. This helps us to bring everyone on single page.
4. Prototype
After creating mid fidelity wireframes, We started with the prototyping using Adobe XD. This allow User to click and walkthrough and uncover small problems or pain points in the structure or flow of the user interface. This step was valuable to understand how to improve the design for users.
5. UserTesting
With switching User test mode in Adobe XD, we created usability test that would evaluate the prototype’s ability to help users accomplish a set of four tasks within a scenario. The Test provided valuable insights in to the user behaviour and pain points while using the Renteasy Prototype.
DESIGN SYSTEM
Typography
Aa
Helvetica Neue
The quick brown fox jumps over the lazy dog
17px (Semibold)
The quick brown fox jumps over the lazy dog
15px (Bold)
The quick brown fox jumps over the lazy dog
15px (Semibold)
The quick brown fox jumps over the lazy dog
14px (Regular)
The quick brown fox jumps over the lazy dog
13px (Regular)
The quick brown fox jumps over the lazy dog
12px (Regular)
The quick brown fox jumps over the lazy dog
11px (Regular)
Colours
Red is the brightest and the hottest hue in the colour wheel. When added to an app layout, it simply cannot be left unspotted. It highlights the page while bringing energy and power to it. This is also a strong motivational colour, which calls the users to take an action. Red shows passion, power, action, desire, and love. In this design, red is a powerful accent colour which is again very versatile. Brighter shades emphasize energy and excitement while darker shades suggest power and passion. We thought of moving with lighter and darker shade both.
Goals
Design Tools
1. Understand
User Stories
User Flow Diagram
