NiteOwl
Adding Two Features to a Responsive Website for a Social Start-Up Company
Overview
NiteOwl is a social app that allows users to connect with live data to enhance their nightlife experience. The product offers transparency between venues and customers, revealing real-time data on cover fees, line wait times, crowd levels, and exclusive events.
The NiteOwl team hired me to elevate their own transparency with their customers. I implemented user-centered design principles, evaluated user research and analyzed usability testing to create seamless features within their current website.
My work increased user engagement and understanding, which drove up customer numbers and retention.
My Role → Product Designer and Website Developer
Tools → Figma, WordPress, Adobe XD
Scope → 4 week MVP with ongoing updates
The Challenge
There were two challenges.
The first: NiteOwl was lacking the neccesary Help Center qualifications to be listed on the Apple App Store. If not dealt with swiftly and promptly, this problem could threaten the business growth as Apple could remove NiteOwl from the store.
The second: users and investors voiced confusion with the meaning of certain icons within the Niteowl app, which may deter users and decrease retention.
How We Found A Solution
User Research
The NiteOwl team noticed that app users frequently brought up their confusion while using the app. The team completed multiple user interviews to narrow down the specific pains, eventually landing on the unintuitive nature of the icon meanings. Based on their insights, I created a user journey to help visualize the painpoints.
How Might We...
- How might we reevaluate the information architecture and content to ensure that the FAQ and contact features are logically organized and easily accessible?
- How might we improve the accessibility of the FAQ and Icon Key features to ensure that all users can easily understand and utilize them, especially as new icons and content are added over time?
Design Decisions
We created a site map to visualize information structure. The main decision in question: Where to place the Icon Key page?
We decided to create a separate page for the Icon Key to allow room for future additions of icons.
Wireframes
We started by wireframing a new layout for the FAQ page. The wireframes incorporated an accordion-style FAQ for better organization. We also added a “Connect with Us” Call to Action at the bottom of the FAQ page.
My next step was to transfer my sketches to Figma, then to my final platform on WordPress.
UI Design
Once the layout was finalized, we applied the company’s existing branding elements to create a seamless design.
Below, I’ve included screen shots of the current NiteOwl app’s Help Center page to further show the visual design.
Mid-Fi Wireframes
Once the layout was narrowed down, we applied the company’s branding elements to create a visually appealing design. The FAQ link was placed prominently in the top right of the navigation bar, as the stakeholders wanted it to be easily accessible.
We decided to create a separate page for the Icon Key to allow room for future additions of icons. To make it easily accessible, we nestled the link to the Icon Key within the FAQ accordion, as we saw them as related items.
Prototype
Using the wireframes as a reference, we created interactive prototypes to test the new FAQ layout with users, specifically the FAQ Accordion style. This iterative process allowed us to refine the design based on user feedback.
We Prototyped in Figma, Focusing on the FAQ Accordion
Click prototype below to see how the FAQ accordion will interact.
Usability Testing
We conducted usability testing with both existing users and new users. Participants found the redesigned FAQ page more accessible and appreciated the “Connect with Us” CTA. The placement of the Icon Key link within the FAQ accordion was well-received, aiding in app icon understanding.
Findings
Using the wireframes as a reference, we created interactive prototypes to test the new FAQ layout with users, specifically the FAQ Accordion style. This iterative process allowed us to refine the design based on user feedback.
1.
Stakeholders noticed there was no call to connect on the Home page. They want a clear "Connect with Us" template to be designed, able to input anywhere.
2.
Originally, the Icon Key was linked in the navigation bar for increased viewability, as stakeholders wanted. However, users claimed it seemed out of place.
3.
Users noticed there was misalignment with the social icons in the mobile version on the live site.
Iterations
We performed various rounds of iterations, based on the usability test feedback.
The iterative nature of the design process was a consistent surprise. User feedback led to numerous refinements throughout the project, even in areas we thought were final. It emphasized that design is an ongoing process, and there’s always room for improvement, no matter how polished a design may seem at first.
1.
Added the "Connect with Us" CTA to the bottom of both the FAQ page and Home page.
2.
We decided it was best to nestle the Icon Key within the FAQ accordion, keeping like-items together.
3.
Spacing was adjusted to accommodate the size of the social icons.
Impact
- Improved user satisfaction with FAQ access.
- Increased engagement with the “Connect with Us” feature.
- Enhanced user understanding of app icons.
Flexibility in Design Thinking
The need to nest the Icon Key link within the FAQ accordion was initially unexpected, but it turned out to be a valuable decision. This experience taught me the importance of staying flexible in design thinking and being open to unconventional solutions that may better serve the user’s needs.
Conclusion
The responsive website redesign for NiteOwl successfully addressed user pain points related to FAQ access, contact information, and app icon understanding.
The project improved user satisfaction and engagement while laying the foundation for future icon additions.
This case study highlights our user-centered approach to design and the positive impact it had on NiteOwl’s website and user experience.