Portfolio. Selected Projects Interaction & Product Design 2018
OZO N OS TUDIO | P ORTFOLIO 2018
Oh, hello there.
I’m a multidisciplinary designer passionately crafting beautiful UI and delightful UX. I enjoy helping clients win and achieve success. I provide them with creative brand and identity experiences that come alive in the digital space. A critical thinker and a problem solver, I love solving complex problems with simple solutions.
Key Skills
Software Skills
- Screen flows, navigation models.
- Sketch, AdobeXD, InVision, Marvel, Atomic,
- Site maps, content inventory.
Flinto, Proto.io, Origami Studio.
- High-fidelity Visual desgin.
- Adobe CS Suite.
- Hand Coding, HTML5, CSS3, PHP, Javascript.
- Coda 2.
- Task flows, user journeys, scenarios.
- After Effects, Hype 3, Animate CC.
- Usability testing.
MacOS, iOS, Android, Windows.
- Rapid Prototyping, Interactive prototypes.
- Basecamp, Trello, Asana, ActiveCollab.
- Wireframe, Sketches.
- Word, PowerPoint, Excel, Keynote, Pages,
- Identity design & Brand strategy.
Numbers, Google Docs.
- Functional Specifications. - UI & UX, specific to product development. - Experience working as freelance & in teams.
2 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
EXPE R I EN C E
I’ve successfully delivered and managed more than 60+ digital projects ranging from web & mobile apps, crm platforms, cms based corporate websites, and large e-commerce.
All are at the highest standard of execution and represent some great companies in their industry. Contract Freelance Own Project
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
Sol Brava
Freshout
Sketches App
2008 - 2010
2011
2013
Graphic Designer
UI Designer
UI Designer
Adidas
MidEast Tunes
Agavelab
Vancouver
2011 - 2012
2012 - 2013
Interaction & Product
Interaction & Product
Graphic Designer
Designer
Designer
MafiaCreator
Fiplab
Gigit Market
2010
2013
2015 - 2016
Interaction & Product
Graphic Designer
Interaction & Product
2009
Designer
Designer
3 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
01 Discovery Gain knowledge of users, context, technologies, gather user data, research competitive products, conduct interviews and filed studies. 02 Explore Build user profiles on gathered data, produce materials that will aid the outlining of the project, site maps, content inventories, screen flows, navigation models, task flows, user journeys,
PROCESS
scenarios.
4 // 36
03 Select Evaluate, test, and select wireframe concepts for prototype development. 04 Develop Create design specifications and evolve concept/ wireframes into full design solution. 05 Refine Evaluate design with stakeholders to obtain feedback and conduct usability testing. 06 Deliver Complete design and produce deliverables.
INTE R AC TIO N & PRO DUC T DE S IG N
STATEMENT OF ORIGINALITY AND OWNERSHIP This portfolio is the work of Uriel Albarrรกn Oropeza. Please do not copy without permission. Some of the work samples are the proprietary property of the organization whose name appears on the document.
Each has granted
permission for this product to be used as a demonstration of my work.
Seeing is believing. There is quite a vast list of projects that I have worked on since i started my career. This is a selection of my best and most recent UX work that I have done. The projects are relevant for their industry and devices.
01
FeaturePoints Product, UI / UX, Identity Design and HTML5, CSS3 template for their Reward App and Website.
02
Mafia Creator
03
Other Projects
User Interface Redesign
Other selected projects
5 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
01 // Project Name : FeaturePoints / Web App and Identity
02 // Description : FeaturePoints it’s a Web App where the visitors earn points for download and try free apps, this points can be redeem for real money.
03 // Owner : TapGen & George Pogosha
UX, UI Mobile
VISIT: http://featurepoints.com
6 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
FeaturePoints Dec 2012 / Desktop & Mobile
I and e Web
01.a
Client Project CHALLENGE Create a Web App that allows people to earn points without the need to be connected to a Social Network and give easy access to rewards to redeem. The Web App has to be engaging and encourage users to be proactive about open the Web App daily to download and Try free apps and get to get rewards.
WHAT I DID › Setting goals and objectives › Stakeholder interviews › Establishing key audiences › Building personas › Creating scenarios › Creating site maps › Conducting competitive research › Low-fidelity prototypes › Creating wireframes › High-fidelity prototypes › Basic HTML5 and CSS3 template › Identity Design › Usability testing
7 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
Setting goals and objectives. 02.a
03.a
FeaturePoints is a web app that allows you to earn points and get rewards, trying free apps. Owned and operated by TapGen, FeaturePoints allows you to earn these rewards using your iPhone or Android device.
Create a design and a website engaging that encourage users to come daily to earn points and share their Referral code to attract more users.
What are the Web App about?
All you do is simply download free apps, try them out and you’ll earn points that you can redeem for rewards. FusionCash. com & Swagbucks.com also provides you the opportunity to make money downloading smartphone apps and for other online activities.
What are the goals?
04.a
Who are the users? Primary Audience:
Youtubers, Gamers and Bloggers.
Secondary Audience:
Non-costumers and ex-costumers.
8 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
05.a Conducting Interviews
Stakeholder interviews are a powerful way to build consensus around business goals as well as identify solutions to communication challenges. Stakeholder interviews provided insight that couldn‘t be attained from independent research — like how Youtubers, bloggers and gamers share their referral codes and what type of help need to reach more followers.
9 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
Establishing Key Audience.
EX-COSTUMERS
06.a
Youtubers, Gamers, Bloggers, non-costumers & ex-costumers
NON-COSTUMERS
This is the very first steps that any design process will need. Start thinking about your users. Who are they, where are they from? Where can you find them? Take a look at all the requirements, and list out the questions about things that is still in doubt, even things that you are sure about then give it to the users. You can use many available tools to do survey, collect ideas from users. There is not always good ideas, but there will be some really good ideas come from the users. It’s an unlimited source of ideas.
10 // 36
BLOGGERS
INTE R AC TIO N & PRO DUC T DE S IG N
33+18+13279A 9%
YOUTUBERS
33%
27%
13%
18%
GAMERS
11 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
07.a
Building Personas After Interviewing the stakeholders I can identify the right way to create the right tools to help our target audience. Once the information was study and synthesized I can start to build my personas. To create a thorough user profile (persona) I normally include social and demographic characteristics, needs, desires, goals, habits, expertise, cultural
Common Personas Pain Points -
› Lack of videos or referral images to share on social networks. › More crappy apps than good games. › Get a third level referral system. › Long signup forms.
background and motivations.
Know your Target Audience. WHO ARE THEY?
WHAT DO THEY WANT?
› No bank account › Age: 15 - 38 › Gender: Male - Female › Family: Single - Married › Education: Studying, Degree
› Easy signup system. › Promotional material that can be shared on social networks. › Good quality games and apps. › Easy way to earn more.
12 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
Building personas
MOTIVATION
SOLUTION
› Have an easy income from their followers and readers. › Get great tools to promote their social networks.
› Interactive Web App. › Custom video per user with their referral code embed that can be used on social networks. › Better games and aliances with developers.
13 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
08.a Scenarios User scenario is a detailed description of what users do with the product and more importantly why they do it. It is longer and more informative than a user story, but still you have to keep it to the point and include only information that is highly relevant to the user’s experience with the product. User scenarios outline the motivation and the main goal of the user for visiting your website or using your product. A perfect user scenario comes in a way of a short story that clearly defines the context in which the product is used. It gives answers to such important questions as: Who is the user of our product? What does this user want to accomplish with our product? How is this user going to achieve her goals? Why does this user choose our product over other available options? 14 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
For FeaturePoints was necessary create a minimum of 12 scenarios that help us to understand better the needs of every user, and let us correct and remove unnecessary steps.
15 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
09.a Competitive Research. The research you gather about your competitors is often referred to as: “Competitive Research.” This kind of research is crucial to your success as a business because it arms you with the ability to quickly identify industry trends and adapt to competitor campaigns or strategies in order to maintain a foothold or out-compete them entirely. In order to get the strong points of every app and know what we can do better, I manage to order all the apps on a grid according to what they have to offer to their users and what they do to reach them. Also, this research it’s important to avoid create the same layout but at the same time design a web app that the user already find familiar to use.
16 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
17 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
10.a Identity Design Developing a strong brand is a critical step for every organization. It helps convey what customers can expect from your products and services, as well as the key traits that set you apart from your competitors. Defining your brand is like a journey of business self-discovery in which you identify your core values, your ultimate goals, and how you want others to perceive you. The re-branding process consisted of updating the font used in the logo to be more readable, modern, professional and approachable.
Primary Color System
Color A : Blue -
Primary Color System : 100 %
Gradient
20 %
Explanation : FeaturePoints has 2 official colors: Blue and Black. This colors were selected for the next reasons:
Color A : Black
Blue is often seen as a sign of stability and reliability. Businesses that want to project an image of security often utilize blue in their advertising and marketing efforts. Black is a color that is considered to be quite elegant and simple at the same time. A black outfit can be seen as more fancy than a colorful one. Black is linked to power.
18 // 36
Color Codes CMYK : C071 M022 Y000 K000 Pantone : 2925C HKS : 46K RGB : R000 G165 B243 Web : #00a5f3
-
100 %
Gradient
20 %
Color Codes CMYK : C000 M000 Y000 K000 Pantone : Black 6C HKS : 97K RGB : R000 G000 B000 Web : #000000
INTE R AC TIO N & PRO DUC T DE S IG N
Logo Construction, Clearspace and computation It is important to keep corporate marks clear of any other graphic elements. To regulate this, an exclusion zone has been established around the corporate mark. This exclusion zone indicates the closest
any other graphic element or message can be positioned in relation to the mark.of the the symbol itself and our company name – they have a fixed relationship that should never be changed in any way.
x
y
1) Logo Symbol
Clearspace Definition Whenever you use the logo, it should be surrounded with clear space to ensure its visibility and impact. No graphic elements of any kind should invade this zone.
Computation To work out the clearspace take the height of the logo and divide it in half. (Clearspace = Height / 2).
1/2 x
1/2 x
1/2 x
1/2 x
2) Full Symbol
1/2 x
1/2 x
1/2 x
1/2 x
19 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
11.a Low fidelity prototypes. Obviously, the low fidelity prototyping can help discover the issues of design and get them resolved at the early stage, with much less time and efforts invested in it. An interesting and proven phenomenon is the low-fi prototyping has become a preferred choice for both new-born start-ups and giant brands.
20 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
12.a High fidelity wireframe. When I‘m confident that my user flow, scenarios and low fidelity prototypes are correct and functional, I develop a high fidelity wireframe. I use this wireframe to develop a prototype and carry out to user testing. Also, this wireframe can help to the programmers to start to work on the basic structure of the Web App before I can start to send the final files and styles, this make everything faster and more dynamic.
21 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
13.a Project Outcome Once all the wireframes and prototype testing was done and everything it’s ok, I can start to develop all the final style for the Web App, slice all the assets and deliver all to the programmers to get the final product.
ACHIEVEMENTS › Improved overall accesibility and usability. › Creation of a recognized brand that today create trust on their users. › Healthy and steady traffic growth since launch. › Referrals, and social sharing validates content quality, trust and credibility. › In page analytics and click tracking indicates successful navigation. › Responsive design success revealed in low mobile traffic bounce rate.
22 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
Trough effective user testing I can refine the UX design into a finished design solution. 23 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
Website re-design 24 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
MafiaCreator June 2010 / Desktop
CLIENT COMPANY
PROJECT NAME
PROJECT MANAGER
PROJECT START DATE
GamoVation B.V.
Mafia Creator
Daimy Stroeve
June 15 // 2010
01.b Client Project CHALLENGE
WHAT I DID
The original design of the page was developed to easily create and manage a game without too much fuss.
› Setting goals and objectives › Stakeholder interviews › Establishing key audiences › Building personas › Creating scenarios › Creating site maps › Low-fidelity prototypes › Creating wireframes › High-fidelity prototypes › Usability testing
However, it doesn’t have the professional lookand-feel the owner would like to have, and it all seems too clean and too childish. The clean design does not match the “create your own crimegame” concept, and the size of the network gets too little attention. If you see the design for the first time, you think “gee, a website with 500 members”. But in fact, it’s running about 80 million pageviews a month!
VISIT: mafiacreator.com
25 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
02.b Discovery Phase The first step for a successful re-design was learn and understand more about mafiacreator.com as the product and a game that they have already stablished and the goals they have planed to reach with this change. They send me a document with all the mockups, notes about how they wanted the website to look. My role was create a great look for the re-design of this website in order to make it look more professional, make it look with some playfulness and mafia/crime without make it look like a game since they only provide the tools to create your own game, also should look like a worldwide game because right now looks too „dutch“ according to the creator.
26 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
STEPS TAKEN › Learn more about their intended business model. › Studied the requirements and mockups they had prepared. › Met remotely With GamoVation to learn more about their ideas and goals for this design. › Help them to polish the privided Personas and User Stories. › Organize users feedback to obtain actions item that benefits the design
VALIDATED VALUE PROPOSITION Offer their existing users an improved experience through a new design that can be used on the international pages as a standard improving the overall appearance on the site making it look professional.
*Sitemap edited by petition of the owner to hide crucial information
27 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
03.b Low fidelity prototypes After reading all the information provided by GamoVation including the user scenarios I start to create the first sketches for the main page, forum, and games overview. This Sketches let us have a general idea about how the website was going to look, what elements should be removed and the new features on the site.
28 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
04.b High fidelity prototypes The next step after have all the Low Fidelity Prototypes defined and approved it‘s create the wireframe for the website and all the sections. For this I define the main sections as the menu and banner sections in order to give to the Back-end programmers and overall idea of the sections and the position of the elements, this help them to create the basic structure for the design, also give us the opportunity of make a prototype testing with real users and know if the flow is the right for the site.
29 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
05.b Project Outcome Once all the wireframes and prototype testing was done and everything it’s ok, I can start to develop all the final style for the Web App, slice all the assets and deliver all to the programmers to get the final product.
ACHIEVEMENTS › Improved overall accesibility and usability. › Creation of a recognized brand that today create trust on their users. › Healthy and steady traffic growth since launch. › Referrals, and social sharing validates content quality, trust and credibility. › In page analytics and click tracking indicates successful navigation. › Responsive design success revealed in low mobile traffic bounce rate. › Advertisers dashboard gain more use over the first month. › Low overall bounce rate & healthy average time on site indicates good visitor retention. › In page analytics and click tracking indicates successful navigation.
30 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
31 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
01.c Other Selected Projects Client: Adidas & Talenthouse
Project Date: Sep - Oct 2009
Project Description: I work in collaboration with Adidas and Talenthouse to design a series of Goggles for the Winter Olympics of 2010, this Goggles where presented to the teams on the Olympics, some of this designs go from the representative colors of the nations to designs representing areas of Vancouver.
Client: Ballsy rides the bus
Project Date: March - Apr 2018
Project Description: For this project I was asked to design a logotype for an annual father and son stadium tour that was been done for 20 years, the name “Ballsy� refer to the person who started the trip and passed away a few months ago, they want to include their 2 favorite things, Baseball and Bud Light.
Client: The Underground Coach
Project Date: Feb - March 2018
Project Description: Identity for the Olympic Level swimming/triathlon coach Dave Dornaus who was starting his own business as coach, and for this he need a powerful logo to represent this. I got the opportunity of create this design for him, and represent a race track and the initials DRD.
32 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
02.c Winestate Sneakers Project Date: Apr - May 2018 High-top Converse sneakers designed for the company staff of Winestate using their logo as the base of the design, this to respect the tradition of the company of use the logo as a window to display images and other designs, they want something elegant and modern because inclusive if the company want to give a modern look to the media, they also they need to remember they belong to a classy world of wine-makers. Appart from be on charge of the design, also I was on charge to be in contact with the printer company to guarantee the best printing quality.
33 // 36
OZO N OS TUDIO | P ORTFOLIO 2018
03.c Paramount Rare Coin & Currency PROJECT DESCRIPTION Paramount Rare Coin & Currency offer guidance and consulting for rare coin collectors as well as bullion buyers. They focus on United States minted Gold and Silver Coins, and they wanted a Magazine Ad for their audience goal, Conservative retired or Wealthy individuals looking to protect their wealth in an area of savings, using the truest form of wealth. This Magazine Ad was displayed in the Smithsonian Magazine on the month of July 2016
34 // 36
INTE R AC TIO N & PRO DUC T DE S IG N
ozonostudio Summary and Contact
Thank_you.
A short summary Many of this works are displayed under the permission of my employers on that time, many sections or information is under no disclosure agreements and I was only capable of show the images and documents created by me.
_Graphic Design _Web & App Development _Interaction & Product Design 35 // 36
Portfolio 2018.
Bring Ideas to life.