277 lines
No EOL
39 KiB
HTML
277 lines
No EOL
39 KiB
HTML
<!doctype html><html lang=en-us dir=ltr><head><meta charset=utf-8><meta name=viewport content="width=device-width"><meta name=color-scheme content="dark"><meta property="og:title" content="Design of a responsive Website for a major German city"><meta property="og:description" content="Problem statement Given the many, and sometimes contradictory sources of information that exist today, it isn’t easy to find reliable information. Moreover, busy lives, make it harder to be updated about what is going on in the city, and given the prevalence of the internet, information needs to be shared online to reach most people. Further, the heavy workload faced by city workers requires solutions that make procedures faster and smoother both for city hall workers and citizens."><meta property="og:type" content="article"><meta property="og:url" content="https://melissasarria.site/projects/smartberg/"><meta property="article:section" content="projects"><meta property="article:published_time" content="2024-03-31T00:00:00+00:00"><meta property="article:modified_time" content="2024-03-31T00:00:00+00:00"><title>Design of a responsive Website for a major German city</title><link rel=stylesheet href=/css/main.min.0f85edd55584a5f72b3f9e2b56177162130f79f6c88a4ccc25b3d1bc96743ebd.css integrity="sha256-D4Xt1VWEpfcrP54rVhdxYhMPefbIikzMJbPRvJZ0Pr0=" crossorigin=anonymous><link rel=stylesheet type=text/css href=/icons/fontawesome.css><script src=/js/main.min.e5d39ccfb0f0cea6d6d76d9d863adeee51fe8bf9d85844f3c4ed0b7c33f38388.js integrity="sha256-5dOcz7DwzqbW122dhjre7lH+i/nYWETzxO0LfDPzg4g=" crossorigin=anonymous></script></head><body><header><h2><a href=/>UX Portfolio</a></h2><h2><a href=/cv/>CV</a></h2></header><main><article class=content><div class=title><h1>Design of a responsive Website for a major German city</h1></div><div class=card><div class=image><a href=/images/projects/smartberg/image.png><picture><source type=image/avif srcset="/images/projects/smartberg/image-320.png.avif 320w,
|
||
/images/projects/smartberg/image-640.png.avif 640w,
|
||
/images/projects/smartberg/image-960.png.avif 960w,
|
||
/images/projects/smartberg/image-1280.png.avif 1280w,
|
||
/images/projects/smartberg/image.png.avif 940w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/image-320.png.webp 320w,
|
||
/images/projects/smartberg/image-640.png.webp 640w,
|
||
/images/projects/smartberg/image-960.png.webp 960w,
|
||
/images/projects/smartberg/image-1280.png.webp 1280w,
|
||
/images/projects/smartberg/image.png.webp 940w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=940 height=744 srcset="/images/projects/smartberg/image-320.png 320w,
|
||
/images/projects/smartberg/image-640.png 640w,
|
||
/images/projects/smartberg/image-960.png 960w,
|
||
/images/projects/smartberg/image-1280.png 1280w,
|
||
/images/projects/smartberg/image.png 940w" src=/images/projects/smartberg/image.png alt="Cover Image" loading=lazy decoding=async></picture></a></div><div class=content><h1>Project Overview</h1><p>As part of my UX training "Certified UX-Designer", I designed a responsive Website for Smartberg, a major German city. The project goal was to create a barrier-free, user interface, that equally well adapts to the needs of the city's heterogeneous target group. Such a group comprises people from all age ranges and includes Smartberg's citizens, students, tourists and employees of the city administration. Moreover, this project included the development of the city's visual identity, which stands from the intersection of history, cultural traditions, modernity and an ecologically oriented Smart City, with digital administration.</p></div></div><h1 id=problem-statement>Problem statement</h1><p>Given the many, and sometimes contradictory sources of information that exist today, <strong>it isn’t easy to find reliable information</strong>. Moreover, busy lives, make it <strong>harder to be updated about what is going on in the city</strong>, and given the prevalence of the internet, information needs to be shared online to reach most people. Further, the heavy workload faced by city workers requires solutions that make procedures faster and smoother both for city hall workers and citizens.</p><h1 id=solution-proposal>Solution proposal</h1><p>A responsive Website that <strong>unifies and offers trustworthy information and services</strong> to citizens and visitors of the city. Additionally, a <strong>mobile App for citizens,</strong> that allows them to <strong>easily handle their city hall procedures</strong> and stay <strong>updated and reminded of events</strong> of interest in the city.</p><p>This solution needs to be equally well accessible from any device and stick to conventional functions and interactions, given the heterogeneity of the city’s target group.</p><h2 id=understand>Understand</h2><h3 id=project-goals>Project goals</h3><p>As stated, the project brief consisted of the design of a responsive Website for Smartberg, which needs to adapt and help solve the needs of the different target groups of the city. From a stakeholder perspective, the goals that want to be achieved, based on each target group, are:</p><p><strong>Citizens of Smartberg</strong></p><ul><li>Use citizen services, information and forms for administrative matters.</li><li>Use information services about all happenings and events in the city.</li><li>Community building - establishment of a city community for the exchange of citizens.</li><li>Involve citizens in decision-making processes (open democracy).</li></ul><p><strong>Students</strong></p><ul><li>Student offers and accommodation services.</li><li>Use cultural offerings (concerts, theatre, cinema, readings…).</li><li>Enjoy nightlife (parties, clubs, concerts).</li><li>Take advantage of culinary offers (restaurants, bars, pubs, cafés …).</li></ul><p><strong>Tourists</strong></p><ul><li>Visit places of interest and cultural institutions.</li><li>Book accommodation (hotels, guesthouses, flats…).</li><li>Take advantage of cultural offerings (concerts, theatre, cinema, readings…).</li><li>Visit restaurants, bars, pubs and cafés.</li></ul><p><strong>Employees of the city administration</strong></p><ul><li>Relieve the city administration through online citizen services.</li><li>Increase attractiveness through tourist offers and hospitality services.</li><li>Provision of educational and cultural offers.</li><li>Connection and integration of social media offerings.</li></ul><h3 id=user-research>User Research</h3><p>As part of Smartberg’s attempt to become an attractive city brand for tourists, it was thought to expand the city website into a <strong>service platform</strong>. Thus, I conducted a user interview to develop content and service ideas for tourists, based on their <strong>needs before and during a visit to Smartberg.</strong></p><p>Firstly, I considered Germany´s “Sinus-Milieus” classification (groups of like-minded people within a population with a similar outlook on life and values). And within this classification, the <strong>“socio-ecological milieu” group segment</strong>. The purpose of this was having a general understanding of the mindset and motivations that might move Smartberg’s target group of tourists (sustainability and culture seekers).</p><p>Further, I stated the research goals and formulated the main questions for a <strong>user interview.</strong></p><h4 id=research-goals-and-questionnaire>Research goals and questionnaire</h4><ul><li>What information is important for users (tourists) to have access to?</li><li>Which values influence their travel behaviour?</li><li>Which services and content would they like to have access to?</li><li>What makes them choose a destination over others?</li><li>What problems do they face when travelling that could be solved by the website?</li></ul><p><strong>Q1</strong> What aspects are important to you when choosing a holiday destination?</p><p>(e.g. entertainment, safety, price, nature, accessibility).</p><p><strong>Q2</strong> What makes a good travel destination for you? What is your idea of a good holiday destination?</p><p><strong>Q3</strong> Are there certain activities that you like to do when travelling? Which ones?</p><p><strong>Q4</strong> Do you inform yourself about your destination before travelling? How do you find out about your destination before/during your trip? (activities, events, where to eat, transport)</p><p><strong>Q5</strong> What information would you like to know about your destination before travelling?</p><p><strong>Q6</strong> Do you regularly use any services/apps when travelling? (e.g. Google Maps, Vegan Cow, All Trails, tourist information)? Which ones?</p><h4 id=empathy-map>Empathy map</h4><p>After delving into the <em>socio-ecological milieu</em>, and conducting a one-person interview, I condensed the information into an empathy map to gain more insight into the user attitudes and experiences on travelling. The particular emphasis here was on understanding <strong>what circumstances might affect the person emotionally</strong> and <strong>what social influences they are exposed to.</strong></p><p><a href=/images/projects/smartberg/empathy_map.png><picture><source type=image/avif srcset="/images/projects/smartberg/empathy_map-320.png.avif 320w,
|
||
/images/projects/smartberg/empathy_map-640.png.avif 640w,
|
||
/images/projects/smartberg/empathy_map-960.png.avif 960w,
|
||
/images/projects/smartberg/empathy_map-1280.png.avif 1280w,
|
||
/images/projects/smartberg/empathy_map.png.avif 393w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/empathy_map-320.png.webp 320w,
|
||
/images/projects/smartberg/empathy_map-640.png.webp 640w,
|
||
/images/projects/smartberg/empathy_map-960.png.webp 960w,
|
||
/images/projects/smartberg/empathy_map-1280.png.webp 1280w,
|
||
/images/projects/smartberg/empathy_map.png.webp 393w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=393 height=547 srcset="/images/projects/smartberg/empathy_map-320.png 320w,
|
||
/images/projects/smartberg/empathy_map-640.png 640w,
|
||
/images/projects/smartberg/empathy_map-960.png 960w,
|
||
/images/projects/smartberg/empathy_map-1280.png 1280w,
|
||
/images/projects/smartberg/empathy_map.png 393w" src=/images/projects/smartberg/empathy_map.png alt="Empathy Map" loading=lazy decoding=async></picture></a></p><h4 id=user-persona>User persona</h4><p>I translated insights from the empathy map into a user persona, to have a more complete reference of the <strong>user’s mindset and attitudes</strong>, to guide future design decisions.</p><p><a href=/images/projects/smartberg/user_persona.png><picture><source type=image/avif srcset="/images/projects/smartberg/user_persona-320.png.avif 320w,
|
||
/images/projects/smartberg/user_persona-640.png.avif 640w,
|
||
/images/projects/smartberg/user_persona-960.png.avif 960w,
|
||
/images/projects/smartberg/user_persona-1280.png.avif 1280w,
|
||
/images/projects/smartberg/user_persona.png.avif 1006w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/user_persona-320.png.webp 320w,
|
||
/images/projects/smartberg/user_persona-640.png.webp 640w,
|
||
/images/projects/smartberg/user_persona-960.png.webp 960w,
|
||
/images/projects/smartberg/user_persona-1280.png.webp 1280w,
|
||
/images/projects/smartberg/user_persona.png.webp 1006w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1006 height=799 srcset="/images/projects/smartberg/user_persona-320.png 320w,
|
||
/images/projects/smartberg/user_persona-640.png 640w,
|
||
/images/projects/smartberg/user_persona-960.png 960w,
|
||
/images/projects/smartberg/user_persona-1280.png 1280w,
|
||
/images/projects/smartberg/user_persona.png 1006w" src=/images/projects/smartberg/user_persona.png alt="User Persona" loading=lazy decoding=async></picture></a></p><h4 id=customer-journey>Customer Journey</h4><p>Based on the user research, I created a Customer Journey to understand the whole process a user might go through while interacting with the Smartberg brand. The main purpose was to <strong>identify possible obstacles (annoyances)</strong> the user might face and the <strong>resulting opportunities (potentials) to improve their overall experience.</strong></p><p><a href=/images/projects/smartberg/customer_journey.jpg><picture><source type=image/avif srcset="/images/projects/smartberg/customer_journey-320.jpg.avif 320w,
|
||
/images/projects/smartberg/customer_journey-640.jpg.avif 640w,
|
||
/images/projects/smartberg/customer_journey-960.jpg.avif 960w,
|
||
/images/projects/smartberg/customer_journey-1280.jpg.avif 1280w,
|
||
/images/projects/smartberg/customer_journey.jpg.avif 4966w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/customer_journey-320.jpg.webp 320w,
|
||
/images/projects/smartberg/customer_journey-640.jpg.webp 640w,
|
||
/images/projects/smartberg/customer_journey-960.jpg.webp 960w,
|
||
/images/projects/smartberg/customer_journey-1280.jpg.webp 1280w,
|
||
/images/projects/smartberg/customer_journey.jpg.webp 4966w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=4966 height=3297 srcset="/images/projects/smartberg/customer_journey-320.jpg 320w,
|
||
/images/projects/smartberg/customer_journey-640.jpg 640w,
|
||
/images/projects/smartberg/customer_journey-960.jpg 960w,
|
||
/images/projects/smartberg/customer_journey-1280.jpg 1280w,
|
||
/images/projects/smartberg/customer_journey.jpg 4966w" src=/images/projects/smartberg/customer_journey.jpg alt="Customer Journey" loading=lazy decoding=async></picture></a></p><h4 id=user-scenario-use-cases-and-user-stories>User Scenario, Use Cases and User Stories</h4><p>As part of the development of the tourist offers section of Smartberg, I conceived a user scenario to analyse possible processes and paths, the user might go through. This scenario displays the process of visiting Smartberg’s website to find out ideas for family trips until the booking of an activity.</p><p><a href=/images/projects/smartberg/user_scenario.png><picture><source type=image/avif srcset="/images/projects/smartberg/user_scenario-320.png.avif 320w,
|
||
/images/projects/smartberg/user_scenario-640.png.avif 640w,
|
||
/images/projects/smartberg/user_scenario-960.png.avif 960w,
|
||
/images/projects/smartberg/user_scenario-1280.png.avif 1280w,
|
||
/images/projects/smartberg/user_scenario.png.avif 787w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/user_scenario-320.png.webp 320w,
|
||
/images/projects/smartberg/user_scenario-640.png.webp 640w,
|
||
/images/projects/smartberg/user_scenario-960.png.webp 960w,
|
||
/images/projects/smartberg/user_scenario-1280.png.webp 1280w,
|
||
/images/projects/smartberg/user_scenario.png.webp 787w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=787 height=634 srcset="/images/projects/smartberg/user_scenario-320.png 320w,
|
||
/images/projects/smartberg/user_scenario-640.png 640w,
|
||
/images/projects/smartberg/user_scenario-960.png 960w,
|
||
/images/projects/smartberg/user_scenario-1280.png 1280w,
|
||
/images/projects/smartberg/user_scenario.png 787w" src=/images/projects/smartberg/user_scenario.png alt="User Scenario" loading=lazy decoding=async></picture></a></p><h4 id=usability-testing>Usability testing</h4><p>For the tourist section of the Smartberg website, is planned to include a section showcasing popular excursion destinations and attractions. To gain an <strong>understanding of the use of comparable websites</strong>, I carried out a usability test using the Think Out Loud method on “Freiburg’s top 10 sights”. The main goal was to identify usability successes, shortcomings and potentials, that can be implemented in the Smartberg website.</p><p><a href=/images/projects/smartberg/usability_testing.png><picture><source type=image/avif srcset="/images/projects/smartberg/usability_testing-320.png.avif 320w,
|
||
/images/projects/smartberg/usability_testing-640.png.avif 640w,
|
||
/images/projects/smartberg/usability_testing-960.png.avif 960w,
|
||
/images/projects/smartberg/usability_testing-1280.png.avif 1280w,
|
||
/images/projects/smartberg/usability_testing.png.avif 1385w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/usability_testing-320.png.webp 320w,
|
||
/images/projects/smartberg/usability_testing-640.png.webp 640w,
|
||
/images/projects/smartberg/usability_testing-960.png.webp 960w,
|
||
/images/projects/smartberg/usability_testing-1280.png.webp 1280w,
|
||
/images/projects/smartberg/usability_testing.png.webp 1385w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1385 height=1019 srcset="/images/projects/smartberg/usability_testing-320.png 320w,
|
||
/images/projects/smartberg/usability_testing-640.png 640w,
|
||
/images/projects/smartberg/usability_testing-960.png 960w,
|
||
/images/projects/smartberg/usability_testing-1280.png 1280w,
|
||
/images/projects/smartberg/usability_testing.png 1385w" src=/images/projects/smartberg/usability_testing.png alt="Usability Testing" loading=lazy decoding=async></picture></a></p><h4 id=swot-analyze>Swot Analyze</h4><p>I further did a competitive analysis to concretize the strengths and weaknesses of potential competitors (Freiburg).</p><p><a href=/images/projects/smartberg/swot_analyze.png><picture><source type=image/avif srcset="/images/projects/smartberg/swot_analyze-320.png.avif 320w,
|
||
/images/projects/smartberg/swot_analyze-640.png.avif 640w,
|
||
/images/projects/smartberg/swot_analyze-960.png.avif 960w,
|
||
/images/projects/smartberg/swot_analyze-1280.png.avif 1280w,
|
||
/images/projects/smartberg/swot_analyze.png.avif 957w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/swot_analyze-320.png.webp 320w,
|
||
/images/projects/smartberg/swot_analyze-640.png.webp 640w,
|
||
/images/projects/smartberg/swot_analyze-960.png.webp 960w,
|
||
/images/projects/smartberg/swot_analyze-1280.png.webp 1280w,
|
||
/images/projects/smartberg/swot_analyze.png.webp 957w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=957 height=601 srcset="/images/projects/smartberg/swot_analyze-320.png 320w,
|
||
/images/projects/smartberg/swot_analyze-640.png 640w,
|
||
/images/projects/smartberg/swot_analyze-960.png 960w,
|
||
/images/projects/smartberg/swot_analyze-1280.png 1280w,
|
||
/images/projects/smartberg/swot_analyze.png 957w" src=/images/projects/smartberg/swot_analyze.png alt="Swot Analyze" loading=lazy decoding=async></picture></a></p><h4 id=value-proposition>Value Proposition</h4><p>One of the project’s goals is to enhance the quality of life of Smartberg’s citizens by facilitating city hall procedures. Hence, I developed a value proposition, which takes some of the <strong>citizens’ tasks/activities</strong> and traces a proposal of <strong>how the product can bring value to the citizen</strong>, based on their needs.</p><p><a href=/images/projects/smartberg/VPC.png><picture><source type=image/avif srcset="/images/projects/smartberg/VPC-320.png.avif 320w,
|
||
/images/projects/smartberg/VPC-640.png.avif 640w,
|
||
/images/projects/smartberg/VPC-960.png.avif 960w,
|
||
/images/projects/smartberg/VPC-1280.png.avif 1280w,
|
||
/images/projects/smartberg/VPC.png.avif 1967w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/VPC-320.png.webp 320w,
|
||
/images/projects/smartberg/VPC-640.png.webp 640w,
|
||
/images/projects/smartberg/VPC-960.png.webp 960w,
|
||
/images/projects/smartberg/VPC-1280.png.webp 1280w,
|
||
/images/projects/smartberg/VPC.png.webp 1967w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1967 height=1218 srcset="/images/projects/smartberg/VPC-320.png 320w,
|
||
/images/projects/smartberg/VPC-640.png 640w,
|
||
/images/projects/smartberg/VPC-960.png 960w,
|
||
/images/projects/smartberg/VPC-1280.png 1280w,
|
||
/images/projects/smartberg/VPC.png 1967w" src=/images/projects/smartberg/VPC.png alt=VPC loading=lazy decoding=async></picture></a></p><h2 id=ideation>Ideation</h2><h3 id=story-card>Story Card</h3><p>I wrote down a Story Card for applying for a new passport on the Smartberg website. The purpose of this is to <strong>identify the problems that need to be solved and the solutions that will best meet citizens’ needs</strong> while prioritizing the features to be developed.</p><p><a href=/images/projects/smartberg/story_cards.png><picture><source type=image/avif srcset="/images/projects/smartberg/story_cards-320.png.avif 320w,
|
||
/images/projects/smartberg/story_cards-640.png.avif 640w,
|
||
/images/projects/smartberg/story_cards-960.png.avif 960w,
|
||
/images/projects/smartberg/story_cards-1280.png.avif 1280w,
|
||
/images/projects/smartberg/story_cards.png.avif 869w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/story_cards-320.png.webp 320w,
|
||
/images/projects/smartberg/story_cards-640.png.webp 640w,
|
||
/images/projects/smartberg/story_cards-960.png.webp 960w,
|
||
/images/projects/smartberg/story_cards-1280.png.webp 1280w,
|
||
/images/projects/smartberg/story_cards.png.webp 869w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=869 height=710 srcset="/images/projects/smartberg/story_cards-320.png 320w,
|
||
/images/projects/smartberg/story_cards-640.png 640w,
|
||
/images/projects/smartberg/story_cards-960.png 960w,
|
||
/images/projects/smartberg/story_cards-1280.png 1280w,
|
||
/images/projects/smartberg/story_cards.png 869w" src=/images/projects/smartberg/story_cards.png alt="Story Cards" loading=lazy decoding=async></picture></a></p><p><a href=/images/projects/smartberg/user_story.png><picture><source type=image/avif srcset="/images/projects/smartberg/user_story-320.png.avif 320w,
|
||
/images/projects/smartberg/user_story-640.png.avif 640w,
|
||
/images/projects/smartberg/user_story-960.png.avif 960w,
|
||
/images/projects/smartberg/user_story-1280.png.avif 1280w,
|
||
/images/projects/smartberg/user_story.png.avif 1728w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/user_story-320.png.webp 320w,
|
||
/images/projects/smartberg/user_story-640.png.webp 640w,
|
||
/images/projects/smartberg/user_story-960.png.webp 960w,
|
||
/images/projects/smartberg/user_story-1280.png.webp 1280w,
|
||
/images/projects/smartberg/user_story.png.webp 1728w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1728 height=1221 srcset="/images/projects/smartberg/user_story-320.png 320w,
|
||
/images/projects/smartberg/user_story-640.png 640w,
|
||
/images/projects/smartberg/user_story-960.png 960w,
|
||
/images/projects/smartberg/user_story-1280.png 1280w,
|
||
/images/projects/smartberg/user_story.png 1728w" src=/images/projects/smartberg/user_story.png alt="User Story" loading=lazy decoding=async></picture></a></p><h3 id=card-sorting>Card Sorting</h3><p>I wrote down all the content ideas for the Smartberg website and conducted the Card Sorting method with one person. The Card Sorting showed how current category labels (names) were understood, and which contents were thought as belonging to the same category, and therefore expected to be found under the same section. All in all, this allowed <strong>setting category names, spotting redundant content and finding the most appropriate content structure for the website.</strong></p><p><a href=/images/projects/smartberg/card_sorting.png><picture><source type=image/avif srcset="/images/projects/smartberg/card_sorting-320.png.avif 320w,
|
||
/images/projects/smartberg/card_sorting-640.png.avif 640w,
|
||
/images/projects/smartberg/card_sorting-960.png.avif 960w,
|
||
/images/projects/smartberg/card_sorting-1280.png.avif 1280w,
|
||
/images/projects/smartberg/card_sorting.png.avif 4922w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/card_sorting-320.png.webp 320w,
|
||
/images/projects/smartberg/card_sorting-640.png.webp 640w,
|
||
/images/projects/smartberg/card_sorting-960.png.webp 960w,
|
||
/images/projects/smartberg/card_sorting-1280.png.webp 1280w,
|
||
/images/projects/smartberg/card_sorting.png.webp 4922w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=4922 height=2107 srcset="/images/projects/smartberg/card_sorting-320.png 320w,
|
||
/images/projects/smartberg/card_sorting-640.png 640w,
|
||
/images/projects/smartberg/card_sorting-960.png 960w,
|
||
/images/projects/smartberg/card_sorting-1280.png 1280w,
|
||
/images/projects/smartberg/card_sorting.png 4922w" src=/images/projects/smartberg/card_sorting.png alt="Card Sorting" loading=lazy decoding=async></picture></a></p><h3 id=user-flow>User Flow</h3><p>To better understand how users move through the Smartberg website, I created a user flow that shows possible paths from the homepage to booking a theatre show. This user flow allows for a visual reference to the <strong>possible steps and paths the user can take</strong>, and thus the <strong>identification of steps that can be optimised for the user to reach their goal more easily.</strong></p><p><a href=/images/projects/smartberg/user_flow.png><picture><source type=image/avif srcset="/images/projects/smartberg/user_flow-320.png.avif 320w,
|
||
/images/projects/smartberg/user_flow-640.png.avif 640w,
|
||
/images/projects/smartberg/user_flow-960.png.avif 960w,
|
||
/images/projects/smartberg/user_flow-1280.png.avif 1280w,
|
||
/images/projects/smartberg/user_flow.png.avif 963w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/user_flow-320.png.webp 320w,
|
||
/images/projects/smartberg/user_flow-640.png.webp 640w,
|
||
/images/projects/smartberg/user_flow-960.png.webp 960w,
|
||
/images/projects/smartberg/user_flow-1280.png.webp 1280w,
|
||
/images/projects/smartberg/user_flow.png.webp 963w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=963 height=1610 srcset="/images/projects/smartberg/user_flow-320.png 320w,
|
||
/images/projects/smartberg/user_flow-640.png 640w,
|
||
/images/projects/smartberg/user_flow-960.png 960w,
|
||
/images/projects/smartberg/user_flow-1280.png 1280w,
|
||
/images/projects/smartberg/user_flow.png 963w" src=/images/projects/smartberg/user_flow.png alt="User Flow" loading=lazy decoding=async></picture></a></p><h2 id=design>Design</h2><h3 id=sketch>Sketch</h3><p>Through sketches, I created an initial concept for individual screens that display the user flow (homepage–> booking a theatre show) described above.</p><p><a href=/images/projects/smartberg/sketch.jpeg><picture><source type=image/avif srcset="/images/projects/smartberg/sketch-320.jpeg.avif 320w,
|
||
/images/projects/smartberg/sketch-640.jpeg.avif 640w,
|
||
/images/projects/smartberg/sketch-960.jpeg.avif 960w,
|
||
/images/projects/smartberg/sketch-1280.jpeg.avif 1280w,
|
||
/images/projects/smartberg/sketch.jpeg.avif 1772w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/sketch-320.jpeg.webp 320w,
|
||
/images/projects/smartberg/sketch-640.jpeg.webp 640w,
|
||
/images/projects/smartberg/sketch-960.jpeg.webp 960w,
|
||
/images/projects/smartberg/sketch-1280.jpeg.webp 1280w,
|
||
/images/projects/smartberg/sketch.jpeg.webp 1772w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1772 height=1343 srcset="/images/projects/smartberg/sketch-320.jpeg 320w,
|
||
/images/projects/smartberg/sketch-640.jpeg 640w,
|
||
/images/projects/smartberg/sketch-960.jpeg 960w,
|
||
/images/projects/smartberg/sketch-1280.jpeg 1280w,
|
||
/images/projects/smartberg/sketch.jpeg 1772w" src=/images/projects/smartberg/sketch.jpeg alt=Sketch loading=lazy decoding=async></picture></a></p><h3 id=wireframe>Wireframe</h3><p><em><strong>Website, desktop version</strong></em></p><p>I developed wireframes displaying the individual screen sequence for the theatre booking user flow.</p><p><a href=/images/projects/smartberg/wireframe1.png><picture><source type=image/avif srcset="/images/projects/smartberg/wireframe1-320.png.avif 320w,
|
||
/images/projects/smartberg/wireframe1-640.png.avif 640w,
|
||
/images/projects/smartberg/wireframe1-960.png.avif 960w,
|
||
/images/projects/smartberg/wireframe1-1280.png.avif 1280w,
|
||
/images/projects/smartberg/wireframe1.png.avif 928w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/wireframe1-320.png.webp 320w,
|
||
/images/projects/smartberg/wireframe1-640.png.webp 640w,
|
||
/images/projects/smartberg/wireframe1-960.png.webp 960w,
|
||
/images/projects/smartberg/wireframe1-1280.png.webp 1280w,
|
||
/images/projects/smartberg/wireframe1.png.webp 928w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=928 height=774 srcset="/images/projects/smartberg/wireframe1-320.png 320w,
|
||
/images/projects/smartberg/wireframe1-640.png 640w,
|
||
/images/projects/smartberg/wireframe1-960.png 960w,
|
||
/images/projects/smartberg/wireframe1-1280.png 1280w,
|
||
/images/projects/smartberg/wireframe1.png 928w" src=/images/projects/smartberg/wireframe1.png alt="Wireframe 1" loading=lazy decoding=async></picture></a></p><p><a href=/images/projects/smartberg/wireframe2.png><picture><source type=image/avif srcset="/images/projects/smartberg/wireframe2-320.png.avif 320w,
|
||
/images/projects/smartberg/wireframe2-640.png.avif 640w,
|
||
/images/projects/smartberg/wireframe2-960.png.avif 960w,
|
||
/images/projects/smartberg/wireframe2-1280.png.avif 1280w,
|
||
/images/projects/smartberg/wireframe2.png.avif 1344w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/wireframe2-320.png.webp 320w,
|
||
/images/projects/smartberg/wireframe2-640.png.webp 640w,
|
||
/images/projects/smartberg/wireframe2-960.png.webp 960w,
|
||
/images/projects/smartberg/wireframe2-1280.png.webp 1280w,
|
||
/images/projects/smartberg/wireframe2.png.webp 1344w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1344 height=523 srcset="/images/projects/smartberg/wireframe2-320.png 320w,
|
||
/images/projects/smartberg/wireframe2-640.png 640w,
|
||
/images/projects/smartberg/wireframe2-960.png 960w,
|
||
/images/projects/smartberg/wireframe2-1280.png 1280w,
|
||
/images/projects/smartberg/wireframe2.png 1344w" src=/images/projects/smartberg/wireframe2.png alt="Wireframe 2" loading=lazy decoding=async></picture></a></p><p><em><strong>Website, mobile version-Homepage</strong></em></p><p><a href=/images/projects/smartberg/Homepage.png><picture><source type=image/avif srcset="/images/projects/smartberg/Homepage-320.png.avif 320w,
|
||
/images/projects/smartberg/Homepage-640.png.avif 640w,
|
||
/images/projects/smartberg/Homepage-960.png.avif 960w,
|
||
/images/projects/smartberg/Homepage-1280.png.avif 1280w,
|
||
/images/projects/smartberg/Homepage.png.avif 360w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/Homepage-320.png.webp 320w,
|
||
/images/projects/smartberg/Homepage-640.png.webp 640w,
|
||
/images/projects/smartberg/Homepage-960.png.webp 960w,
|
||
/images/projects/smartberg/Homepage-1280.png.webp 1280w,
|
||
/images/projects/smartberg/Homepage.png.webp 360w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=360 height=3430 srcset="/images/projects/smartberg/Homepage-320.png 320w,
|
||
/images/projects/smartberg/Homepage-640.png 640w,
|
||
/images/projects/smartberg/Homepage-960.png 960w,
|
||
/images/projects/smartberg/Homepage-1280.png 1280w,
|
||
/images/projects/smartberg/Homepage.png 360w" src=/images/projects/smartberg/Homepage.png alt=Homepage.png loading=lazy decoding=async></picture></a></p><p><em><strong>Smartberg’s App</strong></em></p><p>I conceptualized a mobile App in addition to the responsive website. The app is aimed exclusively at the town’s citizens. The focus is on citizen services, catering and cultural offers. Here, I designed the mobile app process for registering a car with a preferred licence plate number.</p><p><a href=/images/projects/smartberg/app1.png><picture><source type=image/avif srcset="/images/projects/smartberg/app1-320.png.avif 320w,
|
||
/images/projects/smartberg/app1-640.png.avif 640w,
|
||
/images/projects/smartberg/app1-960.png.avif 960w,
|
||
/images/projects/smartberg/app1-1280.png.avif 1280w,
|
||
/images/projects/smartberg/app1.png.avif 1417w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/app1-320.png.webp 320w,
|
||
/images/projects/smartberg/app1-640.png.webp 640w,
|
||
/images/projects/smartberg/app1-960.png.webp 960w,
|
||
/images/projects/smartberg/app1-1280.png.webp 1280w,
|
||
/images/projects/smartberg/app1.png.webp 1417w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1417 height=490 srcset="/images/projects/smartberg/app1-320.png 320w,
|
||
/images/projects/smartberg/app1-640.png 640w,
|
||
/images/projects/smartberg/app1-960.png 960w,
|
||
/images/projects/smartberg/app1-1280.png 1280w,
|
||
/images/projects/smartberg/app1.png 1417w" src=/images/projects/smartberg/app1.png alt="App 1" loading=lazy decoding=async></picture></a></p><p><a href=/images/projects/smartberg/app2.png><picture><source type=image/avif srcset="/images/projects/smartberg/app2-320.png.avif 320w,
|
||
/images/projects/smartberg/app2-640.png.avif 640w,
|
||
/images/projects/smartberg/app2-960.png.avif 960w,
|
||
/images/projects/smartberg/app2-1280.png.avif 1280w,
|
||
/images/projects/smartberg/app2.png.avif 1198w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/app2-320.png.webp 320w,
|
||
/images/projects/smartberg/app2-640.png.webp 640w,
|
||
/images/projects/smartberg/app2-960.png.webp 960w,
|
||
/images/projects/smartberg/app2-1280.png.webp 1280w,
|
||
/images/projects/smartberg/app2.png.webp 1198w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1198 height=841 srcset="/images/projects/smartberg/app2-320.png 320w,
|
||
/images/projects/smartberg/app2-640.png 640w,
|
||
/images/projects/smartberg/app2-960.png 960w,
|
||
/images/projects/smartberg/app2-1280.png 1280w,
|
||
/images/projects/smartberg/app2.png 1198w" src=/images/projects/smartberg/app2.png alt="App 2" loading=lazy decoding=async></picture></a></p><h3 id=hi-fi-prototype>Hi-Fi Prototype</h3><p>Based on the user research and previous UX analyses, I created a high fidelity prototype, which corresponds to the MVP (Minimum Viable Product) for Smartberg’s website. The visual design emphasizes culture and tradition. The UI builds on the city’s look, by taking the color palette from the city’s arquitecture and opting a more traditional-looking font.</p><p><a href=/images/projects/smartberg/prototype1.png><picture><source type=image/avif srcset="/images/projects/smartberg/prototype1-320.png.avif 320w,
|
||
/images/projects/smartberg/prototype1-640.png.avif 640w,
|
||
/images/projects/smartberg/prototype1-960.png.avif 960w,
|
||
/images/projects/smartberg/prototype1-1280.png.avif 1280w,
|
||
/images/projects/smartberg/prototype1.png.avif 1009w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/prototype1-320.png.webp 320w,
|
||
/images/projects/smartberg/prototype1-640.png.webp 640w,
|
||
/images/projects/smartberg/prototype1-960.png.webp 960w,
|
||
/images/projects/smartberg/prototype1-1280.png.webp 1280w,
|
||
/images/projects/smartberg/prototype1.png.webp 1009w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1009 height=849 srcset="/images/projects/smartberg/prototype1-320.png 320w,
|
||
/images/projects/smartberg/prototype1-640.png 640w,
|
||
/images/projects/smartberg/prototype1-960.png 960w,
|
||
/images/projects/smartberg/prototype1-1280.png 1280w,
|
||
/images/projects/smartberg/prototype1.png 1009w" src=/images/projects/smartberg/prototype1.png alt="Prototype 1" loading=lazy decoding=async></picture></a></p><p><a href=/images/projects/smartberg/prototype2.png><picture><source type=image/avif srcset="/images/projects/smartberg/prototype2-320.png.avif 320w,
|
||
/images/projects/smartberg/prototype2-640.png.avif 640w,
|
||
/images/projects/smartberg/prototype2-960.png.avif 960w,
|
||
/images/projects/smartberg/prototype2-1280.png.avif 1280w,
|
||
/images/projects/smartberg/prototype2.png.avif 1378w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/prototype2-320.png.webp 320w,
|
||
/images/projects/smartberg/prototype2-640.png.webp 640w,
|
||
/images/projects/smartberg/prototype2-960.png.webp 960w,
|
||
/images/projects/smartberg/prototype2-1280.png.webp 1280w,
|
||
/images/projects/smartberg/prototype2.png.webp 1378w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1378 height=706 srcset="/images/projects/smartberg/prototype2-320.png 320w,
|
||
/images/projects/smartberg/prototype2-640.png 640w,
|
||
/images/projects/smartberg/prototype2-960.png 960w,
|
||
/images/projects/smartberg/prototype2-1280.png 1280w,
|
||
/images/projects/smartberg/prototype2.png 1378w" src=/images/projects/smartberg/prototype2.png alt="Prototype 2" loading=lazy decoding=async></picture></a></p><h3 id=style-guide>Style guide</h3><p>Lastly, I condensed the website’s visual elements into a small style-guide, which serves as a reference for the creation of future cohesive designs for the city.</p><p><a href=/images/projects/smartberg/styleguide1.png><picture><source type=image/avif srcset="/images/projects/smartberg/styleguide1-320.png.avif 320w,
|
||
/images/projects/smartberg/styleguide1-640.png.avif 640w,
|
||
/images/projects/smartberg/styleguide1-960.png.avif 960w,
|
||
/images/projects/smartberg/styleguide1-1280.png.avif 1280w,
|
||
/images/projects/smartberg/styleguide1.png.avif 1021w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/styleguide1-320.png.webp 320w,
|
||
/images/projects/smartberg/styleguide1-640.png.webp 640w,
|
||
/images/projects/smartberg/styleguide1-960.png.webp 960w,
|
||
/images/projects/smartberg/styleguide1-1280.png.webp 1280w,
|
||
/images/projects/smartberg/styleguide1.png.webp 1021w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1021 height=690 srcset="/images/projects/smartberg/styleguide1-320.png 320w,
|
||
/images/projects/smartberg/styleguide1-640.png 640w,
|
||
/images/projects/smartberg/styleguide1-960.png 960w,
|
||
/images/projects/smartberg/styleguide1-1280.png 1280w,
|
||
/images/projects/smartberg/styleguide1.png 1021w" src=/images/projects/smartberg/styleguide1.png alt="Styleguide 1" loading=lazy decoding=async></picture></a></p><p><a href=/images/projects/smartberg/styleguide2.png><picture><source type=image/avif srcset="/images/projects/smartberg/styleguide2-320.png.avif 320w,
|
||
/images/projects/smartberg/styleguide2-640.png.avif 640w,
|
||
/images/projects/smartberg/styleguide2-960.png.avif 960w,
|
||
/images/projects/smartberg/styleguide2-1280.png.avif 1280w,
|
||
/images/projects/smartberg/styleguide2.png.avif 1122w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/styleguide2-320.png.webp 320w,
|
||
/images/projects/smartberg/styleguide2-640.png.webp 640w,
|
||
/images/projects/smartberg/styleguide2-960.png.webp 960w,
|
||
/images/projects/smartberg/styleguide2-1280.png.webp 1280w,
|
||
/images/projects/smartberg/styleguide2.png.webp 1122w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1122 height=768 srcset="/images/projects/smartberg/styleguide2-320.png 320w,
|
||
/images/projects/smartberg/styleguide2-640.png 640w,
|
||
/images/projects/smartberg/styleguide2-960.png 960w,
|
||
/images/projects/smartberg/styleguide2-1280.png 1280w,
|
||
/images/projects/smartberg/styleguide2.png 1122w" src=/images/projects/smartberg/styleguide2.png alt="Styleguide 2" loading=lazy decoding=async></picture></a></p><p><a href=/images/projects/smartberg/styleguide3.png><picture><source type=image/avif srcset="/images/projects/smartberg/styleguide3-320.png.avif 320w,
|
||
/images/projects/smartberg/styleguide3-640.png.avif 640w,
|
||
/images/projects/smartberg/styleguide3-960.png.avif 960w,
|
||
/images/projects/smartberg/styleguide3-1280.png.avif 1280w,
|
||
/images/projects/smartberg/styleguide3.png.avif 1069w" sizes="(min-width: 1240px) 50vw, 70vw"><source type=image/webp srcset="/images/projects/smartberg/styleguide3-320.png.webp 320w,
|
||
/images/projects/smartberg/styleguide3-640.png.webp 640w,
|
||
/images/projects/smartberg/styleguide3-960.png.webp 960w,
|
||
/images/projects/smartberg/styleguide3-1280.png.webp 1280w,
|
||
/images/projects/smartberg/styleguide3.png.webp 1069w" sizes="(min-width: 1240px) 50vw, 70vw"><img width=1069 height=843 srcset="/images/projects/smartberg/styleguide3-320.png 320w,
|
||
/images/projects/smartberg/styleguide3-640.png 640w,
|
||
/images/projects/smartberg/styleguide3-960.png 960w,
|
||
/images/projects/smartberg/styleguide3-1280.png 1280w,
|
||
/images/projects/smartberg/styleguide3.png 1069w" src=/images/projects/smartberg/styleguide3.png alt="Styleguide 3" loading=lazy decoding=async></picture></a></p></article></main><footer></footer></body></html> |