TEOS Responsive Website
UX/UI Design
Summary
Problem
Bulgaria has a rich wine and alcohol culture, but there is limited information and availability that hinders people from experiencing this culture. TEOS wants to bridge this information gap while creating more visibility towards Bulgaria as a whole.
Solution
The goal of this project is to rebrand their current company and design a responsive website to enhance the visibility of Bulgaria and its unique culture by providing a user-friendly platform for individuals to explore, learn about, and conveniently locate Bulgarian wines and liquor in their area.
TEOS "Our Story" Page
User Centered Design Process
User Research & Competitive Anaylsis
Through user interviews, I gained valuable insights to create empathy maps and develop a profound understanding of our target users and their needs. The findings revealed a strong desire among our target audience to acquire comprehensive knowledge about Bulgarian wines and liquor, including cocktail recipes and local availability.
​
Unfortunately, existing websites often fail to integrate this essential information, particularly for Bulgarian products, resulting in user frustration. As a consequence, users abandon these websites in search of alternative sources, resulting in decreased user interactions and traffic. This detrimental impact on their business underscores the urgency of a UX/UI solution that seamlessly combines all relevant information, enabling users to satisfy their curiosity and make informed purchasing decisions within the same platform.
User Personas
Ideate
Sitemap
Website navigation and product/information organization was a primary pain point for users, so I created a sitemap using that knowledge.
​
​The goal was to make the strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to organize products and information, so that the users can find what they need in a short period of time.
Crazy 8 Sketches
Using crazy 8 allows me to quickly express different ideas to include into the website design.
Design
Sketching On Paper
With keeping the user pain points in mind, I sketched out wireframes by hand.
Below are variations of the home screen that focus on product organization to optimize browsing experience for users.
Paper to Digital
From the multiple paper wireframes above, I was able to transfer that idea from paper to digital through Adobe XD.
Screen Variations
By designing for responsiveness, I aimed to address the diverse ways users access the website, considering factors such as screen resolutions, orientations, and touch interactions. This approach allows the website to dynamically adjust and provide an optimal viewing and interaction experience regardless of the device being used.
​
In this project, I demonstrate the range of screen variations developed, showcasing the website's adaptability and consistency across different devices. By highlighting the flexibility and attention to detail in accommodating diverse screen sizes, I emphasize the user-centric approach taken to ensure accessibility and usability across the board.
​
Low-Fidelity Wireframes & Prototype
The team and I conducted a feedback session as it plays a crucial role in validating design decisions, refining the user experience, and ensuring alignment between user needs and business goals. During this session, we discussed topics from button placements to information organization. I made sure to listen to their feedback and implemented several suggestions in places that addressed user pain points.
​
We were then ready to start usability research on the low-fidelity prototype.
Usability Study
Through the study, we found that:
1. The participants wanted a blog section where they can learn more about Bulgaria and products.
2. On the map, participants found that there was no page that provided them with the location address of where to buy the items.
3. The buttons that are meant to take the participants back to the wine products was not working.
High-Fidelity Wireframe & Prototype
Using the insights from the usability study, I was able to reiterate the design and begin to create the mockups. At this point, I was able to create a logo, finalize typography and color schemes, and add more interaction and features into the high-fidelity prototype.
.png)
%20%E2%80%93%202.png)
I added a pop-up that included the address, working hours, and phone number of the store that is clicked on the map.
.png)
Final Product
Desktop Version
Mobile Version
Impact
Designing the responsive website for TEOS allowed me to create an online platform that truly values the users' time and needs. Through this project, I learned that building an accessible and user-friendly product is an iterative process that requires thorough research, feedback sessions, and continuous improvement. I was able to refine the design iteratively, ensuring that the website met user needs, increased engagement, and fostered a positive brand experience.