UX | UI Design | Brand Strategy | Research
Length: 3 Months
Deliverables
User Surveys, Competitive Analysis, User Personas, User Stories, User Flows, Wireframing, Prototyping and Testing
Design Tools
Figma, InVision, Adobe Creative Suite, Xtensio and Lucid Chart
Modern design meets minimalist -- the application offers a clean and simple user experience for content creators to collect, collaborate, create and share their work with other creatives and fellow followers.
Problem
To date, there are several cloud storage platforms available to consumers, most of which try to cover a wide audience.
What about a niche crowd of content creators? How could a platform offer all in one services for organization, content creation and collaboration?
Solution
ARCHETYPE aims to solve that problem by streamlining these services into one main platform. It will allow users to create and organize content, collaborate with other creatives, and share their work with their followers.
UX Design Process
01 User Research
Competitive Analysis and User Surveys
02 Consumer Strategy
Personas and User Stories
03 UX Analysis
User Flows and Wireframes
04 Branding & Identity
Logo and Style Guide
05 Visual & UI Design
Hi-Fi Prototype and User Testing
Market Research
The cloud storage space has been around for several years and is an established business used by millions on a global scale.
Upon looking at the possibility of a new market entrant, I needed to first identify who were our market competitors and understand the market. A SWOT Analysis was used to help initiate the process.
Competitive Analysis
Google Drive, Microsoft One Drive and Dropbox were targeted as key competitors in the market. Through the SWOT Analysis, I was able to identify certain weaknesses and opportunities for a new market entrant.
User Surveys
To gather more insight into the cloud storage space and its consumers, an understanding of user behaviors and patterns were needed.
In order to accomplish this, I created a simple user survey that focused on these key areas:
Data Analysis
Currently Used Services
Most Valued Features
Key Insights
The survey data revealed that the market was well versed in the uses of cloud storage platforms. Many subscribers engaged these platforms for professional and personal uses -- content creation and collaboration.
User Personas
Using the data from the surveys, user personas were then created to assist with identifying the most common and basic functions needed from a new cloud storage platform.
The primary goal was to grow an understanding of potential users' adoption of a new service. And in order to address this, two user personas were created -- the Visual Creator and the Content Collaborator.
User Stories
With the information given from the personas alongside the data generated from the surveys, the next step was to list out the basic features users would need. These features were outlined using user stories and ranked of importance from high to low frequencies.
User Flows
Using the most important features gained from the user stories and combining that with the data from the personas, I then began transferring that information into user flows. The flows would serve as a visual blueprint of how all the needs and features would integrate into a functioning product.
Wireframes and Prototypes
Referencing the userflows as a guide, I then began sketching out the basic wireframes that would serve as a visual aid of how the application could operate.
Once the sketches were complete, I then used Figma to replicate the sketches to turn into a Lo-Fi clickable prototype for user testing.
Lo-Fi Testing
After the initial wireframes were finished, I then imported them to InVision where they were put together to construct a Lo-Fi clickable prototype. User testing was conducted both in-person and remote through FaceTime. Feedback was provided during this period which later led to the following refinements.
Branding and Logo
Given that this industry was already a heavily saturated market, I had to identify a point of entry to make a splash large enough for consumers to notice. In order to achieve this, the product's branding needed to evoke a sense of purpose that also resonated with the brand's services -- something to stoke the interest of the community.
Through the help of some mind-mapping techniques and several sketches of what the product should convey, ARCHETYPE stood out with the most potential of what the brand would stand for.
The meaning behind ARCHETYPE is better expressed as the original pattern or model of which all things of the same kind are a representation of the original source. It will stand for ideas that are attractive yet simple with a creative personality and can be accessible to any content creator.
For the logo portion, I knew I wanted to represent something that was synonymous of what ARCHETYPE stood for.
I set out to work pouring through numerous sketches of what a potential logo could be, but none seemed to have captured my attention. So rather that focusing on a mark, I redirected my focus on the name itself -- a word that is hardly used or heard in everyday conversation and is unique enough to evoke a sense of curiousity of what the product was and what the brand stood for. And after several iterations later, a final concept stood out to be a winning design.
Typography
Two typefaces were chosen for this brand that were intended to represent a strong charisma that is associated with the mood of what defines the brand.
Montserrat is the primary typeface of ARCHETYPE which is mainly used for headlines and displays. The typeface comes in a number of variations in weights and sizes.
Lato is a complimentary typeface of ARCHETYPE which will be mainly used for overall text. The typeface also comes in a variety of weights and fonts.
Colors
Three layers for the color palette were chosen, each representing a certain identity that would be expressed throughout the brand's overall look and character.
Once the last piece of the puzzle was identified, I then began putting together a cohesive style guide that would serve as a blueprint to reference the brand's overall design patterns and preserve the brand's identity.
Hi-Fi Prototype
Once the style guide was completed, I circled back to the original wireframes and mockups for the low fidelity prototype and began designing the high-fidelity prototype.
During this process, several iterations and revisions were made based on preference testing among a small group of participants. This was to ensure that the best and well qualified designs were focused on and presented in the final product.
Hi-Fi Testing
User testing was conducted in-person and was also in tandem with the revision and iteration process. The reasoning behind these ongoing user tests was to identify if there were any other problems or issues with the prototype, alongside gathering additional user-based input that would provide invaluable insight into this site's experience and usability.
Some of the feedback expressed during the testing period included:
Adjusted and repositioned upload button, changed color of side tab to match status bar, and realigned typography to illustrate a more light and cleaner look.
Conclusion
The undertaking of this project was definitely a challenge, but was also fun. During the entire process, I researched and questioned certain areas that pushed my mental boundaries in creation and ideation. And as I found out early on in the process, designing something from scratch is not easy. There is a lot of time and effort that goes into this phase before pencil meets paper in drawing out the 1st batch of sketches.
Ideas will always shift, designs will always revise and iterate upon themselves, there will always be room for additional testing on prototypes and no matter how many times a design is made final, there is almost always a certainty that there will be several other finals before a final design is truly agreed upon. Learning may always remain as a constant variable in UX Design, but the value achieved from growth will be priceless.
