<!doctype html><htmllang=en-usdir=ltr><head><metacharset=utf-8><metaname=viewportcontent="width=device-width"><metaname=color-schemecontent="dark"><metaproperty="og:title"content="Design of a responsive Website for a major German city"><metaproperty="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."><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://melissasarria.site/projects/smartberg/"><metaproperty="article:section"content="projects"><metaproperty="article:published_time"content="2024-03-31T00:00:00+00:00"><metaproperty="article:modified_time"content="2024-03-31T00:00:00+00:00"><title>Design of a responsive Website for a major German city</title><linkrel=stylesheethref=/css/main.min.0f85edd55584a5f72b3f9e2b56177162130f79f6c88a4ccc25b3d1bc96743ebd.cssintegrity="sha256-D4Xt1VWEpfcrP54rVhdxYhMPefbIikzMJbPRvJZ0Pr0="crossorigin=anonymous><linkrel=stylesheettype=text/csshref=/icons/fontawesome.css><scriptsrc=/js/main.min.e5d39ccfb0f0cea6d6d76d9d863adeee51fe8bf9d85844f3c4ed0b7c33f38388.jsintegrity="sha256-5dOcz7DwzqbW122dhjre7lH+i/nYWETzxO0LfDPzg4g="crossorigin=anonymous></script></head><body><header><h2><ahref=/>UX Portfolio</a></h2><h2><ahref=/cv/>CV</a></h2></header><main><articleclass=content><divclass=title><h1>Design of a responsive Website for a major German city</h1></div><divclass=card><divclass=image><ahref=/images/projects/smartberg/image.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/image-320.png.avif320w,
/images/projects/smartberg/image.png 940w" src=/images/projects/smartberg/image.png alt="Cover Image" loading=lazy decoding=async></picture></a></div><divclass=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><h1id=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><h1id=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><h2id=understand>Understand</h2><h3id=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><h3id=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 Germa
/images/projects/smartberg/empathy_map.png 393w" src=/images/projects/smartberg/empathy_map.png alt="Empathy Map" loading=lazy decoding=async></picture></a></p><h4id=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><ahref=/images/projects/smartberg/user_persona.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/user_persona-320.png.avif320w,
/images/projects/smartberg/user_persona.png 1006w" src=/images/projects/smartberg/user_persona.png alt="User Persona" loading=lazy decoding=async></picture></a></p><h4id=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><ahref=/images/projects/smartberg/customer_journey.jpg><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/customer_journey-320.jpg.avif320w,
/images/projects/smartberg/customer_journey.jpg 4966w" src=/images/projects/smartberg/customer_journey.jpg alt="Customer Journey" loading=lazy decoding=async></picture></a></p><h4id=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><ahref=/images/projects/smartberg/user_scenario.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/user_scenario-320.png.avif320w,
/images/projects/smartberg/user_scenario.png 787w" src=/images/projects/smartberg/user_scenario.png alt="User Scenario" loading=lazy decoding=async></picture></a></p><h4id=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><ahref=/images/projects/smartberg/usability_testing.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/usability_testing-320.png.avif320w,
/images/projects/smartberg/usability_testing.png 1385w" src=/images/projects/smartberg/usability_testing.png alt="Usability Testing" loading=lazy decoding=async></picture></a></p><h4id=swot-analyze>Swot Analyze</h4><p>I further did a competitive analysis to concretize the strengths and weaknesses of potential competitors (Freiburg).</p><p><ahref=/images/projects/smartberg/swot_analyze.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/swot_analyze-320.png.avif320w,
/images/projects/smartberg/swot_analyze.png 957w" src=/images/projects/smartberg/swot_analyze.png alt="Swot Analyze" loading=lazy decoding=async></picture></a></p><h4id=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><ahref=/images/projects/smartberg/VPC.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/VPC-320.png.avif320w,
/images/projects/smartberg/VPC.png 1967w" src=/images/projects/smartberg/VPC.png alt=VPC loading=lazy decoding=async></picture></a></p><h2id=ideation>Ideation</h2><h3id=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><ahref=/images/projects/smartberg/story_cards.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/story_cards-320.png.avif320w,
/images/projects/smartberg/user_story.png 1728w" src=/images/projects/smartberg/user_story.png alt="User Story" loading=lazy decoding=async></picture></a></p><h3id=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><ahref=/images/projects/smartberg/card_sorting.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/card_sorting-320.png.avif320w,
/images/projects/smartberg/card_sorting.png 4922w" src=/images/projects/smartberg/card_sorting.png alt="Card Sorting" loading=lazy decoding=async></picture></a></p><h3id=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><ahref=/images/projects/smartberg/user_flow.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/user_flow-320.png.avif320w,
/images/projects/smartberg/user_flow.png 963w" src=/images/projects/smartberg/user_flow.png alt="User Flow" loading=lazy decoding=async></picture></a></p><h2id=design>Design</h2><h3id=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><ahref=/images/projects/smartberg/sketch.jpeg><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/sketch-320.jpeg.avif320w,
/images/projects/smartberg/sketch.jpeg 1772w" src=/images/projects/smartberg/sketch.jpeg alt=Sketch loading=lazy decoding=async></picture></a></p><h3id=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><ahref=/images/projects/smartberg/wireframe1.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/wireframe1-320.png.avif320w,
/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><ahref=/images/projects/smartberg/app1.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/app1-320.png.avif320w,
/images/projects/smartberg/app2.png 1198w" src=/images/projects/smartberg/app2.png alt="App 2" loading=lazy decoding=async></picture></a></p><h3id=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><ahref=/images/projects/smartberg/prototype1.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/prototype1-320.png.avif320w,
/images/projects/smartberg/prototype2.png 1378w" src=/images/projects/smartberg/prototype2.png alt="Prototype 2" loading=lazy decoding=async></picture></a></p><h3id=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><ahref=/images/projects/smartberg/styleguide1.png><picture><sourcetype=image/avifsrcset="/images/projects/smartberg/styleguide1-320.png.avif320w,
