Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Darby slaton casestudy Slide 1 Darby slaton casestudy Slide 2 Darby slaton casestudy Slide 3 Darby slaton casestudy Slide 4 Darby slaton casestudy Slide 5 Darby slaton casestudy Slide 6 Darby slaton casestudy Slide 7 Darby slaton casestudy Slide 8 Darby slaton casestudy Slide 9 Darby slaton casestudy Slide 10 Darby slaton casestudy Slide 11 Darby slaton casestudy Slide 12 Darby slaton casestudy Slide 13 Darby slaton casestudy Slide 14 Darby slaton casestudy Slide 15 Darby slaton casestudy Slide 16 Darby slaton casestudy Slide 17 Darby slaton casestudy Slide 18 Darby slaton casestudy Slide 19 Darby slaton casestudy Slide 20 Darby slaton casestudy Slide 21 Darby slaton casestudy Slide 22 Darby slaton casestudy Slide 23 Darby slaton casestudy Slide 24
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Darby slaton casestudy

Download to read offline

UX/UI designer-developer | I am a UX/UI Designer-Developer and storyteller who loves working with companies and solopreneurs who aren't afraid to live out of authenticity.

https://www.linkedin.com/in/darbyslaton/

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Darby slaton casestudy

  1. 1. Hi, I'm Darby UX/UI Designer-Developer I design & develop websites for startups, brands, and entrepreneurs. 1.
  2. 2. Spoiler alert if you want skip my process and see the finished website, you can take a peak if you want to page 18-20 My story Projecting good vibes since 2013 2. Click Here
  3. 3. Did you know brand identity will affect your user experience? 3. My mission To transform uninspired brands into a friendly, personable companies so that your users will have greater experiences with your business. My process I help you get clarity on business goals and help your company draw out your unique voice and message. Then I do a deep dive into your users' worlds and their needs, wants, and pains. .
  4. 4. Research helps us understand and empathize with the story of people's lives, which reveals problems they face and get to know their wants and desires. As a result, we have the best chance to find key product opportunities and create the rich customer experience to server our users' the way they deserve. My methodology to finding your company's creative voice is tied to my experience as a business coach. I help clients get past the fluff with deep coaching sessions. I know how to ask powerful questions to find out a companies why and the story they want to tell. This process is also heavily data-driven. My unique process is both an art and a science. Looking at the experience as a whole is my strength. I love looking at it as a whole because great experiences extends beyond the screen. Building brand assets that reflect your authenticity will help you stand out from the crowd. I am experienced in sketching, rapid wire-framing, prototyping, and front-end development. The sweet spot My 3 areas of Focus-The work I do Product & User Research Visual designing & branding ABOUT ME Prototyping & Code 4. 1. 2. 3.
  5. 5. ARIA'S CASE STUDY Aria received these deliverables Sitemap Wire-frames Persona Mood board with brand assets Mock-up Website Usability testing results Case Study Aria's Online Art Portfolio Experience. Role I Played Marketing & user research report User flow & customer journey map Brainstorming sketch Prescriptive report for possible rollout of phase 1 & 2 Aria is a fictional character, I know there are some limitations but I believe this project will be able to highlight my skills, philosophy and mindset. Aria is an independent digital artist and puzzle enthusiast whose work intersects geometric abstraction and portraiture. She is based in Portland, Oregon. Who Is Aria? To finish this project in a two-week period as a sole UX/UI designer-developer. Alongside this goal, I also built this case study. Goal This is an end to end solo project. Every step in this case study was done strictly by me. Project planning, research, design, and development. For more info 717-990-6999 5. Aria's artwork
  6. 6. Understand the user experience Empathize w/ the user Brainstorm design solutions ARIA'S CASE STUDY FOR MORE INFO 717-990-6999 User research Market analysis Affinity mapping SWOT analysis Developing problem statement User persona Brainstorming MoSCOW method Wire-framing Site map User flows User journey Branding Prototyping with HTML & CSS Testing Making site live My goal is to create an MVP website to help an artist market her work and be easily contacted for commissions. User Flow & Journey Brainstorming Developing the solution Wire-framing & Prototyping, The tasty ingredients of Aria's project include... 6. 1. 2. 3. 4. Affinity Cluster
  7. 7. FOR MORE INFO 717-990-6999 ARIA'S CASE STUDY Phase I Phase II Phase III Phase IV Screenshot of the Typeform survey for user research 1. Understanding the user’s experience. I created an online Survey for those who purchased art online & had 10 participants 7. The majority of online art purchasers are once a year. The majority of art buyers are women. People buy art online more than in person. The objective to this survey To gain empirical data to challenge any and all hypothesis, and to discover the psychographic pf the purchasers of art online i.e. what are their needs, motivations, attitudes, and pain points. The 3 hypotheses 1. 2. 3. *Phase two will share the findings of this survey.
  8. 8. Key findings and Takeaways from research 2. Empathize with the user Connecting the dots in my research discovering themes, pain points, wants, and desires of users. An artist being approachable and being able to connect to the artist was the driving factor to purchasing art online. The 3 hypotheses were set against the data from the user research. It is true that women are the main art buyers online and that people buy art online more than in person however, one of the hypotheses were wrong, i.e. that are was mainly purchased one time a year. What was discovered is that art was purchased multiple times a year. Biggest takeaways, 1. 2. Aesthetics was the reasoning behind these purchases. 3. Quality was more important than viewing art as an investment. Going over my notes for the next step 9. FOR MORE INFO 717-990-6999 ARIA'S CASE STUDY 8. Phase I Phase II Phase III Phase IV
  9. 9. Persona “ H o w m i g h t w e c r e a t e a p o r t f o l i o w e b s i t e f o r A r i a t o d i s p l a y h e r a r t w o r k a l l , a n d m a k e i t e a s y f o r u s e r s t o c o n t a c t h e r f o r c o m m i s s i o n s ? ” Problem Statement ARIA'S CASE STUDY FOR MORE INFO 717-990-6999 Here I transformed findings from the surveys, interviews and research into a problem statement and a persona. Hand-drawn persona, Theresa Romero 9. The persona & problem statement will be the foundation to this project. All decisions will be made based upon this data.
  10. 10. 3. Brainstorm design solutions. Then I moved into brainstorming solutions for Aria. Some of the ideas generated will be for possible future roll-outs 11. FOR MORE INFO 717-990-6999 ARIA'S CASE STUDY Phase I Phase II Phase III Phase IV 10.
  11. 11. Evaluated data using the MoSCOW method to narrow down the solutions according to our clients budget and time constraints and the data that was gathered by the user research (put this at the end recommended two other roll- outs of this first iteration). Reason for this choice 4. Developing the solution. Narrowing down my options. White-boarding using the MoSCOW method Decided on THESE solutions: 1. I decided the must have for Aria is a website with 3 pages, Portfolio, About, and Contact. 2. For the contact form there needed to be a clear call to action with a simple layout. This feature directly correlates to the most significant pain point uncovered in the research of being difficult for users to connect to the artist. 3. Aria requested to have her social media links in the Footer of the website. 12. FOR MORE INFO 717-990-6999 ARIA'S CASE STUDY Phase I Phase II Phase III Phase V I 11.
  12. 12. FOR MORE INFO 717-990-6999 ARIA'S CASE STUDY Wire-frames for Home, About & Contact page The next step in the design, for a faster iteration I drew the wire-framing with marker and paper. 12.
  13. 13. Sketched out Aria's Site Map I built upon the wire-frame design creating a site map to identify the paths of the website. ARIA'S CASE STUDY FOR MORE INFO 717-990-6999 13. The goal is... To keep this site clean & easy to navigate. Our user persona, Theresa' pain-point, is not being able to connect directly to the artist.
  14. 14. User-flow + User Journey. My sketches of Aria's Task & Wire Flow ARIA'S CASE STUDY FOR MORE INFO 717-990-6999 14. The goal is... To create a good user journeyfor Aria's website and reduce cognitive load by making the website clean with natural transitions and flows.
  15. 15. 2. 1. 3. 4. 5. Creating Aria's Brand. My process for developing Aria's five elements of style for Aria's board. The goal To demonstrate Arias' approachable personality comes through & that she is easy to connect with. The essence of the brand What drove the branding was Aria's art that was geometric shapes using the contrast of colors that were bold or neutral in nature. The logo is an abstraction from Aria Osolos' name.The choice of pink in the logo was to exude her humanness. The O in the logo abstractly resembles the Earth for the geometry of nature. 15. FOR MORE INFO 717-990-6999 ARIA'S CASE STUDY Researching: Creating my mood board Finding the pattern of colors that Aria & I agreed upon Typography experimentation & final choice Rough sketches on my iPad using the app Procreate Logo & logo mark Insight: Design decisions
  16. 16. Aria's Finished Website 16. After 2 weeks and 52 cups of coffee, hours of non-stop Spotify streaming, and locking myself in my man-cave finally I present ...
  17. 17. ARIA'S CASE STUDY FOR MORE INFO 717-990-6999 17. I implemented a 12 point grid. I used the white space to let the design breathe and make it easier for users with the simplicity of the web design
  18. 18. ARIA'S CASE STUDY FOR MORE INFO 717-990-6999 18. Aria wanted her users to be able to connect with her also on social media. In addition, using the larger font makes it easier to find & lessens eye strain.
  19. 19. ARIA'S CASE STUDY FOR MORE INFO 717-990-6999 19. The copy here serves a a big purpose. As you know, the biggest complaint about online art buyers is that they cannot get in touch with artist. This copy explicitly gives a promise to the user that this will not be their experience.
  20. 20. FOR MORE INFO 717-990-6999 The outcomes, what I learned, & challenges of this project etc... ARIA'S CASE STUDY 20. I ensured the website was delivered on time without any scope creep and quickly got the product to market. There were challenges of my own bias. I had to resist making assumptions- it may have been too close to home as an artist who sold work online. This was partly kept in check with the collected data. Another challenge I had was, finding direct client competition that were at the same business maturity as Aria. I solved this by finding up-and-coming artists online and then checking their portfolios. Since Aria is not an actual client, I am aware that there is a lack of real-life constraints, and there are many more variables in a real-life scenario when working with a living breathing client. I am beginning to do contract work. This will give me real-world experiences that I may add (depending if there is a NDA) these future projects to my portfolio. I would have gone deeper into my brand design process. Business outcome/s What I learned The limitations & challenges I faced What I would like to have added to this project
  21. 21. FOR MORE INFO 717-990-6999 The outcomes, what I learned, & challenges of this project etc ARIA'S CASE STUDY 21. Also ,due to the constraints of time that I gave myself, I realized that if there was more time for the project or if I was working with a team. I could gain a wider net of target users to participate in qualitative and quantitative research. This was by no means the only aspect of what I left out, but one of the most notable instances is when I noticed a gap in my data. The gap was insight into the difference between those who bought prints vs. originals. The blind spot happened with my survey and interviewing for the first round I resolved the issue by reaching out directly to those who took my survey and wrote them a direct message to fill this gap in data. I found out that out of the 10, 5 purchased both. The limitations & challenges continued Things I left out Due to the size of this case study, I had to leave out the process of my Facebook poll and interviewing. The data contributed to the problem statement and developing the user persona.
  22. 22. FOR MORE INFO 717-990-6999 Studying my craft. What I am learning about currently 1. I am reading Branding: In Five and a Half Steps by Michael Johnson I want to dive deeper in designing a better process for projects building brand systems 2. This podcast How To Draw A Startup by Mark Grambau is about illustration in tech and I am reverse engineering their process for building branding systems using illustration. 3.Illustration For Designers by Greg Gunn is a course that I am currently taking. ABOUT 22. My self-directed curriculum I learned by practicing JavaScript everyday for the past year. I also dove deeper into UX/UI theory and practical knowledge through books, courses, and experimental projects.
  23. 23. FOR MORE INFO 717-990-6999 Studying my craft. UI design & illustration Sketches wire-frames & design concepts Sitemap & prototype design Visual designing & branding Figma, Sketch, Photoshop, Illustrator, Procreate, & Affinity Designer Notion & Trello Field study & observation User flow, persona creation, & Usability testing Design Skills Copywriting User empathy and design thinking Project management Information Architecture Social media marketing Information architecture Motivational speaking Coaching Online course creation Other Skills Front-end development Interaction & responsive web development React/JavaScript ES5, ES6 Html-5/CSS3 Rest API Git/Gitbash Npm & Yarn JSON VS code Development Skills The Ultimate Guide to UX by David Travis Intro To UX Design by SuperHi Visual Design & Branding by SuperHi Plan, Design + Code Your First Website by SuperHi CSS Grid by Wes Bos Courses I’ve taken Ui Breakfast w/ Jane Portman Front End Happy Hour w/ host Ryan Burgess UX Hustle Podcast I like Events ABOUT 23. Sketching User Experiences: Getting The Design Right & The Right Design by Bill Buxton Don’t Make Me Think: Revisited by Steve Krug Books I love
  24. 24. The next step If you like what you see, feel free to reach out to me darbyslaton@gmail.com (717 ) 990-6999 Let’s connect CONTACT 24.

UX/UI designer-developer | I am a UX/UI Designer-Developer and storyteller who loves working with companies and solopreneurs who aren't afraid to live out of authenticity. https://www.linkedin.com/in/darbyslaton/

Views

Total views

94

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×