RafaelEgeaPortfolio
Rafael EgeA UX Designer ~ UX Researcher Portfolio
Contents: 1 Rafa el Egea ~ Por tfolio Contents ! Introduc tion 2 2 . Projec ts 3 2 .1 eXperien ce HOTELS 4 -Introduc tion 5 -Research Phase 7 -Analysis Phase 14 -Design Phase 20 -Validation Phase 28 - Con clusion 30 2 . 2 Leon or Lentisco ’s Website 31 3. About Me 33 4 . Qualifications 35 5. Conta c t 37
Rafa el Egea ~ Por tfolio Introduc tion 2 " Introduc tion Hi! I’m Rafa el EgeaS Y UX Design er/Research er based in Berlin, GermanyS Y With kn owledge of Web Developm ent (HT TP/CSS' Y Ba ckgroun d in lan gua ges an d custom er ser vice My goal is to make th e user's experien ce as streamlin ed an d effor tless as possible, makin g techn ology m ore a ccessible an d intuitive for ever ybody. This is my por tfolio docum ent with examples of my work . Ch eck out also my website at www.rafa elegea.com.
Rafael Egea ~ Portfolio Projects 3 PROJECTS
Rafa el Egea ~ Por tfolio eXperien ce HOTELS 4 eXperien ce HOTELS Hotel Search app
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Introduc tion 5 Introduc tion This is a projec t that I un der took as par t of th e UX Design diploma at th e , a case study of a Hotel Bookin g app. I was learnin g, researchin g an d creatin g th e projec ts on th e tim e off f rom my job an d family obligations. In this projec t I carried out th e wh ole UX design process, f rom scratch. I began my with th e research an d en ded all th e way up to designin g an d testin g a prototype. My was to create an app that is easy to use, an d tries to solve th e problems that users fa ce wh en bookin g a h otel through th eir m obile ph on es. UX Design Institute goal Role: UX Design er UX Research er Tools: Figma Miro Keyn ote Tim elin e: 6 m onths (par t- tim e)
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Introduc tion 6 To under take this case study I followed the UX Process all the way from research to validation& % Gather data in order to understand the problems that users face when using this kind of application# % this data in order to gain a meaningful insight into these problems# % the app, all the way from sketch to and wireframe, using all the data collec ted in the previous steps.3 % the prototype and identif y any problems. research Analyse Design prototype Validate
7 Meth ods used for research Competitive Ben chmarkin User Sur ve User Inter view an d Usability Test Rafa el Egea ~ Por tfolio eXperien ce HOTELS Research Phase I began this projec t researchin g th e field of Hotel apps, to collec t raw quantitative an d qualitative data about th e apps. I used trian gulation to pinpoint , in th e different research m eth ods, problems that users were fa cin g, as well as identifiyin g som e good pra c tices an d conventions that sh ould be continued. Research Phase
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Research Phase 8 Competitive Ben chmarkin g Objec tives: Y Learn h ow Hotel Search apps solve th e problems that users may fin dV Y Identif y th e conventions of this in dustr y an d best pra c tice that we sh ould emulate. For my first research projec t I ch ose 4 Hotel Search apps of well-kn own bran ds to benmarch a gainst . In order to have a better un derstan din g of th e comm on issues an d best pra c tices of this par ticular field, I decided to ch oose a variety of bran ds: 2 "premium" bran ds, on e "budget" bran d an d a travel search app{ Y Y Y Y Hil ton Hon orˆ Ra disson Hotelˆ Best Wester‹ Bookin g.com Best pra c tices, conventions an d pain points were identified at th e different sta ges of th e user flow, an d color coded for an easier analysis on th e final docum ent .
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Research Phase 9 Competitive Ben chmarkin g Th ese are som e of th e fin din gs that I gath eredH @ Som e bran ds sh ow “ price per stay ”, which is preferable to “ price per night”: @ Som e sh ow Tripa dvisor reviews for th e different h otels: @ Because of th e la ck of spa ce on m obile ph on es, som e apps have problems displayin g h otel details an d oth er information: @ Som etim es th e prices are sh own in a curren cy different f rom th e user's, which is n ot optimal. Take a look at th e wh ole docum ent . h ere
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Research Phase 10 User Sur vey Objec tives3 M Gath er both quantitative an d qualitative data f rom a group of users: M Learn m ore about th e goals an d m eth ods in which people usually use Hotel Apps. For this projec t I ha d to learn h ow to create an onlin e sur vey to gath er both quantitative an d qualitative data f rom real users. I used Sur vey Sparrow to create th e sur vey an d I passed it onto my conta c ts. In th e en d I mana ged to get 64 users to complete th e sur vey, gath erin g a considerable am ount of data. Th e resul ts were first expor ted as a sprea dsh eet an d th en edited on a separate docum ent for better review.
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Research Phase 11 User Sur vey Som e interestin g fin din gs an d comm ents:B ; of par ticipants search for a ccomm odation on th eir m obile ph on es, an d alm ost half of th ose users use a dedicated app instea d of th e browser4 ; “ Som e apps sh ows you which day it's better to book (th ey sh ow you th e wh ole m onth with different prices for ever y day) an d I fin d it ver y convenient for people like m e, wh o are quite flexible”. 36% Take a look at th e finish ed with th e final resul ts of th e sur vey. docum ent
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Research Phase 12 User Inter view an d Usability Test Han d-written n otes For this projec t UX Design Institute provided us with videos of 2 inter views an d usability test of h otel m obile apps. Th e was to watch th e videos an d take n otes with useful insights f rom th em. objec tive Th e n ext step was to con duc t my own inter views an d usability tests to gain experien ce in this area. First I I ha d to figure out th e technical setup to record th e sessions: I used ApowerMirror to mirror th e screen of th e m obile onto my laptop’s screen an d Film ora to record th e sessions. I th en foun d 2 par ticipants an d recorded th eir inter views an d usability tests.
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Research Phase 13 User Inter view an d Usability Test Th ere were som e interestin g fin din gs at this sta ge:H A Users are used to selec t dates on on e calen dar with 2 taps of th e fin ger, instea d of selec tin g th em on 2 different calen dars7 A Users like to see th e location of th e h otels easily7 A Th e h otel information, features an d extras sh ould be clear in order to h elp users make a decision.
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Analysis Phase 14 Analysis Phase After collec ting all this data, it was time to make it more “digestible”, analyzing and organizing it so we could figure out exac tly the problems that we should tackle on the next steps. On this phase I carried out 2 projec ts: an and a . Affinity Dia gram Custom er Journ ey Map
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Analysis Phase 15 Affinity Dia gram After reviewin g all th e research data, I began writin g th e n otes, usin g different colours for th e different sources of data, an d, with th e h elp of my girlf rien d, Petra, we stuck th em on a bla ckboard. Different colors of n otes were used for different sources of data: Competitive Ben chmark Onlin e Sur vey Note Takin g Usability Test
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Analysis Phase 16 Affinity Dia gram We organised th ese n otes into groups togeth er, to a chieve a cer tain level of collaborative analysis, an d, after a while, th e wh ole livin g room wall was full of th em. Som e of th e bigger groups were later divided into smaller groups, in order to make th em m ore specific . Som e of th e groups were nam ed after th e different steps of th e user flow, like , , , etc ... On e group dedicated to th e th e context in which th e users search for a ccomm odation, with both qualitative an d quantitative data. O th er groups were form ed only by qualitative data, like h ow does th e app , or . Hom epa ge Hotel Selec tion look an d feel gen eral opinion Calen dar
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Analysis Phase 17 Affinity Dia gram I th en typed a gain ever y n ote in Miro, so I could sh ow th e n otes in a n eater way, an d th en recreated th e groups that we ha d on th e wall.Inside th e groups a distin c tion was ma de between good UX an d pain points, to identif y which pra c tice , an d what in th e future. To see th e finish ed docum ent press . sh ould continue could be improved h ere
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Analysis Phase 18 Custom er Journ ey Map Th e objec tive of this projec t was to put even m ore analysis struc ture to th e research data. Th e different sec tions were taken f rom th e groups that we created on th e affinity dia gram. Th e data was th en divided into Goals, Behaviours, Context , Pain Points an d Positive. A row was used to sh ow th e user ’s em otions with em ojis, to sh ow if th e different steps were positive, n egative or n eutral. To see th e th e map in m ore detail press . h ere
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Analysis Phase 19 Analysis Con clusions After th e analysis phase, th e main problems that ha d to be solved were clear L 4 Users sh ouldn’ t be push ed to register onto a custom er program6 4 Dates sh ould be salec ted by tappin g on only on e calen dar6 4 Th e selec ted destinations sh ould be clear, an d if n o h otels are available in on e destination, it sh ould be stated straight away6 4 Location of th e h otel sh ould be easy to fin d6 4 Costs sh ould be clear an d stated in th e user ’s local curren cy.
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Design Phase At this point I began to use th e ideas foun d in th e analysis phase to star t designin g th e n ew app. I star ted by figurin g out a , th en I went on to an d th e app. Th e final step was to create th e with all th e information n eeded to develop th e a c tual app. User Flow Dia gram sketchin g prototypin g wiref ram es Design phase: 20 User Flow Dia gram Th e objec tive of creatin g th e Flow Dia gram was to defin e th e high-level bookin g flow for your m obile app, as well as to star t a ddressin g all th e issues highlighted in th e analysis phase. First , I sketch ed th e flow on a piece of paper, wh en I was satisfied with th e resul t , I recreated th e flow in digital format usin g Figma.
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Design Phase 21 User Flow Dia gram Ea ch screen (or screen state) is represented by a rec tan gle, th e circles represent th e user ’s intera c tion. To see th e wh ole docum ent press . h ere
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Design Phase 22 Intera c tion Design Th e n ext step was to build on th e Flow Dia gram an d sketch th e screens an d screens states that will be later reproduced on th e prototype, a dressin g th e issues an d user goals identified in th e research an d analysis phases. I used som e m obile ph on e templates to star t sketchin g on th em, usin g post-it n otes to represent floatin g buttons or overlays that appear at som e sta ge of th e proccess. Durin g th e skeetchin g process, I en countered som e problems, ma de mistakes, or I simply ha d n ew ideas, so in th e en d I ha d different versions of th e sam e screen to ch oose f rom. After all th e sketch es of all th e different screens were rea dy, I scann ed th em in order to create a detailed docum ent with explantions of all th e details on Figma. First sketch es of th e screens
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Design Phase 23 Intera c tion Design Som e of th e examples of th e screens. You can ch eck out th e wh ole docum ent clickin g . h ere
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Design Phase 24 Prototype Now it was tim e to transform th e sketch es into a workin g m edium_fidelity prototype. I decided to use Figma to create my prototype because it was th e tool that I ha d mainly been usin g through out th e course. In th e beginnin g it was difficul t to create th e screens an d intera c tions for th e first tim e, an d it was takin g lon ger than I expec ted, but wh en I got th e han g of Figma’s workflow for prototypin g, it all went much sm ooth er. Different sta ges of th e projec t: f rom sketch to prototype
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Design Phase 25 Prototype I created a m edium- fidelity protype with out real text or ima ges, but with th e sam e struc ture an d features that I plan ed on th e flow dia gram an d th e sketch es.
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Design Phase 26 Wiref ram es Th e last projec t of th e course was to create detailed wiref ram es with all th e details that developers require to create th e a c tual app. To see th e wh ole docum ent press . h ere
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Design Phase 27 High- fidelity Prototype After I got my feedba ck for my prototype an d wiref ram es f rom UXDI, I decided to go on e step for ward an d make th e prototype m ore real, a ddin g pic tures an d text to turn it into a high- fidelity prototype. I also tried to create a nicer UI by chan gin g th e colour palette to have a consistent , m ore apealin g interfa ce. Check out the prototype clicking . here
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Validation Phase To wrap up my case study, I decided to validate my design by testing it . I asked a friend to test the prototype, to get an idea of what a real life user would think about it . I decided to conduc t this usability test remotely, because I think it’s going to be more and more common to inter view and conduc t usability tests this way. I wanted to understand the details and get used to this kind of setup. Validation phase: 28
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Validation Phase 29 I used Zoom in order to connec t to my user, first I carried out an user inter view to get to know more details about her experience with hotel search apps and the context in which she usually uses them. We then went on to test the prototype by the screen sharing feature in Zoom and the prototype presentation in Figma. I the task that I wanted her to carr y out , a booking that showed the flow that a normal user would go through when booking a hotel through their mobile phones. I tried to make ver y clear to her that it was still a prototype, so not all func tions and buttons would work . Fin din gsH m Carr yin g out an usability test rem otely with n owa day ’s tools is n ot as complicated as I th ought it would be._ m Th e user foun d th e prototype quite straight for ward an d easy- to -use. Th e only thin g that sh e said sh e would chan ge is th e positions of som e elem ents on th e screen to make it m ore ergon omic .
Rafa el Egea ~ Por tfolio eXperien ce HOTELS Con clusion This was my first ever UX design projec t , and it was quite a journey. I learned a lot about the UX process, from the moment that I carried out the first projec ts in the research phase to creating a working prototype and testing it . I understood the impor tance of following that process in order to make UX Design happen. Overall it was a great experience, I learned a lot of different skills from it and I really enjoyed some par ts of the process, like creating an affinity diagram. There is something I would do differently, and that is to learn how to steer the inter views and usability tests in a more optimal way, but I guess that is something that you get with more experience. I would also tr y to go more in detail on the sketch phase, so I wouldn’t have to figure out some details later in front of the computer. Con clusion 30
31 Leonor Lentisco Egea Ar tist’s Website De sign Work in progre ss
Rafa el Egea ~ Por tfolio Leon or Lentisco ’s Website Over view 32 Leon or Lentisco ’s Website - work in progress Over view I was asked by the ar tist Leonor Lentisco Egea to design and help with the development of her personal website. This projec t is still a work in process and finds itself right now in the Design phase. Problem? = To find the best way to make the landing page a sor t of presentation of the ar tist’s universef = To present the variety of the ar tist’s works, organised in a way that makes sense to the userf = To showcase the work that the ar tist carries out in workshops. Comin g soon!!
Rafa el Egea ~ Por tfolio About Me 33 About me Hi! My name is Rafael Egea, I come from southern Spain, but currently live in Berlin. After a long career in the aviation sec tor, I followed my passion for design and technology and star ted to learn coding and also discovered the world of UX Design. I obtained a professional diploma in UX Design, cer tified by the Glasgow Caledonian University, studying and creating the projec ts for the course on my spare time from work and family time. From my experience as flight attendant I can bring some really valuable skills for an UX designer, like the ability to work as par t of a team, great communication skills, and a genuine will to help people at ever y step of the way, to name a few.
Rafa el Egea ~ Por tfolio About Me 34 In my free time I like prac tising spor ts, like cycling, climbing and snowboarding. I also love music , literature and ar t . With a background in the aviation, industr y I couldn't help to add that another one of my passions is traveling to dif ferent countries and experience their cul ture, food and landscapes. Check out also my Linkedin profile for more information about me. You can also download my resume right h ere.
Rafa el Egea ~ Por tfolio Qualifications 35 Professional Diploma awarded by th e UX Design Institute, credit-rated by th e Glasgow Caledonian University. In this course I learn ed an d pra c tised all aspec ts of UX Design, f rom reasearch to prototype. At th e en d of th e course an overall score was calculated, takin g into a ccount th e scores obtain ed in all th e compulsor y projec ts an d th e final exam. Overall percenta ge score obtain ed in th e course: 91%. Professional Diploma in UX Design
Rafa el Egea ~ Por tfolio Qualifications 36 Ba ch elor ’s Degree in En glish Philology awarded by th e University of Grana da (Spain) in Jun e 2004 . Th e En glish Philology degree comprises subjec ts of Lin guistics, En glish L an gua ge an d En glish Literature. Secon d lan gua ge taken: Italian. 2 a ca demic years years spen d abroa d, at th e University of California Santa Cruz (USA) in 2000 -2001, an d Bristol University (UK) in 2003-2004 . Ba ch elor ’s Degree in En glish Philology
Rafa el Egea ~ Por tfolio Conta c t 37 Conta c t Email: [email protected] Teleph on e: + 4917698628606 Website: www.rafaelegea.com
